Add to Chrome
SafariBlog
Build notes from Design Mode and walkthroughs of real workflows — MCP architecture, vibe coding, Tailwind redesigns, changelog deep-dives.
Turn visual edits into precise AI prompts
Make the change on the page. Give your coding agent the values, the context and the boundaries—not another request to make it look better.
ReadDesign Mode 2.0.0 — now on Firefox, with alignment guides and a calmer color picker
The big one: Design Mode now runs on Firefox, from the same single build that already serves Chrome. Plus alignment guides while you drag, and a color picker that stops shouting at you.
ReadDesign Mode 1.9.0 — design tokens, trigger-first motion, and a dedicated MCP page
A token engine that understands design systems, Motion rebuilt around triggers instead of raw CSS properties, and MCP configuration moved out of Settings into its own page.
ReadIllustrative walkthrough: redesigning a Tailwind landing page with Claude Code
An illustrative workflow for previewing Tailwind page changes, asking Claude Code to map them into source, and reviewing the result. Not a measured case study.
ReadDesign Mode 1.5.0 — changelog deep-dive
Margin/padding overlay bands, a WCAG contrast checker in the colour picker, file-size hints in Media, and the static OG image migration.
ReadVibe coding: how visual editing fits into the AI-coding-agent workflow
Vibe coding is what happens when you describe a UI change to an AI agent and ship the result. Visual editing is what makes the loop tight.
ReadWhy we built an MCP server for design edits
Why a browser visual editor offers both a portable copied prompt and an optional MCP connection to coding clients.
Read