Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI — ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI — ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.
license
Complete terms in LICENSE.txt
UI Design Brain
This skill provides a curated knowledge base of 60+ UI component patterns sourced from component.gallery and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.
Before writing any UI code, consult this skill to select the right components and follow their best practices. Read components.md for the full reference.
When to Use This Skill
Apply whenever the user asks to build, design, or generate:
Web pages, landing pages, marketing sites
SaaS dashboards, admin panels, settings pages
Forms, data tables, navigation structures
Modals, drawers, popovers, or overlay patterns
Any React, HTML/CSS, or Tailwind UI component
Design Philosophy
Every generated interface should feel modern, minimal, and production-ready — not like a template.
Core Principles
Restraint over decoration. Fewer elements, highly refined. White space is a feature.
Typography carries hierarchy. Pair a distinctive display font with a clean body font. Maximize weight contrast between headings and labels.
One strong color moment. Neutral palette first (warm off-whites, near-blacks, muted mid-tones). Introduce one confident accent. If it could appear on a poster or book cover, it's probably timeless.
Spacing is structure. Use an 8 px grid. Tighter gaps group related elements; generous gaps let hero content breathe.
Accessibility is non-negotiable. WCAG AA contrast minimums. Focus indicators. Semantic HTML. Keyboard navigation.
No generic AI aesthetics. Avoid: purple-on-white gradients, Inter/Roboto defaults, evenly-spaced card grids, and cookie-cutter layouts. Every interface should feel designed for its specific context.
Quality Bar
The output should match what you'd expect from a senior product designer at a top SaaS company:
Clean visual rhythm with intentional asymmetry
Obvious interactive affordances (hover, focus, active states)
Loading: skeleton screens > spinners (show after 300 ms delay)
Validation: inline on blur, not on every keystroke
Disabled elements: visually distinct but still readable
Step 3 — Choose a Design Direction
Select the style preset that best matches the user's intent, or ask if unclear:
Modern SaaS (default)
Neutral palette, one strong accent
8 px grid, generous white space
Clean, professional, spacious
Apple-level Minimal
Near-monochrome, warm grays
Large type hierarchy, tight tracking on display text
Abundant white space, micro-interactions (150–250 ms ease-out)
Enterprise / Corporate
Information-dense, well-defined regions
Compact spacing scale (4/8/12/16/24 px)
Robust form handling, fully keyboard-navigable
Creative / Portfolio
Bold, expressive, strong visual personality
Asymmetric layouts, dramatic scale contrast
Editorial typography, vivid accent colors
Data Dashboard
Data-dense, optimised for scannability
Consistent vertical alignment across rows
Clear metric hierarchy: KPI → trend → detail
Step 4 — Generate Code
Write production-ready code following these rules:
Stack: React + Tailwind CSS (unless user specifies otherwise)
Spacing: Tailwind spacing scale (p-2, gap-4, etc.) on an 8px grid
Colors: CSS variables or Tailwind config for palette consistency
Typography: Tailwind text utilities; expressive font pairings via Google Fonts
States: Implement hover, focus, active, disabled for all interactive elements
Responsive: Mobile-first; test at 375, 768, 1440 px
Accessibility: Semantic HTML, ARIA where needed, focus management
Component Quick Reference
Below are the 15 most commonly needed components. For the full 60+ component reference with best practices, aliases, and layout examples, see components.md.
Component
When to use
Key rule
Button
Trigger actions
Verb-first labels; one primary per section
Card
Represent an entity
Media → title → meta → action; shadow OR border, not both
