Claude Design, and the playbook I needed to get it built 1:1

There was always one piece missing for me in building software: what design to pick or create, and what the product should finally look like when I'm the one responsible for the final design. I was never good at making good, high-quality designs, and I always needed someone else for it. Now AI covers that part for me, specifically Anthropic's product currently called Claude Design.

I started with it a few months ago, when I tried to work out what my home page should even look like. Then I started using it for my side projects, among them Milisto, a mobile app of mine that isn't public yet. Before that I had used the built-in design skill in Claude Code for it, but I felt I needed a wider look at the whole thing, so I tried a redesign toward more practical and modern mobile use. I was happy with the outcome, asked Claude Design for a handoff, got a package, and told Claude Code to implement the redesign view by view. I also made it an experiment: no extra details and no directing, just to see whether every view would be implemented the same way and how it would all turn out.

The experiment worked, because it turned out Claude skipped about 30% of the design. That also cut existing functionality, or rather hid it: the backend still had it, but the views no longer did. One example was an expandable toggle showing favourite products, the ones I as a user want to buy in a store and the ones I don't. It was in the new design, I liked it, and after implementation it wasn't there. That was around 03.06.2026, my first attempt at implementing a design 1:1.

The next one, around 10.06.2026, was a different project, my education CRM, where I wanted a design for a PWA. Two apps actually, one for parents and one for instructors. I went through the whole process in Claude Design and liked everything. This time, having learned that implementation loses details, I said to implement it exactly 1:1. No real data yet and no API, everything on fixtures, so I could first see it as an implemented project and connect real data as the next step. I also asked for one view only, so I wouldn't lose time on the whole thing in case it went wrong.

The result surprised me again. This time it was implemented literally 1:1. When I opened the URL where that view should be, I got the whole mockup: two pages side by side, the light and the dark version, each inside a phone frame with its status bar. A 1:1 implementation of the whole wireframe instead of its content.

That was my second lesson, and it left me with a strong question: if this is how it goes, it needs a procedure, something standardized that holds together. So I dug up my old Claude Design sessions and started asking in them how we could turn this into one thing, a single instruction. I started to see a bigger design of the whole flow. For a while it was just a file sitting in a folder, and on 13.07.2026 I put it together as a repo called Claude Design Playbook.

It holds two things that I think are the most needed in the whole process of making a design and implementing it, and that are enough for really good quality work. The first is the information for Claude Design: what it actually has to do, what data there is, how many views, and other details that are already implementation details. It comes from the agent that will implement the design and hasn't started yet, because it's waiting for it. That agent first goes through a cycle of collecting information: in my case often a task in the tracker, plus the database, the technology and whatever else matters, all gathered into one intake. In one message I point Claude Design to the playbook repo and attach the intake. From the repo Claude Design sets up its own CLAUDE.md, with instructions on how to work and which questions to ask on the design side until the whole page is practically ready, the way it should look.

The second is the handoff. Once the view is ready and I'm happy with the design, the playbook describes step by step what Claude Design has to do and which artifacts to prepare. At the end I get only the package. I download it, put it into the project, and point Claude Code at it. Unpacked, it has the designs, the fixtures and the instructions for how the implementation agent should build them. There is also a checklist that leads it by the hand. Quite often designing shows gaps the task didn't cover, so those go into the package too, in their own section, to make clear they were agreed with me and not assumed by Claude Design on its own. The coding agent then writes them back to the task. Otherwise design and task disagree, there's a conflict over which one is true, and more rounds of clarifying follow. Here it's already written down in the handoff.

The coding side is meant for any agent. I haven't run a handoff with Codex end to end, but I asked Codex whether it understood the package and could pick up the work without gaps, and it said it could. The playbook has been through several good refinements by now, so I decided to make it a public repo. If you want to try it, go ahead, and any feedback is very welcome.

I have 7 projects in Claude Design so far. 3 are fully on the playbook and 2-3 partly, meaning early phases of it or just the light directing that later became part of it. The rest either didn't use it at all or were the seed for the workflow. Do I use it every time I want to change something? Not at all. I use it mostly when a new feature is needed or some part needs rearranging. In my sessions I call Claude Design "Designer", and when I say Designer and point to a specific project or repo, local sessions know it means Claude Design in the browser.

That distinction matters now, because Anthropic gave Claude Code its own design integration. It makes designs as artifacts, not in the Claude Design you use in the browser. There is also a connector to Claude Design, but it only syncs a component library with a design-system project there, and I haven't used it. The result is similar: you get a link to the artifact, open it in the browser, look at it, refine it, and keep working with the same agent in Claude Code. But it is a somewhat different system. Personally, I work better with Claude Design in the browser. I haven't done more tests with the built-in one, so I can't say much about the quality of its work. If you've used it, I'd like to hear how it went.