Claude Design

Claude Design lets you create designs, interactive prototypes, presentations, and more by having a conversation with Claude.

Claude Design has two main areas: a chat interface on the left and a canvas on the right. You describe what you want in the chat, and Claude generates a working design on the canvas. From there, you iterate—refining through conversation, inline comments, and directly on the canvas until it’s right.

The typical flow is:

• Create a project.
• Attach or import the design system you want Claude to build with.
• Add any relevant context (screenshots, a codebase).
• Describe what you want to build.
• Review what Claude generates on the canvas.
• Refine through chat, edit directly on the canvas, or leave inline comments.
• Export or share when you’re happy with the result.

Move between Claude Design and Claude Code

You can move between working in Claude Design and Claude Code while keeping your work synced. Use /design-sync to pull in your design system, so everything you build in Claude Design starts from your existing components. When a design is ready to become software, you can hand it off to Claude Code, which continues from your existing work instead of starting over from a screenshot.

If you prefer to begin your design project from Claude Code, you can create, edit, and sync your work without leaving your terminal using /design. Import a design into your codebase, export your code as a live prototype, or let Claude build the whole thing from start to finish.