Quick Overview
This video is a product demonstration presented by Nate, a designer at Anthropic. It walks through the practical design and prototyping capabilities of Claude Design inside Claude Code using a personal side project application as an example.
Key Points
- 1.Claude Design allows users to create, iterate on, and prototype visual user interfaces directly alongside their codebase in Claude Code.
- 2.Users can prompt Claude to generate multiple design variations based on existing project files and application concepts.
- 3.Designers can provide feedback either by writing targeted comments for Claude or by manually editing layout and typography elements on the canvas.
- 4.Claude can convert static design artboards into functional, interactive click-through prototypes for flow testing.
- 5.Once a design direction is approved, Claude can be instructed directly to build the finalized interface into the application.
Summary
Nate, a designer at Anthropic, demonstrates how he uses Claude Design to rapidly explore and build user interfaces for personal software projects. Working on a daily challenge application where users receive a new prompt each day, such as drawing a picture or uploading bird noises, Nate seeks to improve the onboarding experience without spending excessive time on manual drafting.
He begins by opening Claude Code, selecting the local repository for the application, and opening the Artifacts section to create a new design file. Nate enters a prompt instructing Claude to review the existing onboarding implementation and sketch several new creative concepts. While Claude processes the request, it analyzes the existing files and outputs a canvas containing the current baseline onboarding alongside four distinct conceptual artboards labeled with varied themes and interaction styles.
To refine the generated screens, Nate interacts with the canvas using two complementary approaches. He drops inline comment tags addressed to Claude requesting specific adjustments, such as enlarging a bird graphic across the screen. At the same time, he uses the visual editor toolbar to directly adjust typography, button styling, and layout parameters on the artboards himself.
After finalizing the visual assets for the selected bird mode direction, Nate asks Claude to generate an interactive click-through prototype of the entire onboarding sequence. Claude outputs a playable prototype artboard, enabling Nate to step through the sequence of selecting notification times, approving permissions, and testing an interactive counter button. Once satisfied with the flow, Nate inputs a simple prompt telling Claude to build the finished interface into the app codebase.
Generating Design Concepts from Code
Nate, a designer at Anthropic, opens Claude Code, connects his project repository, and navigates to the Artifacts tab to create a new design. By referencing existing code and describing the intended tone, he prompts Claude to generate a series of exploratory onboarding flow ideas alongside the current baseline design.
Refining Interfaces with Comments and Direct Editing
After Claude generates several artboard variations, Nate iterates on the visual details. He leaves specific instructions using pinned comments for Claude to expand graphic elements, while also using the built-in canvas editor tools to manually tweak text content and layout properties.
Prototyping and Implementation
To evaluate the complete user experience, Nate prompts Claude to generate an interactive click-through prototype of the chosen bird-themed flow. After clicking through the prototype screens on canvas and verifying the interaction, he instructs Claude to build the final design directly into the project codebase.
The Bottom Line
The video demonstrates how Claude Design bridges initial ideation, manual visual tweaking, and interactive prototyping inside Claude Code. It establishes a collaborative workflow where the AI generates options and implements code while the user steers visual and functional decisions. The presentation focuses on a lightweight demonstration and leaves deeper technical integration details and backend implementation steps untouched.
FAQ
What is Claude Design and how is it used during software creation?
Claude Design is an interface design and prototyping tool within Claude Code artifacts that lets users generate UI screen variations, refine layouts visually or with prompts, and test interactive prototypes.
How does a designer connect a project repository to Claude Design in Claude Code?
The user opens Claude Code, selects the local project folder from the repository dropdown, and navigates to the Artifacts tab to launch a new design session.
What methods can users employ to modify screens generated inside Claude Design?
Users can leave targeted inline comments tagging Claude with specific revision instructions, or they can use the canvas editing tools to manually alter text, components, and layout properties directly.
How does Claude Design convert static screen concepts into interactive prototypes?
When prompted to make a click-through prototype, Claude generates a playable interactive artboard on the canvas that allows users to click through screen transitions, notification settings, and UI actions.
How is an approved interface translated into actual application code using Claude?
Once the prototype and screens are finalized, the user can prompt Claude directly in the session to build the feature, prompting Claude Code to prepare and generate the necessary project code.
Worth watching for
Software designers, product managers, and developers looking to integrate AI-assisted UI design and rapid prototyping into their coding workflow.
- claude-design
- claude-code
- ui-design
- prototyping
- anthropic
- app-development