1. What to replace:
Replace each {{placeholder}} with your component name, product context, aesthetic theme, and supported platforms.
2. How to customize variables:
- component_name: Choose complex components like Data Tables, Date Range Pickers, Navigation Bars, or Modals.
- application_context: Tailor for FinTech, Healthcare, Developer Tools, or Ecommerce.
- design_aesthetic: Match your brand identity (e.g., Stripe minimal, Vercel monochromatic, Salesforce Lightning).
- target_platform: Specify web, native mobile, or multi-platform responsive.
3. Compatible AI Tools:
ChatGPT (GPT-4o), Claude 3.5 Sonnet, Cursor, Gemini 1.5 Pro.
4. Expected Result:
A developer-ready design system token and component specification that bridges Figma components and React/Tailwind/CSS code seamlessly.
Act as a Principal Design Systems Architect and Lead UI/UX Engineer. Create a complete, production-ready Design System Component Specification for {{component_name}} tailored for {{application_context}}.
Design System Requirements:
- Component Name & Scope: {{component_name}} (e.g., Multi-Select Filter Combobox, Data Table with Bulk Actions, Command Palette)
- Design Language / Aesthetic: {{design_aesthetic}} (e.g., Clean B2B SaaS, Apple Human Interface, Linear-inspired dark mode, Material 3)
- Target Platforms: {{target_platform}} (e.g., Desktop Web, Responsive Tablet, Mobile Native iOS/Android)
- Accessibility Target: WCAG 2.2 Level AA compliance, keyboard navigation, and screen reader announcements.
Component Specification Deliverables:
1. Anatomy & Visual Architecture:
- Breakdown of every sub-element (container, label, input, icons, badges, dropdown list, helper text).
- Precise spacing (4px/8px grid system), corner radii, border widths, and elevation shadow levels.
2. Semantic Design Tokens & Theme Variables:
- Token hierarchy for both Light Mode and Dark Mode: background, surface, border, text-primary, text-secondary, interactive-hover, focus-ring, and error/success states.
3. Complete State Matrix:
Define visual attributes and micro-interactions for all states:
- Default / Rest
- Hover
- Active / Pressed
- Focused (with 2px high-visibility focus ring specification)
- Disabled (opacity and pointer-events rules)
- Loading / Skeleton state
- Error / Validation failure (accessible iconography + inline error copy)
4. Responsive Behavior & Touch Targets:
- Breakpoint adaptions (Desktop vs Touch screen minimum 44x44px target).
- Scrolling, truncation, and overflow rules for long content strings.
5. Accessibility & ARIA Implementation Specs:
- Exact ARIA roles, attributes, and live regions (e.g., role, aria-expanded, aria-controls, aria-activedescendant).
- Comprehensive keyboard navigation interaction map (Tab, Enter, Space, Arrow keys, Escape).
Customize this prompt (fill variables)
How to use this prompt
Example: what to expect
Example input
component_name: Interactive Filter Chip Bar with Multi-Select Dropdowns and Active Badge Counts
application_context: B2B Procurement and Supply Chain Inventory Management portal
design_aesthetic: Modern clean enterprise light mode with slate-grey surfaces and indigo accents
target_platform: Responsive Web (Desktop 1440px down to Tablet 768px)
Example output
A complete design system specification breaking down the chip container, label, count badge, and dismiss icon. Provides semantic CSS variables for 8 states (Rest, Hover, Pressed, Active, Disabled, Focus-Visible, Error), WCAG-compliant contrast ratios (4.5:1 text, 3:1 borders), and an ARIA role="group" navigation schema with full arrow key and spacebar support.
Variables explained
| Variable | What to enter |
|---|---|
{{component_name}} |
Name the UI element to specify. |
{{application_context}} |
Describe your software use case. |
{{design_aesthetic}} |
Specify aesthetic guidelines. |
{{target_platform}} |
Choose responsive web or mobile. |
Tips for better results
Best used for: UI/UX design systems and front-end engineering
- Give the AI context first: who you are, who the audience is, and what “good” looks like for you.
- Ask for output in a specific format (bullets, table, markdown) when you need structure.
- If the result is close but not perfect, reply with “keep the structure, make it more…” — do not start over.
- For long tasks, split the prompt into steps instead of expecting one giant answer.
- Different tools behave differently — ChatGPT, Claude and Gemini each have their own style. Try this prompt on the tool you use most.
How to use this Design prompt effectively
What this prompt does
Generate comprehensive production-ready UI/UX design system specifications including typography scales, semantic color tokens, state variants, and accessibility standards.
Getting the most out of it
- Copy the prompt and paste it into your AI tool of choice (ChatGPT, Claude or Gemini).
- Fill the variables in curly brackets with your own topic, audience and tone — the customize button above builds a ready version for you.
- Review the first draft for facts and style before using it. AI output is a starting point, not a final product.
- Iterate: tell the AI what to keep and what to change. Small corrections beat re-typing the whole prompt.
Common mistakes to avoid
- Leaving the {{variables}} unfilled — the AI then guesses your topic.
- Expecting one output to be perfect — plan for 2–3 rounds of refinement.
- Pasting confidential information into public AI tools.