Claude Design first impressions: four days in, here's what works and what doesn't

Anthropic launched Claude Design three days ago. If you haven't seen it: point Claude at a prompt describing a UI and it ships you live HTML, deployable. Not a mockup, not a Figma file, real browser-rendered markup you can put behind a domain today. I have been using it eight to ten hours a day since the launch to build version two of this site. Here is what I have learned.

What it actually is

First, let's clear up what this thing is. Claude Design is not a separate product. It is a new interface mode inside the main claude.ai web app, an evolution of the "Artifacts" feature they have been testing for a while. You can read the official launch post from Anthropic for the marketing version, but the reality is simpler.

When you activate it, your chat window splits. On the left, you write your prompt. On the right, you get a live-rendering preview of the UI. The default model is Opus 4.7, their latest, and it is clearly tuned for this task.

The output is not an image. It is a real, self-contained HTML file, or a small collection of linked HTML, CSS, and JS files if you ask for it. It comes with Tailwind CSS preloaded via their CDN, so you can use utility classes in your prompts right away. You can also pull in other libraries, like Alpine.js or htmx, by asking it to include the script tag.

The most important feature is the hot-reloading. When you edit a line in your prompt, say changing padding: 4 to padding: 6, the preview on the right re-renders in a second or two. This feedback loop is the core of the experience.

The good parts

After about 30 hours of use, four things stand out as genuinely game-changing.

First, the output is immediately usable. It is compilable HTML. I can literally copy the code block, paste it into a new page.tsx file in my Next.js project, and it just works. This sounds simple, but it is a monumental leap over tools that give you a wireframe or a set of design components you still have to assemble. It removes an entire translation step from the process.

Second, the default design sensibility is surprisingly tasteful. It is not flashy, but it is clean and correct. For a technical site like this one, it defaulted to an Inter and JetBrains Mono font pairing without any prompting from me. The spacing is good, the hierarchy is clear. It avoids the generic, soulless feel of earlier generation tools. It feels like it was trained on a corpus of well-regarded, minimalist design systems.

Third, the iteration loop is faster than anything I have ever used. My old workflow for a new component was: sketch on paper, build a rough version in TSX, open it in the browser, tweak the classes in dev tools, copy the changes back to my editor, save, wait for the dev server to refresh. Now, I just change a line of text in my prompt. The layout shifts, the colors update, the spacing adjusts. I can see the result instantly. If I do not like it, I hit undo. This is a legitimate 10x speed improvement for initial UI scaffolding.

Finally, it respects my existing design system. I have a set of CSS variables for kieran123.win defined in a @theme block. I pasted this block into the system prompt for my Claude Design session. It correctly picked up every variable, from --color-primary to --font-body, and used them in the generated code. It did not try to override them or invent its own. This means I can use it to build components that are perfectly consistent with my existing site.

The four quirks nobody mentioned

It is not perfect, of course. The marketing materials do not tell you about the handful of sharp edges you will inevitably run into. Here are the four that caught me off guard.

a) The preview can be stale. The hot-reload is fast, but it is not instantaneous. There is a 2 to 3 second lag between your prompt edit and the final rendered state. A few times, I saw a layout I liked, copied the code, and pasted it, only to find I had copied a broken intermediate state. The model was still "thinking" and the preview had not caught up. You have to learn to pause for a moment after each change to make sure what you see is what you will get.

b) It is aggressively light-theme-by-default. My site is dark-first. My system is set to dark mode. But unless I explicitly tell Claude Design to use a dark theme, it generates a white page with black text. You have to be very specific in the system prompt: body background should be #0a0a0b, text color should be #ededed, and so on. It is a minor annoyance, but it feels like an odd default for a developer-focused tool in 2026.

c) It is better at utility than marketing. I found it much easier to get great results for data-dense layouts, like tables, dashboards, and settings pages, than for big, expressive hero sections. My theory is that the training data is heavily weighted toward application UIs and design systems documentation rather than splashy marketing websites. It can make a beautiful landing page, but you have to work harder on the prompt to get there. It excels at structure and information density.

d) Animations are an afterthought. If you want a simple hover effect or a subtle fade-in, it can handle that. But if you want anything more complex, like a layout animation with Framer Motion, you are on your own. It will give you the static JSX structure, but the animation logic is still a manual task. This makes sense, as animation is about behavior over time, which is harder to describe in a static prompt.

The specific prompt shape that worked for me

After a lot of trial and error, I landed on a prompt structure that gives me consistent, high-quality results. The key is to be as explicit as possible. You want to reduce the amount of creative interpretation the model has to do.

My homepage prompt is broken into five sections, in this order:

1. Design Tokens: I paste my entire CSS @theme block here so it knows my exact colors, fonts, and spacing units.
2. Component List & Structure: I describe the page layout from top to bottom, naming each component (Header, ArticleGrid, Footer).
3. Component Details: I go through each component one by one and describe its contents and layout using specific Tailwind classes.
4. Content Instructions: I explicitly say "Use this real copy, not Lorem Ipsum" and provide the text.
5. Output Format: I give it final instructions like "Dark theme only" and "Ship a single .tsx file with functional components".

