A Sunday Afternoon with Claude Design

It’s really hard to get momentum on a side project when you have a full-time job with lots of travel, an active blog, and a newsletter. But I had to recapture that momentum because this side project is important. It’s for a preschool website for my cousin.

Walking into My Little Learning Tree is like stepping into pure warmth. Yes, yes, preschools are inherently fun environments, but the kids and the teachers there create a visceral energy that is simply special. I wanted to capture that specialness in a long-overdue website redesign project.

Looking at my in-progress design, something felt off. I had these long horizontal lines preceding the eyebrows—the small text above a heading that names the section—that didn’t feel right. First, they were straight. Second, the lines only occurred before the text, not also after. I clicked on the Comment button to enter Comment mode, then clicked on the eyebrow and prompted, “These lines aren’t playful enough. Let’s make them squiggles and have them before and after the eyebrow text.”

And then Claude Design did its thing.

A Shot Across Figma’s Bow

Anthropic announced Claude Design with a blog post on Friday morning:

Claude Design gives designers room to explore widely and everyone else a way to produce visual work. Describe what you need and Claude builds a first version. From there, you refine through conversation, inline comments, direct edits, or custom sliders (made by Claude) until it’s right. When given access, Claude can also apply your team’s design system to every project automatically, so the output is consistent with the rest of your company’s designs.

Reaction was immediate and mixed. Figma noticed, of course, with CEO Dylan Field posting this on Twitter, insinuating Claude Design is a copycat:

The market wasn’t subtle either. Figma’s stock took a hit on the news, closing nearly seven points lower than the previous day. Investors treat every AI announcement as a threat to the incumbent, which is usually noise. But this time some of the anxiety was warranted.

The reaction inside the design community was more interesting, and less unanimous. Enthusiasts treated Claude Design as the next natural step in an AI-native design pipeline. Skeptics waved it off as a wrapper around Claude Code.

The Room Is Split

My friend Christopher Noessel, a veteran UX designer and author of Designing Assistant Technology, handed Claude Design a toy problem and got back a dozen competent-looking screens. His reaction:

I sat there staring at a page of screens and felt something I hadn’t felt in years: the specific sense of being overwhelmed when on the receiving end of a design dump. I couldn’t tell you which comp was best. I couldn’t tell you why any of them were the way they were.

Noessel’s thesis is the sentence that anchors his piece:

Design was never the comps.

The comps are an artifact of design. They are not the thing itself.

I agree. My Claude Design output started at a B- and got to an A because I brought a specific model of what this preschool should feel like (handmade, warm, low on corporate polish) and applied that model across dozens of decisions. The squiggly line wasn’t a design move. The decision to change the line to a squiggle was the move. Noessel calls the hidden part “model-building.” That’s what the afternoon was.

Sam Henri Gold took the structural angle, arguing that Figma’s proprietary format quietly locked it out of the agentic era:

By nature of having a locked-down, largely-undocumented format that’s painful to work with programmatically, Figma accidentally excluded themselves from the training data that would have made them relevant in the agentic era. LLMs were trained on code, not Figma primitives, so models never learned them. As code becomes easier for designers to write and agents keep improving, the source of truth will naturally migrate back to code.

This maps directly to what I saw. I tested Claude Design against Paper, another HTML/CSS/JS-native tool, with the same context. Paper produced a C- or D. Claude Design started at a B-. Neither forced me to commit to a framework or a backend yet. That’s why I picked this category over v0, Lovable, or Figma Make for the design phase. Gold invokes an Arts and Crafts principle called “truth to materials”: a thing should be honest about what it is and how it’s made. HTML, CSS, and JavaScript are the material of the web. I was working in it the whole time.

Not every take agreed. Michal Malewicz, a product designer and author, argues that Claude Design is Claude Code in different clothes:

So this tool is some extra .md files wrapped in a shiny “new” product that can make Figma stock go down. That makes headlines, people talk about you, investors feel the innovation go Brrr.

But in reality, this is the same Claude Code you used for the last year.

