title: "Visual Development" description: "Screenshot-to-code, visual debugging, and Cursor's Visual Editor for real-time UI editing." section: "Full Guide" readTime: "10 min"

Visual Development

Cursor can see screenshots, match UI visually, and edit styles in a live browser — no manual pixel hunting.

Screenshot-to-Code

Upload a screenshot (design mockup, Figma export, or screenshot of another UI) and Cursor recreates it.

How to use:

Drag the image into Cursor Composer (Cmd+I)
Use this prompt template:

Implement this UI component using:
- Framework: React + TypeScript
- Styling: Tailwind CSS

Match the design precisely:
- Layout and spacing
- Typography hierarchy (use font-semibold/font-bold per heading level)
- Color scheme (use CSS variables matching our design system)
- Interactive states: hover, active, disabled, loading

Components needed (based on image):
- [describe what you see]

Responsive:
- Mobile: stack vertically, larger touch targets
- Tablet: 2 columns
- Desktop: match screenshot layout exactly

Generate component + story + tests.
Use @instructions.md for project patterns.

What works well:

Dashboard widgets, cards, forms
Navigation components
Data tables

What needs post-edit:

Exact fonts (describe explicitly or upload font sample)
Brand-specific colors (include hex values in prompt)
Complex animations

Comparative Visual Debugging

Fix visual regressions by showing the expected vs actual screenshot side-by-side.

Workflow:

Take screenshot of expected UI (Figma, staging, reference app)
Take screenshot of actual broken UI
Upload both to Composer:

Left image: expected result
Right image: current broken state

Diagnose and fix the visual regression:

1. Identify all differences:
   - Layout shifts
   - Spacing mismatches (note pixels if visible)
   - Color differences
   - Missing elements

2. Root cause analysis:
   - A/B compare CSS changes
   - Check responsive breakpoint regressions
   - Verify CSS variable values

3. Fix:
   - Minimal change
   - No regressions on other breakpoints
   - No magic numbers — use design system variables

Run visual diff after fix and confirm resolved.

Visual Editor Workflow

Edit UI in the browser like DevTools, but changes write back to source code.

Access: Right-click any element in the browser preview → "Open in Cursor Visual Editor"

Workflow:

Open page in browser preview
Right-click element → Open in Visual Editor
Cursor shows a DevTools-style panel alongside your source file
Adjust: padding, margin, colors, font-size, flex layout
Each tweak immediately reflects in source code
Click "Apply" at any point — all changes written to file

Best for:

Fine-tuning padding/margins
Color palette adjustments
Typography spacing
Responsive breakpoint fixes

Not for:

Adding new elements (use Composer instead)
Logic changes
Accessibility fixes (do those in code directly)

Reverse Engineering Existing UIs

Study and recreate components from production apps.

Step 1 — Capture:

@screenshot-of-hero-section.png

Reverse engineer this hero section for our marketing site.

Deconstruct:
1. Layout structure (flexbox/grid)
2. Typography: fonts, sizes, weights
3. Animation: timing, easing, triggers
4. Color palette: exact hex values from image
5. Component breakdown: what sub-components are visible?

Output: annotated breakdown (no code yet)

Step 2 — Implement:

Using the breakdown above:
1. Build React component with Tailwind CSS
2. Match animations using Framer Motion
3. Responsive: preserve feel at 375px, 768px, 1440px
4. Accessibility: prefers-reduced-motion, alt text, ARIA labels
5. Tests: render, responsive behavior, animation interaction

Tips for Better Results

Describe what you see explicitly. Don't assume the agent reads the image perfectly:

The image shows:
- 3-column card grid with 24px gap
- Each card: white bg, 1px border #E5E7EB, 8px border-radius, 24px padding
- Card header: 16px font-semibold, followed by 14px gray text body
- Bottom: CTA button full-width, orange background

Include design tokens. If you have a token system, reference it:

Match the design using our tokens:
- Spacing: space-4 (16px), space-6 (24px)
- Colors: brand.orange.500, neutral.gray.200
- Radius: rounded-lg (8px), rounded-xl (12px)

Iterate visually. After first pass, screenshot the result and send it back:

@result.png vs @target.png
Still off on:
- Card padding is 16px but should be 24px
- Button is flat, should have subtle shadow (shadow-sm)
Fix these two issues only.