Add to ChromeVibe coding is a meme that turned into a real practice. The idea: you describe a UI change to an AI coding agent in plain English, the agent writes the code, you ship. Coined by Andrej Karpathy in early 2025; widely adopted by indie hackers, design engineers, and anyone tired of writing CSS by hand.
The catch is that vibe coding only feels good when the agent gets your intent right on the first try. Otherwise you spend the same time you would have writing CSS — except now you're prompt-engineering instead of coding. That's a worse trade.
The intent gap
AI coding agents are great at writing CSS once they know what you want. The bottleneck is conveying what you want. Three options today:
1. Screenshots. Lossy. Ambiguous about which property changed. Doesn't work for hover states, animations, or pixel-level work.
2. Figma mockups. High-fidelity, but maintaining a Figma file that matches production is its own job. Indie hackers don't have time.
3. Prose descriptions. "Make the hero pop more." "Tighten the spacing." Imprecise, slow, error-prone.
Visual editing on the live page is a fourth option: tweak the real rendered surface, capture a structured diff, hand it to the agent.
What the loop looks like
Open the page you're iterating on in Chrome. Open Design Mode's side panel. Make the change visually — drag a handle, pick a colour, adjust spacing. Every edit lands in the Changes tab as a structured row: selector, property, before, after.
Send to Agent. Claude Code / Cursor / Windsurf / Cline reads the diff via MCP, finds the source file, and writes the production change. You review, you ship.
The loop is fast because the spec is exact. The agent isn't guessing what "more breathing room" means; it has a literal `padding-block: 24px` to write.
Where it doesn't work
Greenfield UI from scratch — Design Mode needs a page to edit. For brand-new components, Figma + AI generators are still better.
Pure logic changes — Design Mode is for visual surface. "Fix this race condition" is a job for the agent alone.
Anywhere your design system mandates specific tokens and the agent can't infer them — pair Design Mode with a CONTRIBUTING.md that names the token system, and Claude Code will reach for the right utility classes.