AI Guidelines¶
This section provides rules, constraints, and prompts for AI-assisted MetrePay UI generation. These guidelines ensure that AI tools produce consistent, on-brand interfaces.
Sections¶
| Section | Description |
|---|---|
| Prompting Rules | How to prompt AI for MetrePay UI |
| Visual Constraints | Do/don't rules for visual decisions |
| Tailwind Guidelines | Tailwind-specific AI generation rules |
| Bulma Guidelines | Bulma-specific AI generation rules |
| UI Generation Rules | Complete ruleset for AI UI generation |
Why This Matters¶
AI tools (Copilot, Claude, Cursor, ChatGPT) generate UI code based on patterns they've learned. Without explicit constraints, they will:
- Use generic Bootstrap or Material Design patterns
- Choose arbitrary colors and spacing
- Ignore MetrePay's visual identity
- Generate inconsistent interfaces
These guidelines give AI tools the context they need to generate MetrePay-quality UI on the first attempt.
Quick Reference for AI Prompts¶
When prompting any AI tool to generate MetrePay UI, always include:
Use the MetrePay design system:
- Font: Cabin (Google Fonts)
- Blue: #6E96FF (single payments), Purple: #5C0390 (recurrent)
- Background: #F1F1F1, Cards: #FAFAFA, White: #FFFFFF
- Border radius: 8px (inputs/buttons), 10px (cards), 16px (modals)
- Input height: 42px, border: 1.5px solid #92A3C8
- Shadows: soft (0px 0px 6px 3px rgba(127,146,189,0.1))
- Transitions: 0.3s ease
- Forms: centered, max-width 480px, white card, blue hero header