How to Actually Use Claude Design

Dariush — Thu, 30 Apr 2026 06:19:58 +0000

Anthropic just shipped Claude Design, a new Labs product that turns prompts into working designs, interactive prototypes, slide decks, and one-pagers. It's powered by Claude Opus 4.7 and - most interestingly for developers - hands off directly to Claude Code when you're ready to build.

This guide walks you through everything you need to actually use it: what it is, how to set it up, how to prompt it well, how to iterate, how to hand off to engineering, and what to avoid. By the end you'll be able to take a project from idea to shipped prototype without leaving the tool.

Claude Design in one minute

Before you start

Who can use it. Claude Design is in research preview and available on Pro, Max, Team, and Enterprise plans. On Enterprise it's default off, so if you don't see it, ask your admin to provision you.

What it's for. Reach for Claude Design when you need to produce interactive prototypes (working HTML/CSS with real states you can click through), marketing pages like landing pages and pricing sections, internal tools like admin dashboards or review queues, presentations and one-pagers, and app flows like onboarding or multi-step forms.

What it isn't for. Don't reach for it when you need pixel-perfect finishing work on an existing Figma file, or when you're doing brand-identity work like logos, illustrations, or photography. For polish and finishing, export to Canva and continue there.

Set expectations for the output. The first generation is a starting point, never a finished artifact. The real value shows up in the second, third, and fourth rounds of iteration. Plan for that - don't judge the tool by its first response.

Getting set up

Open a project. Go to claude.ai/design and create a new project. The interface splits into two panes: chat on the left, canvas on the right. Everything else builds on that structure.

Feed it context before you prompt. This is the step most people skip, and it's the one that determines whether your output looks generic or looks like your product. Before you write your first prompt, attach whatever context is relevant.

Upload screenshots of existing designs, competitor products, or visual inspiration - useful for "make it look like this" requests. Attach an existing slide deck or document whose style you want Claude to match. Link a code repository directly, and Claude will read your components, tokens, and styling patterns, which makes the output dramatically closer to production-ready.

If your team has already set up a design system in Claude Design, it gets inherited automatically - your brand colors, fonts, and *components *are already in place with no configuration. Check with your design lead or admin if you're not sure.

Link a subdirectory, not your whole monorepo. If you're working in a large codebase, don't link the root. Link the specific subdirectory relevant to the UI you're building, like apps/marketing or packages/design-system. Large repos cause lag and occasional browser issues.

Writing a first prompt that works

