Skip to content

Prompting Rules

How to write effective prompts for MetrePay UI generation using AI tools (Claude, ChatGPT, Copilot, Cursor).

The Golden Rule

Always provide context before asking for UI. AI tools generate generic UI by default. The more specific your context, the more consistent the output.

Prompt Structure

Use this structure for any MetrePay UI prompt:

[CONTEXT] What you're building and for whom
[FRAMEWORK] Bulma / Tailwind / Vanilla CSS
[PATTERN] Which MetrePay pattern to follow
[CONSTRAINTS] Specific design rules to apply
[REQUEST] What you want generated

Example Prompts

Single Payment Form

Generate a MetrePay single payment form using Bulma CSS.

Context: This is a payment form for a merchant invoice. The payer enters their personal information before being redirected to the payment method selection.

Follow the MetrePay payment form pattern:
- Page background: #F1F1F1
- Centered white card, max-width 480px, border-radius 20px
- Blue hero header (#6E96FF) showing merchant name and amount
- Form body: white, padding 28px 32px
- Step indicator: uppercase blue label "STEP 1 OF 2" + bold title
- Fields: Full name, Email, Document number
- Input height 42px, border 1.5px solid #92A3C8, border-radius 8px
- Submit button: full-width, blue #6E96FF, height 42px, font-weight 600
- Footer: "Powered by MetrePay · Secure payment"
- Font: Cabin (Google Fonts)

Generate complete HTML with inline styles or Bulma classes.

Recurrent Payment Form

Generate a MetrePay subscription payment form using Tailwind CSS.

Context: This is a debit authorization form for a monthly subscription.

Follow the MetrePay recurrent payment pattern:
- Purple hero header (#5C0390) with product name and price/period
- All interactive elements use purple instead of blue
- Include a consent checkbox: "I authorize the automatic monthly debit of [amount]"
- Submit button text: "Authorize subscription →"
- Same layout as single payment form but purple-themed

Use Tailwind utility classes with the MetrePay color palette.

Product Catalog

Generate a MetrePay product catalog page using vanilla CSS.

Context: A merchant's payment catalog showing 6 products.

Follow the MetrePay catalog pattern:
- Page background: #F1F1F1
- Gradient hero header (linear-gradient(73deg, #6E96FF 20%, #5C0390 100%))
- Merchant logo circle (white/20% opacity) + merchant name
- Responsive product grid: 1 col mobile → 2 tablet → 3 desktop → 4 wide
- Product cards: #FAFAFA, border-radius 10px, hover to white + shadow + translateY(-2px)
- Each card: period label (muted), product name (bold), price (blue #6E96FF), ghost button
- Font: Cabin

Generate complete HTML + CSS.

Dashboard Widget

Generate a MetrePay dashboard stats row using Tailwind CSS.

Context: Top of the merchant portal dashboard showing 4 key metrics.

Follow the MetrePay metrics pattern:
- 4-column grid (2 on tablet, 1 on mobile)
- White cards with shadow: 0px 0px 6px 3px rgba(127,146,189,0.1)
- Border-radius: 10px, padding: 20px 24px
- Stat label: 13px, color #999
- Stat value: 32px, font-weight 700, color #333
- Trend: 12px, green for positive (#1a7f4b), red for negative (#c80000)
- Font: Cabin

Show: Total collected, Active subscriptions, Pending payments, Failed this month.

Anti-Patterns to Avoid in Prompts

❌ Vague ✅ Specific
"Make a payment form" "Make a MetrePay single payment form with blue hero header"
"Use nice colors" "Use #6E96FF for blue, #5C0390 for purple"
"Make it look modern" "Use Cabin font, 8px radius, soft shadows, #F1F1F1 background"
"Add some cards" "Use #FAFAFA cards with 10px radius, hover to white + shadow"
"Style the buttons" "Blue #6E96FF buttons, 42px height, 8px radius, font-weight 600"

Framework-Specific Tips

Bulma

  • Always override font: font-family: 'Cabin', sans-serif !important
  • Override .button.is-primary to use #6E96FF
  • Override .input border-radius to 8px
  • Use .notification.is-danger for error alerts

Tailwind

  • Reference the MetrePay Tailwind config (see Tailwind Config)
  • Use bg-mp-blue, text-mp-text-dark, shadow-card etc.
  • Always specify font-family: Cabin in the base layer

Vanilla CSS

  • Always start with the CSS variables from CSS Variables
  • Use var(--mp-color-blue) instead of hardcoded values