HomeArticle

The Claude designer was left behind after being outcompeted by engineers, but he quickly created a tool that has millions of users.

新智元2026-07-28 08:35
Engineering takes off first, leaving design far behind.

Claude Design turned out to be a side project born out of relentless iteration.

Behind it lies the story of two engineers and one designer.

The story began with the release of Opus 4.5 in November 2025.

At that time, Nate Parrott was the only designer for the Claude Code VS Code project, with two engineers working alongside him.

Anthropic product designer Nate Parrott shared a first-hand account of the full story behind Claude Design's creation on the official blog.

The three of them worked on a single goal: to turn Claude Code, which could only run commands in a terminal, into an interface that ordinary users could easily understand and use smoothly.

At the end of September, the product entered beta and everything ran normally; then in November, Opus 4.5 was released. Parrott described what happened next as follows:

The two engineers suddenly began delivering work at a frantic pace, producing far more output than before, while he remained at his original working speed.

Very soon, he fell behind.

"I need to find a way to catch up," Parrott thought to himself.

So he spent his spare time tinkering with a small tool specifically designed to help him keep pace with the engineering team.

And this "side project" later became Claude Design, which was used by more than 1 million people in its first week after launch.

Engineering Took Off First, and Design Was Left Behind

The most striking part of this story is that AI did not raise everyone's work speed equally, but allowed the engineering side to accelerate dramatically first.

As a result, the design team where Parrott worked quickly became the slowest link on the entire workflow pipeline.

The turning point came on November 24, 2025, the day Opus 4.5 was released.

According to Parrott's recollections, the entire Claude Code team's delivery rhythm became significantly faster afterward, with the two engineers producing much more output than before, while his design output remained at its original pace.

This forced him to find a way to catch up.

This precisely reveals the most easily overlooked aspect of the AI wave: its first impact is often not the disappearance of certain jobs, but the disruption of the originally well-matched rhythm between different workflows.

For example, once engineering speeds up, any link that cannot keep up — including design, product, and marketing — will instantly become a new bottleneck.

A Month-Long Side Experiment: From "AI Generates Design" to "AI Writes HTML"

Parrott's initial idea was very straightforward.

Claude Code was a plain text terminal tool, so he initially followed this line of thinking and treated design as a text-based task:

He would package terminal outputs, several interface screenshots, and a single requirement, send them to Claude, and say: "Here's the feature we want to add, design it for us."

The results, however, were far from satisfactory.

For about a month afterward, he treated this task as a side project: no official project approval, just working on it little by little in his spare time.

Gradually, he stumbled upon the real solution: Claude is exceptionally good at writing HTML.

We are used to thinking of HTML as a tool for building web pages.

But Parrott had an epiphany: HTML is actually a rich interactive visual medium. Slides, video files, PDFs — anything these formats can do, you can create with a single web page.

So he stopped asking Claude to "draw designs" and instead had it "generate HTML", then wrapped it in an interface: a chat panel on the left, and a real-time preview on the right. Every input you make instantly updates the preview on the right.

The breakthrough Parrott found was not about "letting AI draw images", but about "using HTML as a unified visual canvas": slides, interactive prototypes, animations, and web pages can all now go through the same generation and editing workflow.

The working interface of Claude: chat on the left, canvas on the right — exactly the prototype concept Parrott first built.

HTML Alone Is Not Enough: The Brand System Is the Key

Being able to write HTML alone is still a long way from making the tool "usable".

In Parrott's view, the core of product design is to translate your understanding of the product and brand into every specific design action.

So he spent a lot of time distilling all of Anthropic's brand assets, including fonts, color schemes, materials, and design principles, into his prompts bit by bit.

This way, when he entered requirements into the AI, the generated designs were inherently more aligned with Anthropic's specifications.

He packaged this entire system into a tiny internal prototype and shared it with the team. Product designers immediately started using it to create interactive prototypes.

Creating a clickable prototype in traditional design tools means you have to draw every state of every interface and manually connect them one by one.

