Best Practices

Introduction

The quality of your extracted design system depends largely on the quality of your input references. This guide shares best practices to maximize extraction accuracy and usefulness.

Before You Generate

1. Choose Quality References

Do:

• ✓ Use high-resolution images (minimum 1920px width)
• ✓ Include screenshots of real-world products
• ✓ Use images with good contrast and clarity
• ✓ Screenshot full pages or complete sections
• ✓ Use designs with consistent styling

Don't:

• ✗ Use blurry or low-resolution images
• ✗ Use mockups with watermarks or annotations
• ✗ Mix unrelated design systems
• ✗ Use very old design screenshots
• ✗ Screenshot partial or zoomed-in views

2. Prepare Multiple References

Recommended approach:

• 1 reference: Basic, for quick testing
• 2 references: Good, shows consistency
• 3+ references: Excellent, reveals deeper patterns

What to capture:

• Full page layout (hero section, content area, footer)
• Various component states (buttons, inputs, cards)
• Different page types (landing, dashboard, settings)
• Typography variations (headings, body, captions)
• Various color applications

3. Create a Clear Prompt

Your prompt helps AI understand your intent.

Good prompts:

Poor prompts:

Prompt Tips:

• Describe the industry or context (SaaS, e-commerce, fintech)
• Mention aesthetic (minimal, bold, playful, professional)
• Note any specific color schemes or moods
• Mention key design principles you want to emphasize

Capturing References

From Websites

Best practices:

1. Use a modern browser (Chrome, Safari, Firefox)
2. Set zoom to 100%
3. Disable browser extensions
4. Take full-page screenshots (not partial)
5. Capture multiple pages:
   • Homepage/landing
   • Main product page
   • Settings or user profile
   • Different states (light/dark mode if applicable)

Tools:

• Built-in browser screenshot
• Chrome extension: Full Page Screen Capture
• Mac: Shift + Cmd + 5
• Windows: Snip & Sketch

From Figma

Best practices:

1. Export frames at 2x scale (for clarity)
2. Include padding around elements (not just the frame)
3. Make sure all components are visible
4. Export as PNG for best quality
5. Capture multiple variations:
   • Component library page
   • Full page mockup
   • Various states and interactions

Formats:

• PNG: Best for fidelity
• SVG: Good for vector designs
• High-res JPG: Second choice to PNG

From Screenshots

Best practices:

1. Use actual devices or high-quality mocks
2. Ensure text is readable
3. Capture in full natural lighting (if real devices)
4. Include enough context
5. Don't crop out important margins

Quality checklist:

• Is text readable at normal viewing size?
• Are colors accurate?
• Are all important UI elements visible?
• Is the image sharp (not blurry)?
• Is the resolution 1920px or wider?

After You Generate

1. Review the Extracted System

Check for accuracy:

• Are colors correctly identified?
• Is typography correct?
• Are spacing values realistic?
• Are component descriptions accurate?

Common issues:

• Colors picked from shadows or gradients (fix by regenerating with clearer references)
• Font names might be approximations (most AI models can't identify proprietary fonts)
• Spacing might include design artifacts (adjust manually if needed)

2. Manual Refinements

Most systems benefit from small adjustments:

Color refinement:

Typography adjustments:

Spacing cleanup:

3. Export and Share

Recommended formats:

• JSON: For developers
• CSS: For web development
• Figma: For designers
• Code: For implementation

Common Mistakes to Avoid

Mistake 1: Poor Image Quality

Problem: Blurry or low-res images lead to inaccurate extraction

Solution: Use 1920px+ width images, clear screenshots, zoom to 100%

Mistake 2: Inconsistent References

Problem: Mixing completely different design systems confuses the AI

Solution: Keep references visually cohesive from the same product/designer

Mistake 3: Too Few References

Problem: Single screenshot might miss important design patterns

Solution: Provide 2-3 references showing different sections and states

Mistake 4: Vague Prompts

Problem: Unclear intent leads to generic extraction

Solution: Describe style, industry, mood, and specific goals

Mistake 5: Ignoring Extracted Metadata

Problem: Using extracted system without validation

Solution: Review and manually adjust values for brand accuracy

Optimization Tips

For Color Extraction

• Include UI elements in different colors
• Show how colors are used (buttons, text, backgrounds, accents)
• Provide screenshots with various color states

For Typography

• Include different text sizes (headings, body, captions)
• Show typography in actual use (not just specimens)
• Include both dark and light text

For Spacing

• Capture elements with clear padding and margins
• Include grids or aligned layouts
• Show spacing in real UI context

For Components

• Screenshot each component type you want captured
• Show component states (hover, active, disabled)
• Include variations (sizes, colors, states)

Real-World Examples

Example 1: Stripe-Inspired Design

Input: 3 screenshots of Stripe's website Good prompt: "Modern fintech company website with minimal design, blue primary color, clear hierarchy, sans-serif typography" Result: Clean, professional design system with clear color palette and spacing grid

Example 2: Dashboard Design

Input: Dashboard mockup from Figma + 2 real product screenshots Good prompt: "Analytics dashboard with dark theme, real-time data focus, card-based layout with metrics" Result: Component-focused system with emphasis on data visualization

Example 3: Mobile App

Input: 3 mobile screenshots showing different flows Good prompt: "Mobile shopping app with colorful, friendly design, focus on product discovery and checkout" Result: Mobile-optimized component library with touch-friendly sizing

Checklist Before Generating

• [ ] Have 2-3 high-quality reference images (1920px+ width)
• [ ] All images are clear and in focus
• [ ] Images capture different parts of the design
• [ ] Written a clear, descriptive prompt (3-4 sentences)
• [ ] Described the style, industry, and intended mood
• [ ] Images are from consistent design systems
• [ ] Text in images is readable
• [ ] Colors appear accurate in the images

What to Do If Results Are Poor

1. Check your references:

   • Are they high quality and clear?
   • Do they represent the design consistently?

2. Improve your prompt:

   • Be more specific about the style
   • Add more context about the product/brand
   • Describe color preferences

3. Try different references:

   • Use different pages or sections
   • Include more varied examples
   • Show more component states

4. Contact support:

   • Share what went wrong
   • Describe what you expected
   • We can help debug the issue

Remember: Great design systems start with great input. Take time to prepare quality references, and you'll get better results.