AI/UX PLAYGROUND
Subscribe newsletter
PromptVisual design

AI Prototype Design System Validation

Validate AI-generated prototypes against design system requirements and identify inconsistencies to fix.

Share

Actions

Tags

design-systemvalidationaiprototypingquality-assuranceconsistency

Prompt

Validate this AI-generated prototype against the design system requirements.

AI-Generated Prototype:
[Paste prototype code, screenshot, or description]

Design System Requirements:
[Paste design system documentation, tokens, or reference designs]

Provide:

1. Design System Compliance Check
   - Color usage (matches design tokens?)
   - Typography (correct fonts, sizes, weights?)
   - Spacing (follows spacing scale?)
   - Border radius (matches system values?)
   - Shadows/elevation (correct styles?)
   - Component patterns (matches design system?)

2. Inconsistencies Identified
   - Specific mismatches found
   - Where design system is violated
   - Severity of each issue
   - Impact on consistency

3. Component Validation
   For each component:
   - Matches design system variant?
   - States correct (hover, active, disabled)?
   - Spacing and sizing correct?
   - Styling matches system?

4. Fix Recommendations
   - Specific changes needed
   - Design token values to use
   - Component patterns to follow
   - Code adjustments required

5. Refined AI Prompt
   - Updated prompt with corrections
   - Emphasizes design system compliance
   - Includes specific token values
   - Addresses identified issues

6. Validation Checklist
   - Items to verify manually
   - Design system elements to check
   - Comparison points
   - Acceptance criteria

Format as a validation report with specific fixes and an improved AI prompt.

How to use

  1. 1Prepare your AI-generated prototype: Collect prototype code, screenshots, or design description
  2. 2Prepare your design system documentation: Collect design system tokens, component specs, or reference designs
  3. 3Replace [Paste prototype code, screenshot, or description] with your AI-generated prototype. If you have screenshots, upload them
  4. 4Replace [Paste design system documentation, tokens, or reference designs] with your design system. Include: color tokens (hex codes), typography tokens, spacing scale, component patterns
  5. 5If you have Figma design system: First use "Extract Design System Using Figma MCP" prompt to get your design system, then use it here for comparison
  6. 6Add context before the prompt: Describe the validation goals. Example: "AI-generated checkout flow. Design system: Material Design 3. Goal: Verify prototype matches design system tokens."
  7. 7Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably with vision if using screenshots)
  8. 8Review the validation report: Check design system compliance, inconsistencies identified, and fix recommendations
  9. 9Apply fixes: Use the fix recommendations to correct the AI-generated prototype
  10. 10Use the refined prompt: Use the improved AI prompt generated in the report to regenerate the prototype with corrections
  11. 11Re-validate: Run validation again on the fixed prototype to ensure it matches the design system

Pro Tips

  • • Include design system tokens: Paste your actual design tokens (colors, spacing, typography) so AI can compare accurately
  • • For Figma systems: First extract design system using Figma MCP prompt, then use extracted tokens for validation
  • • Specify validation focus: Mention "Focus on color tokens" or "Focus on typography" for targeted validation
  • • Use refined prompt: The validation report includes an improved AI prompt - use it to regenerate the prototype with fixes
  • • Iterate: Run validation → fix → regenerate → re-validate until the prototype matches your design system perfectly

Related Prompts

Branding

Logo System Spec Writer

Turn a chosen logo direction into production-ready logo system specs: lockups, spacing, sizing, color, and usage rules.

logo-designbrand-guidelinesdesign-system
Visual design

UI Component Specification

Generate a detailed UI component specification with states, variants, and interaction patterns.

uicomponentsspecification
Visual design

Visual Hierarchy Design

Design effective visual hierarchy for layouts to guide user attention and improve readability.

visual-hierarchygraphic-designlayout
Visual design

Design System Component Visual Spec Writer

Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.

visual-designdesign-systemcomponents

New prompts & templates by email

Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.

Subscribe on Substack