Design Mode is also available for Firefox and Safari.

Workflows for visual editing and agent hand-off

Start with the shared loop: make the intended change on the rendered interface, capture the exact specification, then ask a coding agent or developer to update and verify the source. The examples below apply that loop to specific jobs.

Vibe coders & AI-coding-agent users

Vibe coding with Claude Code

Design Mode is a browser extension for Chrome, Firefox and Safari that edits the rendered page.

Read the workflow Cursor users

Visual editing with Cursor

Cursor's built-in design mode lives inside the editor.

Read the workflow Designers

Redesign any website

Most design tools want you to start in a file.

Read the workflow Designers & design ops

Design review in production

Design reviews on staging always end the same way: a Loom recording, a Notion doc full of screenshots, and engineering scrambling to interpret ambiguous arrows.

Read the workflow Frontend developers

Tailwind component tuning

Tailwind makes building UI fast and tuning it slow — once you have utility classes, you're guessing at numeric increments.

Read the workflow Solo makers & small teams

Figma-to-code without Figma

Figma is a great file format.

Read the workflow QA / UI testers

UI testing — export visual bugs to developers with full context

Visual bugs are the worst category of bug to report and the worst to receive.

Read the workflow Designers & PMs

Bug reports with a visual diff

PMs and designers file most of the visual bugs.

Read the workflow Content & marketing teams

Copy edits without a PR

Marketing teams ship copy changes all day.

Read the workflow Accessibility & design

Accessibility quick fixes

Most accessibility issues are visual — contrast ratios, small type, missing focus states, low-touch targets.

Read the workflow Indie hackers & solo founders

Landing-page iteration for indie hackers

If you're a solo founder, the landing page is your conversion funnel and your weekend project.

Read the workflow Agencies

Client handoff: agency to engineering

Agency design reviews often happen on the client's staging URL with three people on a call.

Read the workflow Design-system maintainers

Design-system audit on a deployed app

Design systems decay.

Read the workflow