Learn one feature at a time

Describe a design.
Refine it visually.

Create a first mockup, use a design system, and hand a reviewed design to Claude Code.

What Claude Design does

Claude Design helps create visual work through conversation and a canvas. Use it for mockups, prototypes, and one-pagers. It is available in beta on paid plans, with organization controls. You can start from a conversation, the Artifacts tab, or claude.ai/design.

Create one screen first

1. Describe who will use the design and their main task.
2. Supply approved colors, logos, or references you can use.
3. Ask for one screen with clear content and actions.
4. Review on desktop and a narrow screen.
5. Refine through chat, canvas edits, or comments.
6. Review before exporting, sharing, or handing off.

Design one beginner-friendly recipe search screen. The main task is finding a recipe by ingredient. Use readable text, visible focus indicators, clear labels, and a mobile layout. Use fictional recipes. Show loading, empty, and error states. Do not add accounts, payments, or publish anything.

What is a design system?

A design system collects reusable colors, typography, and components so screens stay consistent. Start with approved brand material or existing components. Claude can build a system from design references; /design-sync connects code-based components in supported Claude Code sessions. Review the imported system before reusing it.

From design to working code

In supported Claude Code sessions, /design creates Design artifacts with artboards that export as PNG or PDF. Separately, Claude Design’s Export menu offers ZIP, PDF, PPTX, standalone HTML, and a handoff to Claude Code. Choose the output for the product you are using.

A good-looking mockup is not a verified application. Ask the implementation agent to inspect the existing project, preserve its conventions, and test keyboard access, responsiveness, and real data behavior. A visual prototype does not establish those results.

References

• Anthropic. (n.d.-k). Commands. Retrieved September 24, 2026, from https://code.claude.com/docs/en/commands
• Anthropic. (n.d.-v). Get started with Claude Design. Retrieved September 24, 2026, from https://support.claude.com/en/articles/14604416-get-started-with-claude-design
• Anthropic. (n.d.-al). Set up your design system in Claude Design. Retrieved September 24, 2026, from https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design