Here is a simplified version of the prompt that generated the new homepage for this site:

SYSTEM

You are an expert front-end developer who creates clean, modern, and accessible user interfaces using React, TypeScript, and Tailwind CSS.

---

USER

Generate a single .tsx file for a personal blog homepage.

**1. Design Tokens (use these CSS variables):**
@theme {
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --color-bg: #0a0a0b;
  --color-text: #ededed;
  --color-muted: #a1a1a9;
  --color-accent: #f4f4f5;
  --spacing-4: 1rem;
  --spacing-8: 2rem;
}

**2. Page Structure:**
The page should have a main container with a max-width of 768px, centered.
- A simple `Header` component.
- An `Introduction` section.
- A `Writing` section that contains a grid of `ArticleCard` components.
- A simple `Footer` component.

**3. Component Details:**
- `Header`: Contains my name "Kieran" on the left and two links "Writing" and "Projects" on the right. Use sans-serif font.
- `Introduction`: An h1 with the text "Digital craftsman." followed by a paragraph of 2-3 sentences about my work. Use sans-serif font.
- `Writing`: An h2 that says "Latest Writing". Below it, a two-column grid of `ArticleCard` components.
- `ArticleCard`: A simple card with a title, a short excerpt (1-2 lines), and the publication date. Use muted text color for the date.
- `Footer`: Contains links to "X" and "GitHub" and the current year. Use mono font.

**4. Content:**
- Use the real copy provided above. Do not use placeholder text.
- For the ArticleCards, create three examples with realistic tech blog post titles.

**5. Output Format:**
- The entire page must be in a dark theme using the provided color tokens.
- Generate a single .tsx file.
- Use functional React components.
- Use Tailwind CSS for all styling. Do not use inline styles or a separate CSS file.

This level of detail works because it constrains the model. It turns it from a creative partner into an incredibly fast and efficient production tool.

What I won't use it for

Even with this success, there are clear boundaries.

• Final production copy: The prose it generates is fine for placeholders, but it is average. It lacks a unique voice. I will always write the final words myself. Claude Design is spatially intelligent, but its prose is generic.
• Complex state machines: It can build the visual representation of a complex component, but it cannot design the state management logic. It gives you the JSX, not the application architecture. I would not ask it to build a multi-step form with client-side validation.
• Anything regulated: I would not use this for any UI that has to meet strict compliance standards, like in finance or healthcare. The nuance of accessibility (WCAG AA), data privacy, and legal disclaimers is still my responsibility as the developer.

What I will use it for from now on

With those limitations in mind, my workflow has permanently changed.

• Every first draft of every page: I will never again start a new page with an empty file. The first version of any UI will now come from a 15-minute session with Claude Design.
• Quick, brutal components: For things like buttons, cards, dividers, and other components where the design language is already well-defined, this is a no-brainer. I can ask for "a primary button with a hover state" and get exactly what I need in seconds.
• Style guide exploration: This is an unexpected benefit. I can paste a client's brand brief into the prompt and ask for ten different variations of a hero section. It is an incredibly powerful tool for mood boarding and exploring visual directions at the start of a project.

Compared to the alternatives

• Figma: Figma is still king for multi-page design systems that require deep collaboration and component libraries. Its strength is in system-level thinking. Claude Design is for the solo developer or small team that needs to ship a high-quality page today.
• v0.dev: Vercel's v0 is the closest competitor. It has a tighter integration with React and the shadcn/ui ecosystem. This makes its output very consistent, but also locks you into a specific aesthetic. Claude Design is more flexible; it does not have a strong opinion about which component library or CSS framework you use.
• Cursor with claude-opus-4-7 in agent mode: My previous go-to. Cursor gives you more fine-grained control over the codebase, which makes it better for refactoring existing code or tackling complex logic. But for generating a new UI from scratch, its feedback loop is much slower than Claude Design's live preview. I now use Claude Design for the first draft and Cursor for everything after.

The economic thing nobody's saying

Let's talk about the cost. A heavy iteration session in Claude Design, with the Opus 4.7 model running constantly, costs me about $3 to $5 per hour.

That one hour of work replaces what would have been at least 4 to 6 hours of my own manual TSX and CSS coding.

At my internal rate for my own projects, the math is not just good, it is absurd. The tool pays for itself in the first ten minutes of use. This has led me to a strange conclusion. For years, the software industry has been building layers of abstraction: design systems, component libraries, CSS-in-JS frameworks, all to make us more efficient. Claude Design just bypasses most of it.

The question is not "is this tool worth the money". The question is "why did we build so much abstract tooling when the model itself is the tool".

I am not yet convinced this replaces designers for serious product work. The creativity, empathy, and system-level thinking of a great designer is not in this model. But I am fully convinced it replaces my first-draft TSX writing forever. That alone pays for itself. If you are an indie dev shipping a personal site in 2026 and you are not using this, you are choosing to be slower on purpose.