I half agree. The underlying model is the same. Opus 4.7 sits behind both. Hell, I even used Opus 4.7 with Paper. Claude Design gave me more than Claude Code in the terminal. I could click any element to edit it directly, or drop a typed comment on a selected region. A draw mode let me sketch annotations over the prototype. It treated my brand style guide as core context, not a reference file. The work felt like design review all the way through. Malewicz is right that a skilled prompter can coax similar output from Claude Code. But the tool’s posture changes what a non-coder can reach for, and that matters more than what a power user can reproduce.

Arpy Dragffy, co-host of the Product Impact Podcast, takes Gold’s argument a step further. He says Claude Design doesn’t kill Figma. It forces Figma to become something bigger:

Figma’s survival path is not competing with five AI generation tools. It’s becoming the system of record for what design means across the entire organization.

His argument rests on a historical pattern. GitHub got more valuable as AI generated more code. Obsidian got more valuable as AI generated more knowledge. When generation is commodity, the platform that holds the canonical version becomes the leverage point.

He’s right that a canonical reference matters more now, not less. But Figma isn’t where that reference lives.

Production is the source of truth for any application. What users are actually experiencing is the only reference that can’t drift. Below that, design decisions live in two places: the design system, which is increasingly a code artifact that both designers and agents can read, and the specs written during feature creation. Figma is where exploration and composition happen. That’s a real and durable role. But when a feature ships, the design system has been updated in code, the spec documents the intent, and production embodies the result. A Figma file is a snapshot of a moment in the design process, not the authoritative answer.

Claude Design in Practice

The Infinite Canvas Still Has a Role

So with the release of Claude Design, I don’t believe that “Figma is cooked.” It still has a role to play. For the longest time, artists have ideated visually. Pablo Picasso sketched nine studies before painting his 25-foot Guernica masterpiece. To explore the aesthetics of the preschool website, I couldn’t have prompted my way through it. I had to import visual inspiration into the workspace and then started making. To work out complicated user flows for an app, typing is not the answer. An infinite canvas is.

I say this with certainty because I believe that designers are generally visual thinkers. A never-ending whiteboard like Figma is great for exploration. You can diverge without reaching the edges. (Which I have, many times, in Illustrator.)

Figma Make was supposed to be the tool to turn static mockups into more realistic prototypes. Yeah, I guess. But it feels heavy. Make spins up a Vite site and writes a ton of React code. In fact, so do all the other prompt-to-code tools like Lovable and v0. They’re writing React frontends with all their associated bloat: dependencies are being installed, components are being created and imported, etc. Whether it’s Vite or Next.js, those are applications that need to build and then be served on localhost to be previewed.

Whereas Claude Design is simply HTML, CSS, and JavaScript. The raw materials of the web. In fact, Claude Design will simply export an HTML file with linked assets in a zip. This can be double-clicked and opened in any browser.

The Decent Junior Designer

Working with Claude Design is like working with a pretty decent junior designer. For the preschool site, I gave it some context: a visual direction expressed as a concept blurb and a style tile, a written brand style guide, the design brief for the project, and the website copy deck. I asked it to create a homepage based on all that context.

The first draft was a solid B- grade. Just above average. It had some personality and playfulness to it that I didn’t expect. Impressed, I worked with Claude Design through about four dozen iterations to nail the font choices, typography scale, layout, and a bunch of micro-tweaks to something I was proud to share with my client. What Claude Design produced for me was a great head start that I could work with.

Unlike Claude Chat or Cowork, this is an artifact-first layout and gives you multiple ways to work with it. I could select a piece of text on the page and directly change the copy or tweak the font, size, color, or any of the traditional properties of type. The changes happened immediately in front of me. But as soon as I exited Edit mode, I noticed that Claude remembered the changes and wrote a prompt for itself to update the code. Interesting.

Other ways to give Claude feedback on the output include selecting an element and commenting on it, and drawing on top of it.

One of my senior designers at BuildOps also tried the app over the weekend. She took a different approach, closer to what Noessel did. She asked for variations. Working on design system components, she had Claude Design explore muliple directions and asked it to provide rationale for each one. They worked iteratively and when she was satisfied, asked it to write a design brief as part of the handoff, giving Claude Code even more context in the next step.

