AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

AI Prototype Design System Validation

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

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. 01

    Prepare your AI-generated prototype: Collect prototype code, screenshots, or design description

  2. 02

    Prepare your design system documentation: Collect design system tokens, component specs, or reference designs

  3. 03

    Replace [Paste prototype code, screenshot, or description] with your AI-generated prototype. If you have screenshots, upload them

  4. 04

    Replace [Paste design system documentation, tokens, or reference designs] with your design system. Include: color tokens (hex codes), typography tokens, spacing scale, component patterns

  5. 05

    If 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. 06

    Add 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. 07

    Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably with vision if using screenshots)

  8. 08

    Review the validation report: Check design system compliance, inconsistencies identified, and fix recommendations

  9. 09

    Apply fixes: Use the fix recommendations to correct the AI-generated prototype

  10. 10

    Use the refined prompt: Use the improved AI prompt generated in the report to regenerate the prototype with corrections

  11. 11

    Re-validate: Run validation again on the fixed prototype to ensure it matches the design system

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