How the creator of Claude Design built it—and 10 practical tips from his daily workflow

The three most counterintuitive takeaways: ask for ten versions at once, start with wireframes when details don't matter, and polish the last mile by hand.
By Anthropic 官方博客07-27 · 9 min read⚑ Tutorial / how-to
🎧 Listen to the podcast0:00 / --:--
0:00 / --:--
Deep Dive
At a glance
  • While engineers sped up dramatically with AI, designers remained stuck at their traditional pace. Anthropic product designer Nate Parrott built Claude Design to bridge this gap. Here, he shares the ten practical techniques he relies on daily.
  • His breakthrough realization was HTML: while usually viewed as just a webpage format, HTML can replicate anything slides, videos, or PDFs can do—and Claude happens to excel at writing it.
  • The ten tips map directly to your workflow: 4 before starting, 4 during drafting, and 2 for finishing. The most counterintuitive tip: make final tweaks yourself via direct editing, saving precious tokens.
  • Without explicit direction, Claude defaults to an instantly recognizable aesthetic: cream background, rust-orange accents, and large italic serif type. Anthropic's own docs acknowledge this default, and telling it vaguely to "not use cream" only shifts it to another rigid palette.
⚑ This piece is adapted from Anthropic's official blog, authored by Nate Parrott, the product designer behind Claude Design. Background context omitted in the original post has been verified and added by our team, marked with [Editor's Note], with full sources listed at the end.
The Origin Story

The origin of Claude Design: How one designer kept pace with two engineers

Nate Parrott is the designer behind Claude Design. This article covers three main topics: how the tool emerged from a personal bottleneck, how he uses it daily, and ten practical techniques from his workflow.

First, the bottleneck. In autumn 2025, Nate Parrott was the sole product designer on the VS Code version of Claude Code, working alongside two engineers. Following the beta release in late September and the launch of Opus 4.5 in November, the team shipped features at a breakneck pace. Powered by AI, the two engineers were producing work faster than ever, while Nate remained stuck at traditional design speeds, drawing mockups pixel by pixel.

His initial attempt seemed logical but failed: since Claude Code ran in the terminal filled with text, he copied terminal output to Claude along with screenshots, asking it to design new features. The results were disappointing. He spent about a month tweaking this approach after hours without success.

The eventual breakthrough stemmed from a simple realization: Claude is exceptionally good at writing HTML. We tend to view HTML merely as a format for websites, but a webpage can contain virtually anything—slides, videos, or PDFs—while remaining interactive and animated. Instead of static mockups, he had Claude output raw HTML directly, building a split-screen interface with chat on the left and live preview on the right.

HTML
In his hands, HTML is a canvas
Slides
Landing pages
Clickable prototypes
Animations
One-Pager PDFs
A video editorHe couldn't animate, so he built this first
All six are actual projects mentioned in the post.

Generating HTML alone wasn't enough; product design demands brand alignment. So he embedded Anthropic's fonts, colors, brand assets, and design principles into system prompts, ensuring generated outputs automatically conformed to brand guidelines. Once shared with his team, designers embraced it to build clickable prototypes. Unlike traditional tools that require manually linking every screen state, here you simply upload assets and prompt it to "make it interactive."

Later, during an offsite pitch session with the Anthropic Labs team, attendees used the tool to build slides on the fly—some even assembling presentations right before their turn to speak. Following that meeting, Labs allocated dedicated engineering resources, turning it into an official product: Claude Design.

