A Weekend in Claude Design Saves 3 Weeks of Claude Code

SubscribeSign in

A Weekend in Claude Design Saves 3 Weeks of Claude Code<br>Design and test the whole experience in Claude Design first, so Claude Code builds the right thing once. Includes the drop-in skill that makes it repeatable.

Ashwin Francis and Raghav Mehra<br>May 28, 2026<br>∙ Paid

13

Share

🧠 TLDR : Most builders waste weeks because they build first and figure out how the app should look and work later, then rebuild when it misses. Flip the order and start in Claude Design. Prototype the experience, validate it with your target user, refine the design based on user feedback, and hand your coding agent a finalized design it can build right the first time. This piece walks through the 4-step method, the viability rubric, and the master prompt plus 15-point PM iteration playbook that make it repeatable.

A practice I have adopted in my vibe coding journey over the past few weeks is to design first. I build a visual layout of the application, then make tweaks based on feedback from the people I show it to, or on my own gut feel for what would work, making those changes visually before committing any of it to code. Tools like Claude Design have made this process much easier. It is now the first step in my build, right after the idea and the solution are ironed out.<br>Prototypes are gold for the development lifecycle. They help you get a feel for the app before committing a budget or dev effort. They also reduce the questions that come up during the build, whether from a dev teammate or the AI agent.<br>This approach isn’t new. It is how the teams behind your favorite apps already build, the agile way: design and prototype the experience first, ship a small slice, gather feedback, then refine and go again. Design leads, code follows.<br>Vibe coding reversed that order. You write a prompt in plain English that explains how the app works and what it looks like, hand it to the coding agent, and a few minutes later, out pops your next claim to fame.<br>What I found in my building journey is different. The first version is rarely what I pictured. The gaps show up in the look, the user flows, the features, and how the app actually works.<br>The AI agent can’t read my mind. It doesn't know what the app should look like, or how I pictured it. The best thing would be a neural interface between me and Claude Code. The next best is a visual map of every screen in the final app. A prototype. The agent doesn’t need to read my mind, just build exactly what is presented as is.<br>With vibe coding, you start with text and tweak the visuals later. With Claude Design, you flip the order. Generate the screens first. Ask the coding agent to build exactly what it sees, something you’ve already vetted and are comfortable shipping.<br>👋 Hi, I’m Ashwin<br>In Cash & Cache, along with Raghav, I publish weekly on AI implementation & strategy, and every workflow we cover ships with a downloadable asset in the Library.<br>Browse the Library → Cash & Cache Library<br>Not sure where to start? Take the quiz<br>Most builders find out the app was wrong after the code is written. The prototype tax is real, and it compounds every time you iterate on something that should have been killed in Claude Design.

What’s inside

What you need to follow along

The 4-step approach

Decide if the project is worth building

The /prototype skill

The PM’s iteration playbook

Test and refine your prototype

The bridge: visual-first builds

Appendix: The full SKILL.md (drop-in install). Paste it into a new Claude Code chat, ask Claude to install it as a skill called /prototype, and you’re set.

What you need to follow along

A Claude subscription (Pro, Max, Team, or Enterprise). Claude Design and the /prototype skill both run on the same subscription. I suggest running this workflow using the Opus 4.7 model. Btw, Opus 4.8 launched as I was finishing this piece, and I haven't had time to test it yet.

Access to Claude Design. This is where the prototype lives. You’ll need it for Phases 1 to 3 of the /prototype skill, before you write a single line of code.

Claude Code installed on your machine (CLI or Desktop). The /prototype skill runs in either.

A one-paragraph idea. Yours, or a pretend one if you want to try the workflow before a real build.

5 to 20 testers (optional). Friends, colleagues, target users. Anyone who can click a prototype and answer 5 questions.

New to Claude Design? Start here first: A beginner-friendly guide to kick off your design journey 👇

Claude Design for Non-Designers: A Practical Guide to Going from Idea to Polished Visual<br>Raghav Mehra and Ashwin Francis<br>Apr 22

Read full story

A 4-step approach

Four steps to design an app that's been PM-checked and shaped by real user feedback.<br>Step 1: Answer 6 questions about your idea. Context, audience, core job, screens, brand, and output format, a few lines each. Those answers become the single prompt Claude Design builds from.<br>Step 2: Prototype it in Claude...