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
- 1Prepare your AI-generated prototype: Collect prototype code, screenshots, or design description
- 2Prepare your design system documentation: Collect design system tokens, component specs, or reference designs
- 3Replace [Paste prototype code, screenshot, or description] with your AI-generated prototype. If you have screenshots, upload them
- 4Replace [Paste design system documentation, tokens, or reference designs] with your design system. Include: color tokens (hex codes), typography tokens, spacing scale, component patterns
- 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
- 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."
- 7Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably with vision if using screenshots)
- 8Review the validation report: Check design system compliance, inconsistencies identified, and fix recommendations
- 9Apply fixes: Use the fix recommendations to correct the AI-generated prototype
- 10Use the refined prompt: Use the improved AI prompt generated in the report to regenerate the prototype with corrections
- 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
Brand Consistency Checklist
Create a brand governance review checklist for all teams and channels — covering visual identity, verbal identity, and overall brand fit with a pass/flag/fail scoring system.
brandingbrand-guidelinesbrand-management
Branding
Visual Identity System Spec
Turn an approved logo direction into a production-ready full visual identity spec — logo system, color palette, typography, imagery style, and graphic elements.
logo-designbrand-guidelinesdesign-system
Branding
Product Line Naming System
Build a systematic naming architecture for your product portfolio — choosing the right model (branded house, house of brands, etc.) and defining scalable naming conventions.
brandingnamingbrand-guidelines
Branding
Brand Launch Checklist
Generate a complete brand launch or rebrand rollout checklist — every asset, every team, every channel — sequenced from pre-launch through go-live and post-launch.
brandingbrand-guidelinesdesign-system