---
title: "Claude Design, From First Prompt to Working Code"
author: "Ecem Karaman"
source: "https://aiwithecem.com/guides/claude-design"
published: 2026-09-19
tools: ["Claude"]
topics: ["Creative","Building"]
---

# Claude Design, From First Prompt to Working Code

Claude Design turns a conversation into prototypes, one-pagers, dashboards and other visual work, built on a canvas beside the chat. Most guides stop at "describe what you want." The part that decides the quality comes before and after that: which design system it builds with, how you refine it, and how the design becomes real code. Here's the whole workflow.

**Details checked against [Claude's Get started with Claude Design article](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) on September 19, 2026.**

> **In this guide**
>
> 1. [What changed recently](#what-changed-recently)
> 2. [Where to start](#where-to-start)
> 3. [Load your design system first](#load-your-design-system-first)
> 4. [The brief](#the-brief)
> 5. [Refine with the right tool](#refine-with-the-right-tool)
> 6. [Export or hand off](#export-or-hand-off)
> 7. [Limits worth knowing](#limits-worth-knowing)
> 8. [Start here](#start-here)

## What changed recently

If you learned Claude Design at launch, some of it works differently now:

- **It's inside regular Claude.** You can use it in any conversation, the Artifacts tab, and Claude Code. The standalone claude.ai/design still works.
- **Presentations moved to Claude Slides.** Use Design for everything else.
- **Usage is shared.** There's no separate design allowance anymore. It draws from the same limits as the rest of Claude, including Claude Code.
- **Design systems moved** to **Settings → Design systems**. Older team systems can be migrated from the Design tab.

## Where to start

It's in beta on Pro, Max, Team and Enterprise. It's on by default except on Enterprise, where an owner turns it on.

| Start from | Best for |
| ---------- | -------- |
| **A conversation** | Turning something you just discussed into a design. Ask for it, or pick **Output → Design** |
| **The Artifacts tab** | Starting from a Design template |
| **Claude Code** (`/design`) | Designs that live next to your codebase |
| **The mobile app** | Requesting a design and viewing it later. Editing needs web or desktop |

## Load your design system first

Output is only as on-brand as the system it builds with. Claude checks its work against your design system and fixes mismatches before you see them.

- Import from a GitHub repo, design files or uploads, or run `/design-sync` in Claude Code to pull from your local codebase.
- **A messy source shows up in the output.** Clean up your tokens and components first.
- No design system yet? Attach screenshots or a document whose style you want matched.

## The brief

```text
Design [what]: [goal].
Audience: [who uses it, on what device]
Layout: [sections and hierarchy]
Content: [real copy and data, attached. No placeholders]
Components: [name design system components, like "Primary Button"]
Responsive: [mobile, tablet, desktop, or just one]
Ask me questions before you start if anything would change the result.
```

**Start simple.** Get the core layout right first, then add interactions, edge cases and polish in later rounds.

## Refine with the right tool

| Use | For | Example |
| --- | --- | ------- |
| **Chat** | Structure, new sections, direction changes | "Move the metrics to the top row and add a settings panel on the right" |
| **Inline comments** | One specific element | "Make this a dropdown" |
| **Direct canvas edits** | Quick visual adjustments | Drag, resize, align |

Two moves worth building into every project:

```text
Show me 2-3 alternative layouts for this page before we refine one.

Review this design for accessibility, contrast, hierarchy and usability. List issues by severity.
```

**There's no version history yet.** Before a big change, say: "Save what we have and try a completely different approach."

## Export or hand off

| You need | Use |
| -------- | --- |
| Stakeholder feedback | A share link. Viewers need a Claude account, and Enterprise links stay inside the org by default |
| A file | PDF, PPTX, standalone HTML or a .zip |
| Your existing tools | Send to Canva, Miro, Lovable, v0, Vercel, Netlify, HubSpot and others |
| **Working software** | **Hand off to Claude Code**, which continues from the design instead of rebuilding it from a screenshot |

For builders, the handoff matters most: design the flow visually, then keep building in code without losing the design.

## Limits worth knowing

- **It's in beta.** Inline comments can occasionally go missing. Paste the feedback into chat instead.
- **Big repos lag in the browser.** Link very large codebases from Claude Code.
- **Multi-person editing is basic.** One editor at a time is safer.
- **Heavy projects use more.** Large codebases and many iterations draw more from your shared limits.

## Start here

- [ ] Import or sync your design system, or attach reference screenshots
- [ ] Brief one real project with the template above
- [ ] Ask for 2-3 layouts before refining
- [ ] Run the accessibility review
- [ ] Hand it off to Claude Code, or export it

**Go deeper:** [Claude, End to End](/guides/claude-end-to-end) · [ChatGPT Sites: What to Build, How to Brief It](/guides/chatgpt-sites) · [How to Start a Big Project in Claude Code](/guides/big-projects-claude-code)