Design Systems Baked In

Speaking of design systems, they are central to Claude Design, which reflects the enterprise focus Anthropic has always had.

The app doesn’t take your Figma file or component codebase as-is. Instead, it walks you through a translation workflow. It ingests the inputs—all in-browser—and then writes simpler HTML/CSS/JS versions.

Claude Design walks the user through a workflow to build a design system for use inside the app.

It took some iteration. It’s about 80% right off the bat, and over about an hour, I tweaked the remaining to get it to 90%. Which is good enough for prototyping purposes.

Once published—borrowing that term from Figma—it’s available for anyone in your company to use. Our CMO built one for slide decks and marketing docs. I built one for product design.

HTML with a Pinch of React

The handoff is where things get interesting. Although the delivered output is HTML, Anthropic itself doesn’t see these artifacts as production-ready. There’s an explicit handoff to Claude Code. And included in the handoff package is a README file that says:

The design medium is HTML/CSS/JS — these are prototypes, not production code. Your job is to recreate them pixel-perfectly in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don’t copy the prototype’s internal structure unless it happens to fit.

Don’t render these files in a browser or take screenshots unless the user asks you to. Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won’t tell you anything they don’t.

Despite all our advances in AI and design tooling, the design-to-code handoff gap remains! For the longest time, I’ve argued that solving the gap is the holy grail. I believe this is an explicit tradeoff the Claude Design team makes: speed and ease of use over production-readiness.

One more nuance: there’s React underneath. Poking around an exported bundle, I found .jsx files. These are React component files, not plain JavaScript. The bundle ships as a static HTML file that loads React and a JSX transpiler (Babel) from a CDN at runtime. Every .jsx file is loaded as a browser-transpiled script. No npm install, no build step, double-click to run.

The tradeoff makes sense once you see what these prototypes do. My webapp prototypes had view switching, filter toggles, and an edit mode. Hand-rolled DOM manipulation would be miserable and would drift from how a real app behaves. React handles state; plain HTML doesn’t. So Claude Design authors in React but delivers static files, which means the handoff to Claude Code ports interaction logic over cleanly even when the visuals get rebuilt.

Halfway to a Design Playground

The beauty of Claude artifacts is that you can publish them so that anyone with a link can view them. For prototyping, especially for unmoderated testing, shareable links are a must-have. Anthropic has decided—at least for v1—that sharing was out of scope. So as a design playground, it’s only halfway there.

Figma Make, v0, Lovable, and other prompt-to-code tools have that sharing built in. But the cost is a bit more friction and yet another subscription. Even Figma is charging for AI credits now.

But Claude Design is included in Anthropic’s paid plans. Fair warning though: It’s token hungry. When working on the design system for BuildOps, I received an “extra usage” warning. Not only that, it filled up its context window and literally lost the plot.

During one edit that I asked for, after spinning for a bit, it finished but said, “I’ve lost the specific task details in the context trim. Could you remind me what you’d like me to build or update?” To its credit, it remembered much of it, but yes, I had to remind it, and I’m glad it didn’t just assume and hallucinate the original request.

Where It Lands

As it stands today, I think Claude Design fits somewhere in the process between Figma and Claude Code. And Anthropic seems to acknowledge that by including Figma file import capabilities. It doesn’t pretend to replace Claude Code, purposefully relying on lighter-weight, minimal React to help you visualize your design.

Working with Claude Design on Sunday afternoon was fun, not arduous. I was able to use my judgment, taste, and years of experience to shape a website design to my liking, like chiseling a marble statue. The design emerged as I worked with it.

My cousin ended up really liking the homepage direction I sent her. Of course, I had to send a zip and instructions on how to view the HTML, but it worked. There’s still a lot to do: finalizing the illustrations and putting in the real photos, building out the other pages, and getting it live. But I’m excited to continue trying out this new workflow all the way through Claude Code helping me ship the thing. I’ll be sure to share it when I’m done.