Vibe coding with Claude Code

The problem

Claude Code is strong 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 a scriptable page in your browser

   Browse to your dev server, staging URL, or a production page the extension can script. Browser-protected surfaces are out of scope. 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 connected through Cloud, Local, or Self-hosted MCP, click Send to Agent to mark the session ready. Ask Claude Code to read the selectors and properties, implement only that scoped change in the repository it already has access to, and show you the diff. Setup lives on /mcp.

4. Step 4

   Review the repository change

   Inspect the source diff, then reload without Design Mode overrides. The browser preview is not evidence that production source already matches. Tweak in Design Mode and resend if needed.

The outcome

Claude Code receives selectors and values instead of a screenshot guess. You still review the implementation in the repository; a closer first pass is not a timed guarantee.