[Editor's Note]: Nate Parrott was a founding designer at The Browser Company (the creators of Arc browser) before joining Anthropic in February 2025. Claude Design launched in April 2026, reaching over one million users in its first week according to Anthropic's June announcement. It is currently available as a preview feature across Pro, Max, Team, and Enterprise plans with no additional fee; Enterprise admins must manually enable it.

He is upfront about two key limitations. It does not generate images: lacking built-in image generation models, it is ill-suited for logo design; the intended approach is importing existing assets. Building production software requires Claude Code: Claude Design handles early exploration and alignment, allowing seamless handoffs between the two.

Claude Design
Early exploration · Canvas editing
← /design-sync Pull design system in
→ Hand off once design is set
Claude Code
Production code · Ship software
When handing off, Claude Code picks up existing progress without restarting from screenshots; terminal users can run /design directly within Claude Code to create and edit designs. Command names sourced from official announcements [Editor's Note].
Real-World Examples

Four projects he builds daily with Claude Design

The first example highlights his core methodology. Lacking formal animation training, he first had Claude Design build a custom video editor, then used that editor to create his animation. His core principle: have AI build a custom tool first, then use it to execute your work.

Claude Design intro animation. The onboarding animation displayed upon sign-up, produced via his custom-built video editor.

The remaining three examples follow the same pattern: generating interactive widget controls with sliders, then using those tools to fine-tune hard-to-describe parameters.

Subway schedule app featuring adjustable motion controls to tune physical animation dynamics.
Instagram-style color controls, using sliders and presets to tune app palettes instead of describing colors in text.
Redesigning the tool inside the tool itself. A new editor concept developed with colleagues Helen and Andrew—explicitly created to explore product possibilities rather than serve as a production mockup.
10 Practical Tips

10 practical tips from the creator of Claude Design

Here are the actionable takeaways. While the original post listed ten items linearly, we restructured them into three logical phases reflecting your actual workflow: pre-design preparation, active drafting, and final polishing. Each phase addresses a specific inefficiency.

Preparation
4 tips

Prevents vague prompting: ambiguous requirements produce fuzzy output; ten iterations of back-and-forth cost far more than thinking it through upfront.

Drafting
4 tips

Prevents tunnel vision: failing to lock down style leads to endless rework, while exploring only one direction locks you into a dead end.

Polishing
2 tips

Prevents wasting AI for 2-pixel tweaks: minor adjustments are faster and cheaper when done by hand.

Phase categorization added by our editor [Editor's Note].
Phase 1Before you start · 4 tips

1. Think it through before sending prompts

This runs counter to common habit. Most people sit at their screens and improvise, relying on AI speed for cheap trial and error. Nate does the opposite: he spends substantial time refining prompts, doing most of his thinking away from his computer.

An analogy

Like grocery shopping: planning your meal and missing ingredients at home gets you in and out of the store in ten minutes. Deciding what to cook while wandering the aisles leaves you with a cart of unused items and wasted time.

His three approaches
  • Jotting down ideas in a phone notes app while lying on the couch
  • Recording a voice memo during a walk and pasting the transcript later
  • Dictating directly in Claude Design using the built-in voice button

Whatever medium works best for you, the key is doing the thinking away from your computer. That way, when you sit down, Claude can execute a clear, fully formed idea.

Nate Parrott

2. Turn repetitive patterns into a design system

Upload your brand files and visual assets, and Claude will analyze them to build a tailored design systemA standardized repository of brand colors, typography, buttons, and UI components ensuring consistency across projects.. From that point on, every project begins with your established design rules rather than a blank canvas.

An analogy

Like LEGO bricks: standardized shapes and dimensions fit together effortlessly. Hand-molded clay blocks, by contrast, require trimming before every connection.

What to upload
  • Logos, typography guidelines, and color palettes
  • High-quality slide decks and screenshots of existing pages
  • Any reusable visual assets or UI components

3. Feed it your actual codebase and context

If you are designing for an existing app or website, connect it to GitHub. Claude will ingest your components and existing screens as a baseline, matching your real app's look and feel after a few prompts. It can also browse the web or connect to internal systems for live data.

An analogy

Like hiring an interior designer: showing photos of every room is vastly more effective than describing your living room in words. They instantly see ceiling height, flooring color, and outlet placement.

4. Point at the screen and speak

Instead of writing a lengthy paragraph describing a specific UI element, select it directly on the canvas and speak your feedback.

Describing location via text
  • "On the card on the right, under the title, second line, make that button smaller and lighter."
  • Higher risk of AI misidentifying the element
Select element & speak
  • Click button → "Make it smaller and lighter."
  • Zero ambiguity on target element
Selecting an element eliminates lengthy location descriptions, reducing prompts to a single sentence.
How to use it
  • Enable dictation on your computer or mobile device
  • Click the element on canvas and select "Comment"
  • Speak directly; your words appear in the comment box instantly
Phase 2During drafting · 4 tips

5. Lock in fonts and colors upfront—don't let it decide

Without explicit direction, Claude defaults to its preferred internal aesthetic preferences. This is the single most practical tip, as the cost of omitting style guidelines is remarkably specific.

What exactly is this default aesthetic? A June feature in The New Yorker detailed its signature traits:

Without direction, you get this default look
  • Off-white and cream backgrounds
  • Rust-orange accent colors
  • Large italic serif typography with text highlights
  • Widely tracked letter-spacing on subheadings
  • Stock ticker-style scrolling text banners
  • Nested rounded rectangular data panels, sometimes with neon glow effects
Explicit direction: Provide these guidelines
  • Specify exact font names and color codes
  • Upload reference imagery as a moodboardA collection of reference images compiled to communicate intended visual style.
  • Ask it to generate font/color combinations and refine until satisfied
  • Or convert brand assets into a design system (Tip 2)
Default aesthetic traits sourced from Kyle Chayka's June 24, 2026 article in The New Yorker [Editor's Note]; explicit direction recommendations based on Nate's workflow.

The article highlighted a telling example: independent designer Matt Ström-Awn recalled two separate clients presenting AI-generated sales decks. Both featured identical structures—a light background with a mission statement and three bullet points on slide one, a four-card grid on slide two, and a centered "our move" tagline on slide three. "They looked like they came from the exact same agency—different logos, identical design," he noted.

Anthropic acknowledges this tendency in its user documentation:

[The model] has strong design instincts that incline toward a consistent house style... that default is always there.

Anthropic Documentation, cited via The New Yorker

Here lies the critical trap: Anthropic's docs caution that negative prompts like "don't use cream" typically nudge the model into another static preset palette rather than fostering genuine diversity. General negative instructions fail; you must provide explicit font and color specifications—tell it what to do, not just what to avoid.

6. Request ten versions, then remix

Nate's tactic is asking for ten variations in one go. Most will miss the mark, but one or two will hit. You then prompt: "I like Option B, but mix in elements from Option D. Give me five hybrids blending both."

10
Request 10 versions
→Discard 8
2
Select top 2
→B + D
5
5 hybrid iterations
Selecting two distinct options allows Claude to merge contrasting strengths.
An analogy

Like house hunting: touring ten properties in a day quickly clarifies your preferences between layout and natural light. Viewing one house per week leaves you forgetting earlier options by week five.

7. Sketch it when words fail

When you have a layout in mind but struggle to articulate it, draw a quick rough sketch on paper and snap a photo. Simple boxes, arrows, and labels communicate far better than three paragraphs of text.

8. Start with wireframes when details don't matter

Requesting a wireframeA low-fidelity structural blueprint establishing element placement without colors or custom fonts. is much faster and offers a major key benefit: it forces Claude to focus on structural layout rather than visual styling details.

An analogy

Like architectural floor plans: early decisions focus on room placement and flow, leaving paint colors for later. Jumping straight to 3D renderings leads stakeholders to debate sofa colors while ignoring structural flaws.

Phase 3Polishing · 2 tips

9. Polish the last mile yourself—don't prompt for micro-tweaks

For final adjustments—rearranging elements, deleting text, resizing, or tweaking colors—use direct editing drag-and-drop tools rather than sending new prompts to Claude.

Two key reasons:

Direct editing consumes zero tokens, and fine spatial adjustments like sizing and alignment are far more accurate when visually guided by hand.

Prompting "shift this slightly right" requires the model to estimate what "slightly" means, leading to iterative guessing. Dragging the element directly gives instant visual confirmation in a single stroke.

[Editor's Note · Independent Benchmarks]: Tech outlet The New Stack reported in April 2026 that building a design system, a news site prototype, making minor edits, and producing a demo video consumed over half their weekly token limit. In a June 19 report, Alfie Martin, AI Product Design Lead at ABM Industries, noted: "Tokens are expensive and Claude Design burns through them rapidly. In many cases, designing a component or tweaking a detail manually is simply faster."

Anthropic addressed this in their June update by unifying usage quotas into a shared pool across Claude Code, chat, and Cowork, reporting reduced average token consumption per turn.

Connecting Tip 6 and Tip 9 reveals a vital strategy: requesting ten versions consumes significant tokens, but doing so helps find high-level direction. Spend tokens on discovering direction, not pushing pixels. Once direction is set, minor tweaks like shifting positions or font sizes should be handled manually.

10. Queue prompts instead of waiting

You don't need to wait for Claude to finish generating before sending new instructions.ueue multiple prompts or type follow-ups while it works; Claude will process them sequentially.

Summary

The complete 10-tip checklist

✅ The 10-Tip Checklist
Conclusion

Everything you draw should be alive

Nate concludes by recommending a famous 2012 talk by Bret Victor. Known for eschewing slides in favor of live, interactive demos, Victor inspired an entire generation of digital product designers.

The talk, titled Stop Drawing Dead Fish, stems from a sharp observation: artists draw fish as static figures frozen on paper. But living fish swim, dodge, and react to their environment. While computers possess the inherent ability to bring drawn objects to life, we continue using them to produce dead drawings.

People are living things that act and react. Creations inside a computer can also be living things that act and react... if we permit them to be.

[...] Everything we draw should, by default, be alive.

Bret Victor · Stop Drawing Dead Fish (2012)

Revisiting the beginning of Nate's article through this lens reveals the central theme running through his work.

What was the root cause of his initial bottleneck? Static design mockups are dead. Drawing screen after screen, arranging every state, and manually stringing them together merely simulates interaction. Engineers, meanwhile, ship living software that clicks, animates, and responds. The velocity gap between design and engineering was ultimately a gap between static artifacts and living systems.

His solution was not to "draw dead fish faster." He stopped drawing static mockups altogether to build living prototypes directly. HTML is the ideal medium because it is inherently alive: interactive, responsive, animated, and easily shareable via a single link.

His favorite creations share this quality: interactive documents, conversational slide decks, hybrid chart-video experiences, and designs that serve as their own editors. They defy conventional categories because traditional categories were built for static media.

Viewed through this lens, the ten tips fall into place: defining goals, locking in styles, choosing between variations, and polishing the final details represent human judgment that AI cannot replace. AI handles execution and scale. You define what the creation should be; the machine brings it to life.

[Editor's Note]: Bret Victor originally delivered this talk on May 16, 2012, at SIGGRAPH in San Francisco, with the official recording made on November 27, 2012, at the Exploratorium. Omitted transitions between quotes indicated by [...] above.
Source
How the product designer who built Claude Design uses it to explore ideas before building themNate Parrott · Anthropic·claude.com·2026-07-24
Editorial Notes
All four embedded YouTube videos originate from Anthropic's official channel; video captions were written by our editorial team. The five analogies (grocery shopping, LEGO bricks, interior design, house hunting, architectural plans) were added by our team for clarity and do not appear in the original post. Additional background context verified and added by our team is marked with [Editor's Note], including: author career history (via public profile); Claude Design launch date, first-week user metrics, and subscription availability (Anthropic June 17, 2026 announcement and Help Center); /design-sync and /design CLI commands (official announcement); detailed default aesthetic traits, Matt Ström-Awn quote, and Anthropic guidance docs (Kyle Chayka in The New Yorker, 2026-06-24); token cost benchmarks and designer quotes (The New Stack, 2026-06-19); and Bret Victor talk details (Vimeo page). The three-phase grouping of the 10 tips and all three diagrams were created by our editorial team.
↑ End of article
✓ This article is free to read in full

Members can copy or download the full Markdown, and let their AI subscribe and ask.

Read the original ↗
📮 New explainers, straight to your inbox

Found this useful? Leave your email — every new explainer, the moment it's out. Unsubscribe anytime.