Hands-on: redesigning a Tailwind landing page with Claude Code

Tailwind landing pages all start to look the same — same hero, same three-column features, same testimonial section. Refining one to actually feel custom is hours of class-tweaking. This is a walkthrough of doing it in roughly an hour using Design Mode + Claude Code.

Open the landing page on localhost or staging. Open the Design Mode side panel. Wire Claude Code's MCP config to Design Mode's Cloud mode (paste from /mcp). Confirm the MCP status chip is connected.

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 WCAG contrast indicator confirms it passes AA on the gradient background.

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.

Hit Send to Agent. Claude Code reads the diff via MCP, finds the JSX file, and rewrites the utility classes. Type sizes become the nearest Tailwind step (`text-5xl` or a custom value via arbitrary), colours map to your design tokens if `tailwind.config.ts` lists them, spacing snaps to the nearest `space-y-*` or `gap-*`.

Review the diff in Claude Code's chat. Accept. Commit.

Repeat for the features section, the testimonial section, the CTA. Each section is a 5-minute loop. Total elapsed: about 45 minutes for a meaningful redesign across five sections.

Visual control of a utility-class UI without leaving the rendered page. Your design tokens are respected (Claude Code reads `tailwind.config.ts`). The git diff is clean — utility class changes only, no inline styles. The loop fits in your existing branch.