title: "Visual Development" description: "Screenshot-to-code, visual debugging, and using Cursor's built-in browser to verify UI." section: "Full Guide" readTime: "10 min"

Visual Development

Cursor can read screenshots, match UI visually, and check its own work in a built-in 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:

Open the Agent panel (Cmd/Ctrl+I) and drag the image in, or paste it with Cmd/Ctrl+V
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.
Follow the project rules and existing components.

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
Attach both to the Agent chat:

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.

Browser Workflow

Cursor has a built-in browser that Agent controls through tools. It opens as a pane inside Cursor or in a separate window.

What the agent can do in it:

Navigate: visit URLs, follow links, go back, refresh
Click, double-click, right-click, hover, and type into forms
Scroll to reveal content
Read console errors, logs, and warnings
Inspect network requests and responses (currently only in the Agent panel)
Take screenshots and see them as images to verify layout and visuals

Workflow:

Start your dev server
Ask the agent to open the page, compare it to your design screenshot, and adjust spacing, colors, and typography
The agent edits the code, reloads, screenshots, and iterates
You review the diff

Open http://localhost:3000/pricing in the browser.
Compare it to the attached target.png and fix spacing, colors, and typography.
Check the console for errors, and screenshot the result when done.

Browser tools require approval by default (manual, allowlisted, or auto-run), and @Browser attaches browser context to a chat.

Best for:

Fine-tuning padding, margins, and typography against a reference
Catching console and network errors while testing a flow
Responsive checks

Not for:

Logic changes you can't verify visually
Accessibility fixes (verify those with real tooling and in code)

Reverse Engineering Existing UIs

Study and recreate components from production apps.

Step 1 — Capture:

Attached: 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 the first pass, screenshot the result (or let the agent do it in the browser) and send it back:

Attached: result.png (current) and target.png (goal)
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.