Vibe coding with Claude Code

The problem

Claude Code is great at writing CSS once it knows exactly what you want. The bottleneck is conveying design intent. Screenshots are ambiguous. Mock files drift from the production page. "Make the hero pop more" is too vague.

The workflow

1. Step 1

   Open the live page in Chrome

   Browse to your dev server, your staging URL, or any deployed page. Open the Design Mode side panel.

2. Step 2

   Make the change visually

   Click the element. Drag handles to resize, pick colours, adjust spacing, change typography. Every edit lands in the Changes tab as a structured diff.

3. Step 3

   Send to Claude Code over MCP

   With Claude Code's MCP config pointed at Design Mode (Cloud, Local, or Self-hosted), click Send to Agent. Claude reads the exact selectors and properties, then writes the production change in your repo.

4. Step 4

   Iterate

   If the result isn't quite right, tweak again in Design Mode and resend. Each round is a structured diff, not a screenshot.

The outcome

Claude Code gets ground truth instead of a guess. The result lands closer to intent on the first try, and the iteration loop is measured in seconds, not minutes.