Hey, it's Cindy 🌱 With Claude Design you describe what you want, it builds a working prototype you can click through, then hands the whole thing to Claude Code to build for real.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
the tool
What Claude Design actually is
Claude Design is an Anthropic Labs product that lets you collaborate with Claude to make polished visual work: designs, interactive prototypes, slides, and one-pagers. It is powered by Claude Opus 4.7 and is available in research preview for Claude Pro, Max, Team, and Enterprise plans, so there is no separate purchase, it draws from your existing subscription usage.
🌐 Open it. Go to claude.ai/design on the web, or open it from the Claude desktop sidebar. Create a new project.
✍️ Feed it your idea. Type what you want, upload a screenshot or reference image, point it at an existing site with the web capture tool, or point it at your codebase. Any mix works.
🖥️ Watch it build a prototype. Claude renders a working, clickable prototype on a canvas, not a static mockup. You can share it to gather feedback and user-test with no code review or pull requests.
💬 Refine in plain language. Adjust through chat, inline comments, or by editing directly on the canvas until it feels right.
📦 Hand it to Claude Code. When the design is ready to build, Claude packages everything into a handoff bundle you pass to Claude Code with a single instruction, and it builds the real interface, continuing from your design instead of starting from scratch.
copy these
The exact prompts to copy
Paste these straight into Claude Design. Swap in your own idea.
1 · the first prototype
Build me a clickable prototype for a landing page for [your product in one line].
Audience: [who it is for]. Goal: [one action you want them to take].
Include a hero with a headline and CTA, a 3-feature section, a testimonial block, and a footer. Make it feel [warm and friendly / clean and premium / bold and playful]. Show it as an interactive prototype I can click through.
Point it at a site you already have:
2 · redesign what you have
Capture my existing site at [your URL] and redesign the homepage so it looks more [modern / trustworthy / conversion-focused], keeping my brand colours and fonts. Give me a clickable prototype.
Hand off to build:
3 · hand off to build
This design is final. Package it into a handoff bundle for Claude Code and build it as a real, responsive web page.
the trick
The on-brand trick most people miss
Claude Design can learn your brand once and reuse it on every project after. During setup it builds a design system by reading your codebase and design files, so your colours, typography, and components are already in place next time. You can import a system from a GitHub repo, design files, or a local codebase with the /design-sync command. That is why your prototypes stop looking like generic templates. Source: Get started with Claude Design.
go further
3 bonus prompts to run next
🧭 Turn a screenshot into a rebuild: "Here is a screenshot of an app I like. Rebuild this screen as an interactive prototype, but adapt the copy and colours for [my product]."
📱 Get a mobile version instantly: "Take the prototype we just made and give me a mobile version, then show both side by side."
🧑💻 Round-trip from the terminal: Inside Claude Code, type the /design command to create, edit, and sync a design without leaving your coding workflow, then build straight from it.
pick your level
How to get the most out of it
If you are new start with one screen, not a whole app. Describe the audience and the single action you want, then refine one thing at a time in chat. You will get a shippable page far faster than fighting a design tool.
If you are further along run /design-sync on your real repo first so every prototype inherits your live design system, then use the handoff bundle so Claude Code builds on your existing components instead of inventing new ones. This keeps the code review small.
the honest bit
Honest heads-up
It is in research preview, so expect rough edges and changes. It shares your normal subscription usage limits (with an option to enable extra usage beyond them), so a heavy design session eats into the same pool as your chats. Source: Anthropic, Introducing Claude Design. And a prototype is a starting point: always review the handed-off code before you ship it to real users.
the waitlist is now open
AI System Club is launching soon
Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.
btw this list gets first dibs the moment doors open :)