Visual design·Updated January 3, 2026

Extract Design System from Screenshot

Analyze a screenshot and extract a comprehensive design system including colors, typography, spacing, and components.

Use Case

Extracting design systems from existing interfaces, reverse-engineering UI designs, or creating design system documentation from screenshots.

Prompt

Analyze the provided screenshot and extract a comprehensive design system. Include:

1. Color Palette
   - Primary colors (with hex codes)
   - Secondary colors
   - Background colors
   - Text colors
   - Accent colors
   - Color usage patterns

2. Typography
   - Font families used
   - Font sizes and scale
   - Font weights
   - Line heights
   - Letter spacing
   - Text styles (headings, body, captions)

3. Spacing System
   - Base unit (if discernible)
   - Spacing scale (padding, margins)
   - Grid system
   - Layout patterns

4. Component Library
   - Buttons (styles, sizes, states)
   - Input fields
   - Cards/containers
   - Navigation elements
   - Icons and iconography
   - Form elements

5. Visual Patterns
   - Border radius values
   - Shadow/elevation styles
   - Border styles
   - Hover states
   - Interactive elements

6. Layout Principles
   - Grid structure
   - Alignment patterns
   - Responsive breakpoints (if visible)
   - Content hierarchy

7. Design Tokens
   - Organize all values as design tokens
   - Suggest naming conventions
   - Group by category

Format the output as a structured design system document ready for implementation. Include specific values, measurements, and visual descriptions where possible.

How to use

1Take or find screenshots: Capture clear screenshots of the UI you want to reverse-engineer. Include multiple screens showing different components (buttons, forms, cards, navigation)
2If using AI tools with vision: Upload the screenshots directly and paste the prompt. The AI will analyze the images and extract the design system
3If using text-only AI: Take high-quality screenshots, describe what you see, and paste both the description and prompt. Example: "I have a screenshot of a dashboard. Here's what I see: blue primary button (#007AFF), Inter font..."
4Copy the prompt and specify the screenshot: Say "Here are screenshots of [product/app name]. Analyze them and extract the design system." Then paste the prompt
5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably one with image analysis if you're uploading screenshots)
6Review the extracted design system: The AI will identify colors (with hex codes), typography, spacing, and component patterns
7Validate the extraction: Check a few values manually (like primary color hex code) to verify accuracy
8Use the extracted design system: Convert it to design tokens, use with other prompts, or add it to your design system documentation

Pro Tips

• Screenshot quality matters: Clear, full-resolution screenshots work best. Crop out browser chrome or OS UI
• Include multiple screenshots: Show different components (buttons, forms, cards) for more complete extraction
• Specify what to focus on: "Extract the color palette and typography from this screenshot" helps AI focus on important elements
• The extracted design system can be converted to code using the "Design System to AI Prompt Converter" prompt
• Use for competitive analysis: Extract design systems from competitor products to understand their patterns