But in Claude Design, you only need to send the materials to Claude and say "make it work". The output will come with a dedicated link, which you can share directly with colleagues just like sending a document.

This feature later became the core capability of the entire product.

When you first set up Claude Design today, it will read your code repository and design files, automatically building a complete design system for your team.

Every subsequent project will automatically apply your brand's colors, fonts, and components. Large teams can even assign an administrator to lock a standard system to prevent unauthorized modifications.

An Offsite Event Turned the Side Project Into an Official Product

What truly made Parrott realize that "this project was a success" was a demo pitch session at an Anthropic Labs team offsite retreat.

He found that almost everyone present was using this tool to put together slides, and many people were even rushing to finish their presentations right before their turn to speak.

This scene convinced the Labs team to officially allocate resources to the project. From that moment on, the side project was promoted to a full-fledged official product.

Anthropic had already gone down this path successfully once before with Claude Design.

On January 13, 2026, Anthropic announced the expansion of Labs, bringing in Instagram co-founders Mike Krieger and Ben Mann to lead the division, which was positioned to incubate experimental products pushing the boundaries of Claude's capabilities.

Claude Code started as a research preview and grew into a billion-dollar product within six months.

Claude Design followed the same path: starting as one person's private experiment, being voluntarily adopted by internal designers, receiving overwhelming positive support from colleagues at the demo pitch, and finally getting dedicated resources from Labs, releasing a public research preview, and transitioning to beta.

Not a single step in this process was planned from the top down.

AI-native products are often not designed in the traditional sense, but created through real, organic internal usage.

Value Moves Upstream: Designers Are No Longer Just "Delivering Graphics"

After Claude Design became an official product, its positioning quickly evolved.

The team no longer saw it as a tool only for creating interface mockups.

It can handle all visual communication tasks, including slides, landing pages, printable PDFs, emails, animations, and social media graphics.

As Parrott put it, it "operates one level above product design": what you and Claude refine together are the visual assets primarily used for communication and ideation.

The division of labor is clear: Claude Design handles the early stage, for rapid exploration, comparing different directions, and building consensus; Claude Code takes over the later stage for actual production and development.

The two tools are also interconnected: you can pull in the design system with /design-sync, make edits directly in the terminal with /design, and the workflow is bridged by MCP.

Claude Design can export PDFs, PPTX, and HTML, and integrates with tools including Canva, Adobe, Gamma, Miro, Replit, Vercel, and Wix.

Completed work can be exported as PDFs, PPTX, or HTML, and sent directly to tools like Canva, Adobe, Gamma, Miro, Replit, Vercel, and Wix for further editing with one click.

However, Claude Design is not an image generation model. Parrott admits that it is not suitable for creating logos: you need to import your existing logos, images, and brand assets into the tool manually.

For production-grade software that will be launched publicly, Anthropic still recommends using Claude Code as the primary development tool.

At the end of the day, Claude Design is an early-stage tool, not a mature production development platform.

The more capable models become at writing code, the more high-value work shifts upstream. Designers' value now lies more in selecting directions, building systems, evaluating quality, and driving consensus.

Let's go back to the original scenario.

When the two engineers working alongside him suddenly accelerated their pace, Parrott, the only designer on the small team, was left behind. Instead of waiting passively, he took matters into his own hands and built the tool he needed to catch up.

No one could have imagined that this tool would later be used by millions of people.

Therefore, when you feel anxious about your work being disrupted by AI, you might as well follow Parrott's example: use AI to build a new tool for yourself, or find such a tool to open up new possibilities.

References:

https://claude.com/blog/how-the-product-designer-who-built-claude-design-uses-it-to-explore-ideas-before-building-them?utm_source=chatgpt.com 

https://www.anthropic.com/news/claude-design-anthropic-labs?utm_source=chatgpt.com 

This article is from the WeChat official account "AI Era", author: ASI Revelation, published with authorization from 36Kr.