Two Claudes must talk: on harnessing Claude Design
Claude Design is a designer that knows code. It only closes the designer-engineer gap if you wire it to the agent that already knows your codebase.
Anthropic launched Claude Design last week. Another Figma killer, supposedly. Since then, fancy design demos have been on display across landing pages with animated backgrounds. A landing page is called “landing” because it’s meant to be catchy, which makes it the easiest thing to showcase with a design tool.
But a lot of people, including me, observed that landing pages have been largely solved since Sonnet 4.5. Claude Code with proper assets. Google Stitch. v0. In that sense, Claude Design wasn’t anything groundbreaking.
I’ve been building consumer-facing products for 5+ years. As a product engineer, I’ve worked with many designers intimately, jamming ideas, describing visuals, iterating on UX, building design systems with them. They are generally more pleasant to talk to than PMs.
The biggest gap was always that none of them knew engineering well. And even the ones with some engineering background didn’t know how well a certain feature they had in mind could be done in our codebase, or in any code at all. Whenever they asked me whether something was technically possible, I answered yes 100% of the time. If you cook a beautiful design, I will turn it into a real feature.
I’ve always appreciated designers and PMs who ask that question, because they’re trying to harmonize with technical reality instead of forcing a vision down the throats of engineers. Great product is shaped by engineering constraints as much as by the grand vision itself.
Claude Design closes that gap. It’s a designer that knows code, which means we should hold it to the standard of serious product UX, not just landing pages.
But I’d been using both Claude Code and Claude Design, and they don’t talk to each other. Claude Code knows my codebase, my models, endpoints, design tokens, but it can’t touch the design tool. Claude Design has the eye, but no idea what my app does. The agent that already knows my repo should be the one writing design prompts.
So I built a tool layer that lets my Claude Code drive Claude Design with full context about the codebase.
MCP + skill that lets Claude Code drive Claude Design with full codebase context. Attaches to a real Chrome over CDP — no headless, no scraping.
The solution took three days. The skill took three rewrites. If you want to try it out, follow the README and leave a star. Otherwise, read on.
Wall 1: no API
claude.ai/design doesn’t ship a public API. The handoff-bundle export has a download endpoint, but there’s no REST surface for creating a project, sending a prompt, or reading a file. The only way in is the browser.
Wall 2: Cloudflare + Google SSO
A headless browser hits Cloudflare’s bot challenge, then bounces off Google’s SSO. I tried and gave up within a day. You need a real logged-in session.
So I attach to an already-authenticated Chrome over CDP. Chrome has had --remote-debugging-port forever. Once that port is open, any tool speaking CDP can drive the browser: clicks, evals, screenshots, anything.
Two wrinkles.
Chrome 136+ blocks --remote-debugging-port on the default profile for security. So I use a dedicated profile at ~/.chrome-designer-profile/. One-time login, persists across launches.
CDP-driven navigation triggers stricter Cloudflare scrutiny than regular browsing. User-agent string matters; --remote-debugging-port alone doesn’t set navigator.webdriver (only --enable-automation does). So login is a real human typing into a real Chrome window, and Cloudflare and OAuth see a normal session.
I used agent-browser as the CDP driver. It’s a CLI. Each of my tools shells out to agent-browser <verb> and returns. Playwright would also work (same CDP underneath), but a library with long-lived browser/context/page handles felt like a mismatch for the architecture I wanted.
The bugs
Every bug taught me something about claude.ai/design.
React-controlled inputs. agent-browser fill sets .value and fires a synthetic event that React doesn’t honor. Send button stayed disabled. Textarea had the text but Claude never received it. The fix is the well-documented React compatibility pattern: use the native HTMLTextAreaElement.prototype.value setter, dispatch new Event('input', { bubbles: true }), then JS-click Send.
Export moved. Mid-development, Claude reorganized the UI and the Export menu moved under a new Share dropdown. My handoff broke. I fixed it to click Share first, fall back to Export. Then I sat down and enumerated every DOM anchor the MCP depends on. designer health now probes 17 of them. When claude.ai ships the next UI shuffle, the probe screams before a user does. (TODO: set up a periodic health check.)
Em-dash filenames. Claude’s handoff pipeline sometimes writes an em-dash in index.html hrefs but saves files with a regular hyphen. Bundles looked broken out of the box. designer_handoff detects unresolved hrefs and renames the files. No-op when upstream is fine.
The skill
The MCP is the plumbing. The skill, designer-loop, is where the actual philosophy lives, and it changed a few times.
First version: the agent proposed variants to the human. It felt collaborative, but it framed the direction before Claude Design ever had a chance.
Second version: the agent interviewed the human about aesthetic direction. Same problem from a different angle. We were overriding Claude Design before it spoke.
Third version (current): capabilities drive design. The agent surveys the codebase — what entities live in it, what operations the user does to them, what states they pass through — and feeds that context into every prompt verbatim. The human says how it should feel. The codebase says what it does. Aesthetics belong to Claude Design and the human.
Writing the rules in prose surfaced what I actually wanted Claude Code to do in this loop: carry the codebase into the room where design happens, and carry the design back into the room where code gets written.
The takeaways
CDP is underrated. The whole bot-detection gauntlet goes away when you use a real browser you already trust. No scraping hacks, no headless fight.
Writing the skill changed what the tool is. The rewrites forced me to articulate what Claude Code should and shouldn’t do in the loop. The tool got smaller because the skill carried more.
Now the two Claudes talk. Most of my time went into the skill, not the verbs. The MCP is just the way in.
Source: github.com/pro-vi/designer • npm: @pro-vi/designer