Skip to content
Design Mode
Add to Chrome

Design Mode is also available for Firefox and Safari.

Illustrative walkthrough: redesigning a Tailwind landing page with Claude Code

An illustrative workflow for previewing Tailwind page changes, asking Claude Code to map them into source, and reviewing the result. Not a measured case study.

This illustrative walkthrough shows how to specify a change on a rendered Tailwind page. It is not a report of a completed project or a timing benchmark. Design Mode records the desired browser result; Claude Code needs separate repository access to implement it.

Setup

Open the landing page on localhost or staging. Open the Design Mode side panel. Follow the current MCP setup guide to configure Claude Code for the mode you choose. Confirm the MCP status chip is connected.

Hero

Start with the headline. Adjust the type size visually until it feels right — drag the slider, see the rendered size, settle. Pick the colour with the colour picker; the contrast indicator is a spot-check against an inferred background, not proof of AA contrast across a gradient. Verify text against the actual colours behind it, including responsive and interactive states.

Adjust hero padding using the visual spacing controls. Drop the hero image's `border-radius` from `1rem` to `0.75rem`. Every edit lands in the Changes tab.

Send to Claude Code

After Send to Agent marks the session ready, ask Claude Code to read the changes through MCP, find the JSX file and propose the utility-class update. Type sizes can map to a Tailwind step or arbitrary value; colours and spacing should be checked against the project's actual tokens and conventions.

Review the source diff and run project checks. Reopen the page without Design Mode overrides at desktop and mobile widths. Commit only after the implementation is accepted.

Sections

Repeat for another section only after checking the first implementation. Keep each request scoped and review effects on shared components. No elapsed-time result is claimed for this illustrative workflow.

The pattern

The browser specification is an input, not a guarantee of clean code. Ask the agent to inspect the project’s actual Tailwind configuration and token definitions, preserve matching utilities, flag unmatched values, and avoid unrelated changes. Review the diff rather than assuming it contains only utility-class edits.

Keep reading

Tune a Tailwind component

Map preview values to existing utilities and verify the source diff.

Turn visual edits into precise AI prompts

Make the change on the page. Give your coding agent the values, the context and the boundaries—not another request to make it look better.

Vibe coding: how visual editing fits into the AI-coding-agent workflow

Vibe coding is what happens when you describe a UI change to an AI agent and ship the result. Visual editing is what makes the loop tight.

Use the current MCP setup guide

Version-stamped Claude Code and Cursor configuration and verification.

Review the current feature surface

Layers, visual controls, Changes and the two hand-off methods.