Skip to main content

🎨 UI Designer Prompt

A UI designer prompt instructs an LLM to assist with user interface and UX design tasks — providing design feedback, generating component descriptions, checking accessibility compliance, and helping build consistent design systems.

Why This Matters​

Good UI/UX design is the difference between a product users love and one they abandon. With 88% of users unlikely to return after a bad experience, design quality is a business-critical concern. An AI design assistant can accelerate design reviews, catch accessibility issues early, and help developers translate wireframes into component specifications.

The Production Prompt​

UI Designer — Full System Prompt
You are a senior UI/UX designer with 10+ years of experience in product design, design systems, and web accessibility (WCAG 2.2 AA compliance).

**Role:** Act as a design consultant who provides specific, actionable design feedback and generates detailed component specifications.

**Core Capabilities:**

1. **Design Review:**
   - Evaluate layouts for visual hierarchy, spacing consistency, and alignment
   - Check color contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for normal text, 3:1 for large text)
   - Identify usability issues: unclear CTAs, cognitive overload, poor information architecture
   - Score the design on: Clarity (1-10), Consistency (1-10), Accessibility (1-10)

2. **Component Specification:**
   - Generate detailed component specs including: states (default, hover, active, disabled, error, loading), props, responsive behavior, and spacing tokens
   - Use 8px grid system for all spacing recommendations
   - Define typography using a modular scale (e.g., 12/14/16/20/24/32/40px)

3. **Accessibility Audit:**
   - Check for: keyboard navigation, screen reader compatibility, focus indicators, color-only information, touch target sizes (minimum 44x44px)
   - Provide specific fix recommendations with code examples when applicable
   - Reference specific WCAG 2.2 success criteria by number

4. **Design System Guidance:**
   - Ensure consistency with provided design tokens
   - Recommend component patterns from established systems (Material, Radix, Shadcn)
   - Suggest naming conventions for design tokens and components

**Output Format:**
- Use structured sections with clear headings
- Include specific values (hex colors, pixel sizes, spacing tokens) — never vague terms like "make it bigger"
- When suggesting changes, show "Before → After" comparisons
- Rate severity of issues: 🔴 Must fix, 🟡 Should fix, 🔵 Nice to have

Bad vs. Improved Prompts​

❌ Bad Prompt​

Review my website design and tell me what to improve.

Why it fails: No design context, no screenshot or component description, no target audience, no success criteria. The feedback will be generic platitudes like "use more whitespace."

✅ Improved Prompt​

You are a senior UI/UX designer specializing in SaaS dashboard design.

Review this pricing page component:
- Layout: 3-column card layout with Free/Pro/Enterprise tiers
- Each card: plan name, price, feature list (8-12 items), CTA button
- Colors: background #FFFFFF, cards #F8FAFC, primary CTA #2563EB, text #1E293B
- Font: Inter — headings 24px/700, body 14px/400, price 48px/700
- Spacing: 24px card padding, 16px between feature list items
- The "Pro" card has a "Most Popular" badge and is visually elevated

Target audience: Technical founders evaluating B2B tools.
Goal: Maximize Pro plan conversions.

Evaluate for:
1. Visual hierarchy — does the eye go to the Pro card first?
2. CTA clarity — is the action obvious?
3. Accessibility — contrast ratios, focus states, screen reader order
4. Mobile responsiveness — how should this stack on screens < 768px?

Provide specific, measurable recommendations with exact values.

Try It Yourself​

🧪 Try It Yourself

Edit the prompt and click Run to see the AI response.

Tips for Customization​

CustomizationHow to Modify the Prompt
Design system lockAdd: "All recommendations must use our design tokens: spacing (4/8/12/16/24/32/48px), colors (brand-50 through brand-900)"
Platform focusChange to: "You are a mobile UI designer specializing in iOS Human Interface Guidelines" or "Material Design 3"
Component generationSwitch task to: "Generate a complete component spec for a {{component}} including all states, props, and responsive breakpoints"
Figma-to-codeAdd: "Convert this design description into a React component using Tailwind CSS with exact spacing and color tokens"
User testing scriptAppend: "Also generate 5 usability test tasks to validate this design with real users"

Practice Challenge​

Challenge

Describe a UI component from your current project in plain text (layout, colors, spacing, typography). Use the improved prompt pattern to get a design review. Focus on accessibility — check if the AI catches contrast ratio issues, missing focus states, or touch target problems. Verify at least one recommendation using a real contrast checker tool like WebAIM.

Real-World Scenario​

Scenario: A design team wants an automated accessibility audit that runs on every Figma design before developer handoff.

Implementation approach:

  1. Export component descriptions from Figma using the Figma API (layer names, colors, dimensions, text styles)
  2. Structure the export into a standardized format: component name, layout type, colors used, font sizes, interactive elements
  3. Inject into the UI designer prompt with instruction: "Perform a WCAG 2.2 AA accessibility audit"
  4. LLM returns structured findings with severity ratings and fix suggestions
  5. Automatically create Jira tickets for 🔴 Critical issues
  6. Track accessibility score trends across design iterations

This catches 60–70% of accessibility issues before any code is written, dramatically reducing remediation cost.

Interview Question​

Interview Question

Q: How would you prompt an LLM to generate consistent, design-system-compliant component specifications?

A: I'd provide three layers of context:

  1. Design tokens — feed the full token set (colors, spacing scale, typography scale, border radii, shadows) into the system prompt so the model only uses approved values
  2. Component patterns — include 2–3 examples of existing component specs from the design system as few-shot examples, showing the exact format expected
  3. Constraints — explicitly state rules like "never invent new colors — use only the provided palette", "all spacing must use 8px grid multiples", "every interactive element must define all 5 states: default, hover, active, focused, disabled"
  4. Validation step — add a final instruction: "After generating the spec, verify that every value used exists in the provided design tokens. List any violations."

Summary​

Summary
  • A UI designer prompt must include concrete design details (colors, sizes, spacing) — not vague descriptions
  • Always specify the evaluation criteria: visual hierarchy, accessibility, responsiveness, consistency
  • Reference WCAG 2.2 standards explicitly for accessibility reviews
  • Request specific, measurable recommendations with exact values — never "make it pop"
  • Use low-to-moderate temperature (0.2–0.5) for design reviews and specifications