How the creator of Claude Design built it—and 10 practical tips from his daily workflow
- 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.
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.
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.
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.
/design-sync
Pull design system in