Claude Code Guide
All designer guidesবাংলায় পড়ুন

For Designers

Get Started with Claude Design

Claude Design is Anthropic's text-to-prototype tool. Describe a screen and get a working interactive prototype back. How to prompt it well.

15 minbeginner
get-started-with-claude-designThe situation

You have tried Claude Design. Every prototype came back looking like a generic SaaS dashboard with a blue header and a grid of cards. You know the tool can do better but your prompts are not working.

You'll learn the prompt pattern that produces specific, context-aware output and how to iterate on one thing at a time without losing what was already working.

Follow along:

You need: The Claude desktop app for Mac or Windows. It can read a folder of your files.

What you walk away with

01

The prompt structure that produces specific, context-aware prototypes instead of generic templates

02

How to iterate on one change at a time without triggering a full rewrite

03

A live prototype URL and a written component spec ready to hand to a developer

step 01

Write a brief that specifies context, not just appearance

The most common mistake with Claude Design is describing how the screen should look instead of what it needs to do. A prompt that says "clean, modern, minimal" produces every other SaaS dashboard. A prompt that specifies audience, flow, and constraints produces something useful.

Prompt
Design a mobile onboarding screen for a savings app. Target: first-time smartphone users in Bangladesh. Show a progress bar at the top (step 1 of 3), a friendly illustration placeholder, a headline ("Save a little every day"), a subtext line, and a large primary CTA button.

what you should see

step 02

Iterate on one thing at a time

Claude Design generates working code, which means you can iterate on it. Ask for one change at a time: adjust the layout, swap the color, add a state. Asking for five changes at once produces a rewrite that drifts from what was working.

Prompt
The illustration is too large on small screens. Replace it with an icon (piggy bank or similar). Keep the progress bar and reduce overall padding so the CTA button is always above the fold on a 5-inch screen.

what you should see

step 03

Export the prototype and hand it off

Once the prototype does what you need, export the generated code or copy it directly. You can paste it into a Claude Code session for further development, share the live URL for stakeholder review, or use the code as a written component specification (reference spec) for the development team.

Prompt
Generate a written spec for the developer. Include: component list, exact copy for each text element, color tokens used (use my working agreement for the token names), and the mobile breakpoint assumptions.

what you should see

step 04

Common mistakes

Four failure modes when using Claude Design.

  1. Describing appearance instead of purpose. "Clean and modern with a blue header" gives Claude aesthetic direction but no functional constraints. Describe who uses it, what they are trying to do, and what constraints they are under. The aesthetic follows from that.
  2. Iterating in batches. Asking for five changes at once produces a rewrite. Each change you request touches different parts of the prototype. One at a time keeps each iteration reviewable and reversible.
  3. Treating the prototype as final. Claude Design prototypes are fast to generate and fast to throw away. They are for testing an idea, not shipping a product. Before the code goes to a developer, it needs a cleanup pass: proper types, real API calls, accessibility attributes.
  4. Not exporting the spec. A live prototype URL works for demos but not as a handoff document. The written component specification (reference spec) is what a developer can build from without needing to open the prototype. Generate it before closing the session.

What's next?

Synthesize user research with Claude

New guides, when they ship

One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.

Or read Product Field Notes, the Substack