Screenshot Analysis

Upload screenshots, mockups, or design images for the AI to analyze and recreate as working code. A quick way to turn inspiration into reality.

How It Works

When you upload an image, the AI:

1. Analyzes the visual layout and structure
2. Identifies components like buttons, cards, navigation
3. Detects colors, fonts, and spacing
4. Generates equivalent code in your chosen framework

Uploading Images

Upload images by:

• Drag and drop - Drop images directly into the chat
• Paste - Paste from clipboard (Ctrl/Cmd + V)
• File picker - Click the attachment button

What Makes a Good Screenshot

• High resolution - Clear, readable images work best
• Full components - Capture entire sections, not partial views
• Clean captures - Hide browser chrome and system UI
• Single focus - One section or page per image

Types of Images You Can Use

Website Screenshots

Capture websites you like and ask the AI to recreate the style or layout.

Design Mockups

Upload wireframes, Figma exports, or sketch mockups for conversion.

Hand-drawn Sketches

Even rough sketches can be converted - the AI understands layout intent.

Inspiration Images

Share design inspiration and ask for similar styling.

Combining with Prompts

Get better results by combining images with text:

• "Make the layout like this image, but with a dark theme"
• "Use this design but replace the content with..."
• "I like the hero section in this image, create something similar"
• "Keep the structure but make it more minimal"

Limitations

Screenshot analysis works best for:

• Static layouts and designs
• Common UI patterns
• Clear, high-quality images

It may have difficulty with:

• Complex animations (describe them in text)
• Very unique or artistic layouts
• Low-quality or blurry images
• Handwritten text

Next Steps

• Figma Import - Import from Figma directly
• File Uploads - More about uploading files