A weak prompt gets a generic result. A good prompt hits four things: the goal (what you're building), the layout (how it should be arranged), the content (what information goes on it), and the audience (who uses it).

Here's a weak prompt:

"Make me a landing page for our new API."

And here's a strong one:

"Build a landing page for our new Payments API aimed at backend developers. Include a hero with a one-line tagline and a curl code snippet, three feature cards with icons, an interactive API playground mock, pricing tiers, and a footer. Match the style of our existing marketing site."**

You'll feel the difference immediately. Claude will also ask clarifying questions if it needs more information, so you don't have to front-load everything - but the more specific you are upfront, the fewer iterations you'll burn later.

A few templates that tend to work as starting points:

"Create a dashboard showing [metric] with filters for [dimension] and [dimension]."
"Design a mobile app onboarding flow with [N] screens that walks users through [features]."
"Build a landing page for [product] with a hero section, [sections], and pricing."
"Create a form for [purpose] with conditional questions based on [category]."**
"Design an internal tool for [team] to [action]."

Iterating: chat vs. inline comments

Claude Design gives you two ways to request changes. Knowing which to use when is the biggest productivity gain you'll get after prompting well.

Use chat for broad changes. Anything structural, aesthetic, or conceptual goes in the chat - things like "make the color scheme darker and more minimal," "rearrange the dashboard so metrics are in the top row and the chart is below," "**add a settings panel on the right side," or "**show me two or three alternative layouts for this page."

Chat is also where you ask Claude to explain its design decisions, suggest improvements, or review the design for accessibility. Treat it as a design collaborator, not just a generator.

Use inline comments for targeted changes. Click directly on an element on the canvas and pin a comment to it. This is much faster than describing the location in chat. Good inline comments look like "make this button padding larger," "change this to a dropdown instead of radio buttons," "use the primary brand color here," or "make this section collapsible."

The rule of thumb. Comments for component-level changes. Chat for structural or aesthetic changes. If you're describing which element you mean in chat, you should be using a comment instead. If you're restructuring the layout, you should be using chat.

If comments go missing. There's a known bug where inline comments occasionally disappear before Claude reads them. If a comment isn't being picked up, paste the exact text into the chat instead.

Using adjustment knobs

Beyond chat and comments, there are live controls for spacing, color, and layout that you can tweak without prompting. Use these when you want to try several values quickly - sliding padding from 8px to 16px to 24px to see which feels right - and then ask Claude to apply your final choice across the full design. This saves you from burning prompts on "try 12px... now try 16px... now 20px."

Exploring variations without losing your work

If you're unsure about a direction, don't commit - ask for alternatives:

"Show me 2--3 alternative layouts for the hero section."

If you want to try a completely different direction without abandoning your current one, tell Claude:

"Save what we have and try a completely different approach."

Claude will save the current project and confirm where it's saved, so you can reference earlier iterations later in the conversation. This is the closest thing to version control the tool has today, so use it intentionally.

Getting better output: field-tested tips

A few habits that separate a frustrating session from a productive one.

Start simple, then layer in complexity. Core layout and content first. Then interactions. Then edge cases. Then polish. Incremental requests produce better results than a single giant prompt.

Be specific in feedback. "This doesn't look right" is hard to act on. "Tighten the spacing between form fields to 8px" gives Claude exactly what it needs.

Reference your design system by name. "Use the Primary Button component" or "Apply the Card layout pattern" will get you a much closer match than "make this look on-brand."

Mention responsiveness upfront. Say whether the design needs to work on mobile, tablet, and desktop - or just one of those. Retrofitting responsiveness later is painful.

Ask Claude to review its own work. Claude can audit for accessibility, contrast ratios, information hierarchy, and general usability. It's an underused feature.

Exporting and sharing

When the design is ready, click Export in the upper right. You have several options.

PDF works for stakeholder review. PPTX is good for slide decks. Standalone HTML is the format to use when you want to host the interactive prototype somewhere yourself. .zip gives you the raw assets. Send to Canva opens the design as a fully editable Canva file, via an official integration with Canva - this is the right move when you want to hand off to a designer for polish. An internal URL is shareable within your organization with view, comment, or edit permissions. And Handoff to Claude Code sends the design to your local coding agent or to Claude Code Web.

A quick way to choose the format: if you need stakeholder feedback, use an internal URL with comment access. If you're presenting in a meeting, export to PPTX or PDF. If you want a live interactive prototype someone can click through, use standalone HTML. If you want a designer to polish it, send to Canva. If you want to ship it as a real feature, hand off to Claude Code.

Handing off to Claude Code

This is the feature that makes Claude Design genuinely different from every other AI design tool. When you're ready to build, Claude packages the design into a handoff bundle - design intent, component structure, and styling context all included - and sends it to Claude Code with a single instruction.

You have two options: send it to the local coding agent, which picks up Claude Code on your machine against your actual repository, or send it to Claude Code Web, which runs in the cloud.

The coding agent isn't reverse-engineering a screenshot. It's implementing a design it has structured metadata about. The practical effect: you can go from "I should probably build this" to a working feature branch in an afternoon, without a traditional design-to-dev handoff ever happening.

Collaboration

Projects have three permission levels for sharing within your organization. View is read-only. Comment lets viewers leave comments but not modify the design. Edit lets colleagues modify the design and chat with Claude together in a group conversation.

The group conversation piece is the interesting one - multiple humans prompting Claude simultaneously on the same canvas. Collaboration is still basic, not yet fully real-time multiplayer, but the foundation is there.

Pricing and limits

Claude Design is priced and metered independently from the rest of Claude. It has its own weekly allowances that reset every seven days, sitting alongside (not inside) your existing chat or Claude Code limits. Allowances are per-user, not pooled across your organization.

On individual plans, Pro is aimed at quick explorations and one-off use. Max 5x is for semi-regular use - PMs and engineers producing regular mockups. Max 20x is for power users: designers and creatives living in the tool.

On Team plans, each provisioned user gets a weekly allowance; Standard seats are sized for quick explorations, Premium seats for power users. Admins can purchase extra usage for anyone who needs more capacity.

On Enterprise, there are two billing models. Legacy seat-based works like Team - Standard and Premium seats, each with recurring weekly allowances. Usage-based Enterprise bills at standard API rates under your existing agreement, with a one-time credit covering roughly 20 prompts per user that expires on July 17.

One thing to flag for ops and compliance: Claude Design is a Labs release and does not yet support audit logs or detailed usage tracking. If that's a blocker for your org, plan accordingly.

Known issues and workarounds

The rough edges Anthropic acknowledges today, with fixes.

If inline comments occasionally disappear before Claude reads them, paste the comment text into the chat. If you hit save errors in compact layout view, switch to full view and retry. If linking a large monorepo causes lag or browser issues, link a specific subdirectory instead of the repo root. If you hit a "chat upstream error," start a new chat tab inside the same project. And if the design-system import produces messy output, it's probably because the source codebase is messy - clean it up or set up the design system manually.

A complete workflow, end to end

Putting it all together, here's what a realistic session looks like when you go from idea to shipped code.

Open Claude Design and create a new project. Attach context - a reference screenshot, and link your frontend repo, subdirectory and not the root. Write a specific first prompt using the goal, layout, content, and audience structure. Let Claude ask clarifying questions and answer them.

Review the first generation without judging it too hard - it's a starting point. Iterate broadly in chat for things like palette, layout, and alternate directions. Iterate surgically with inline comments for spacing, component swaps, and color tweaks. Ask Claude to review the design for accessibility and contrast. If you want to explore a different direction, tell Claude to save the current version before pivoting.

Export to standalone HTML for a quick shareable preview. Gather feedback via an internal URL with comment access. When it's approved, hand off to Claude Code to implement it against your actual codebase. Ship.

That loop - prompt to prototype to production, entirely inside one ecosystem - is what Claude Design is actually selling. Everything else in this guide is technique for making each step of the loop go faster.

More from AI For Developers

This newsletter is part of AI For Developers - a growing directory of AI developer tools, APIs, frameworks, and resources. If you're evaluating tools for your stack or just want to stay on top of what's out there, check it out:

🔗 AI For Developers - Browse the directory

📬 AI For Developers newsletter - Subscribe to the newsletter

Every issue covers one topic in depth - no fluff, no hype, just the stuff you need to build with AI. Subscribe if you haven't already, and I'll see you in the next one.

Awesome DevTools — A Curated List of Tools for Developers

Dariush — Fri, 11 Jul 2025 06:49:38 +0000

Let’s be real: half of being a developer is writing code — the other half is finding the right tool to fix something, debug faster, or automate the boring stuff.

Over the years, I’ve collected a ton of bookmarks, extensions, CLI tools, web apps, and random utilities that have saved me time (and sanity). So I finally put them all in one place:

👉 awesome-devtools – a GitHub repo full of developer tools that actually help.

💡 Why I built this

There are already a bunch of “awesome” lists on GitHub, but most are either outdated or mix in too much stuff — libraries, frameworks, articles, courses, you name it.

I wanted something clean, practical, and focused on tools — not packages, not tutorials. Just tools that make your dev workflow better.

If it helps you:

Debug faster 🐞
Write better code ✍️
Test smarter ✅
Ship safer 🚢
Or just save time 🕐 …it’s probably in there.

🧰 What’s inside

The list is organized by category, so you can quickly jump to what you need:

🧪 Testing & Debugging tools
🛡️ Security & privacy utilities
🧠 Productivity & workflow helpers
🌐 Browser extensions
⚙️ DevOps, CI/CD, monitoring
🧱 API tools
🖥️ Desktop & terminal tools
📦 Package managers & dependency scanners ...and more.

Browse the whole thing here → https://github.com/devtoolsd/awesome-devtools

🔎 A few tools I love from the list

Here are just a few personal favorites:

HTTPie – clean UI for API testing
tldr.sh – simplified man pages for common commands
Can I Use – browser support reference
mkcert – make localhost HTTPS easy
Wappalyzer – tech stack detector for websites

But honestly, there’s a lot more. And I'm constantly adding to it.

🧩 Got something cool to add?

This repo is open-source and totally community-driven. If you know a tool that belongs on the list (or built one yourself), send a PR!

✅ Add a link

✅ Brief description

✅ Keep it awesome

→ Submit a pull request

Or just star the repo if you think it’s useful ⭐

📌 TL;DR

I made a GitHub repo called awesome-devtools
It’s a curated list of useful dev tools (no fluff)
It’s open-source — you can contribute
If you like it, share it or star it 🙌

Thanks for checking it out! Hope it becomes one of those tabs you leave open forever 😉

Happy coding 👨‍💻👩‍💻

Forem: Dariush

How to Actually Use Claude Design

Claude Design in one minute

Before you start

Getting set up

Writing a first prompt that works

Iterating: chat vs. inline comments

Using adjustment knobs

Exploring variations without losing your work

Getting better output: field-tested tips

Exporting and sharing

Handing off to Claude Code

Collaboration

Pricing and limits

Known issues and workarounds

A complete workflow, end to end

More from AI For Developers

[Boost]

Python by Example — Learn Python the Practical Way

[Boost]

JSBooks: A Curated List of the Best JavaScript Books

Minoo ・ Dec 30 '25

[Boost]

JSBooks: A Curated List of the Best JavaScript Books

Minoo ・ Dec 30 '25

[Boost]

The Awesome AI Coding Tools Repo Has a New Home — and a Bigger Mission

Awesome DevTools — A Curated List of Tools for Developers

💡 Why I built this

🧰 What’s inside

🔎 A few tools I love from the list

🧩 Got something cool to add?

📌 TL;DR