Add to Chrome
SafariVibe 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
Exact values can make a visual request easier to interpret, but the agent still needs codebase context and review. Three common ways to communicate intent:
1. Screenshots. Useful visual context, but a single frame does not specify an exact CSS property or every hover and motion state. Pair screenshots with values and state descriptions.
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 your browser. 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.
Use Send to Agent with a verified client such as Claude Code or Cursor. It can read the live session through MCP, find the source file through its separate repository access, and propose the production change for you to review.
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. Start with a prototype or another creation tool, then review the rendered result.
Pure logic changes — Design Mode is for visual surface. "Fix this race condition" is a job for the agent alone.
Where a design system mandates tokens, provide its reference and ask the agent to inspect the source definitions. Verify that the selected token resolves to the intended value; instructions do not guarantee the correct utility choice.