Quick Overview
This video is a short product demonstration presented by Nate, a designer at Anthropic. It showcases how Claude Design and Claude Code can be used in personal side projects to rapidly conceptualize, refine, and build user interface components. The demonstration focuses on streamlining the design-to-code workflow.
Key Points
- 1.Anthropic designer Nate uses Claude Design to rapidly prototype onboarding flows for personal software projects.
- 2.Claude Code connects directly to a user's codebase repository to access existing project context before generating new design mockups in the Artifacts tab.
- 3.Users can guide the visual output by leaving contextual comments on artboards or directly editing properties such as sizing, typography, and colors in the editor interface.
- 4.Claude can convert static design artboards into interactive click-through prototypes that can be tested before implementation.
- 5.Once an interactive prototype is approved, a single command directs Claude to build and integrate the feature into the code repository.
Summary
Anthropic designer Nate introduces a side project app created with a friend where daily activities change constantly, such as prompting users to draw a picture on one day or upload bird noises on another. Nate explains that secondary requirements like onboarding flows often receive little attention during side projects. Using Claude Design, he demonstrates how he executes a rapid design spike to explore better UI options without spending excessive time.
The workflow begins by opening Claude Code, connecting the project's local code repository, and opening the Artifacts tab to create a new design. Nate submits a prompt asking Claude to examine the current onboarding screen and generate a series of alternative design options. While Claude processes the request and sketches new visual directions, Nate steps away, returning to review several distinct screen mockups organized side by side on the canvas.
To refine the generated artboards, Nate adds contextual review comments directly onto the canvas, such as requesting a larger bird illustration. For specific stylistic details he prefers to adjust manually, he opens the visual editor to inspect and tweak component properties, adjusting layout dimensions, padding, corner radius, and color fills. He also creates additional variations directly within the canvas workspace.
After finalizing the individual artboards, Nate prompts Claude to turn the selected concept into a playable click-through prototype. Claude generates an interactive artifact that allows him to click through consecutive onboarding screens, choose notification delivery times, and confirm app permissions. Satisfied with the interactive flow, Nate issues the command for Claude to build the flow, initiating automated implementation into the codebase.
Connecting Repository Context and Generating Ideas
Nate demonstrates starting Claude Code and connecting his application repository before navigating to the Artifacts tab to create a new design file. He prompts Claude to inspect the existing application layout and generate multiple variations for an onboarding flow based on the current implementation.
Collaborative Refinement and Direct Editing
After Claude generates initial screen designs, Nate inspects the options and leaves on-canvas comments detailing specific adjustments. When certain visual elements require fine-tuning, he opens the design editor to directly modify properties like dimensions, layout padding, and color fills.
Interactive Prototyping and Code Generation
Once the visual mockups are refined, Nate prompts Claude to assemble the screens into a clickable prototype. After testing the flow across notification prompts and confirmation screens, he instructs Claude to build the finalized onboarding flow directly into code.
The Bottom Line
The demonstration shows how Claude Design integrates with Claude Code and Artifacts to bridge the gap between initial ideation, manual visual tweaking, interactive prototyping, and code production. It establishes a practical workflow where designers and developers steer AI-generated concepts through direct canvas editing and commenting. The video leaves deeper technical implementation details and underlying repository configurations to individual user environments.
FAQ
What is Claude Design and how is it used during the application prototyping process?
Claude Design is a feature within Claude Artifacts and Claude Code that allows users to generate, edit, and iterate on user interface screens and interactive prototypes from natural language prompts.
How does Claude Code access existing project context before creating new design artboard options?
Users open Claude Code and connect their project repository folder, allowing Claude to inspect the current code and UI before generating new design directions.
How can designers adjust and refine interface screens generated by Claude Design?
Users can leave visual comments tagged with instructions on specific canvas elements, or enter the built-in editor to manually modify styling properties like size, layout, padding, and colors.
How does an interactive click-through prototype get generated from Claude Design artboards?
Users prompt Claude in the chat interface to turn the selected artboard into a click-through prototype, which compiles the screens into a playable interactive flow.
What step follows the approval of a click-through prototype in Claude Design?
The user enters a command telling Claude to build it, prompting Claude Code to implement the finalized design flow into the application code.
Worth watching for
Software designers, product managers, and developers interested in using AI tools within Claude Code and Artifacts to iterate on UI concepts and convert designs into working code.
- claude
- claude-design
- claude-code
- ui-design
- prototyping
- anthropic