What Claude Design Got Right When I Put It Against a Real Site

Anthropic shipped Claude Design to Pro users a few weeks ago, and I wanted to see what happened when it met an actual site instead of a toy prompt.

So I gave it a real brief, a real design system, and a real editorial problem. Then I used it until the weekly quota ran out. Three page types, four separate runs, and by Friday afternoon the allocation was gone.

That turned out to be the point. The tool is not interesting because it makes pretty screens. It is interesting because it writes code, not mockups. You give it a prompt and it returns a working HTML file with embedded CSS and JavaScript. Open it in a browser and you are already looking at a first draft of the actual interface.

What Claude Design Actually Is

That distinction matters. Claude Design is not a Figma replacement. It does not hand you a wireframe or a polished concept image. It gives you runnable front-end code.

That changes the kind of feedback loop you get. Instead of judging a vague visual direction, you are judging a developer’s first pass at the real thing. The gap between idea and implementation becomes visible immediately.

For my first test, I used a motion designer portfolio brief I found circulating online. Editorial, brutalist, dark background, electric accent color, asymmetric grid, Awwwards-quality. It sounded specific, but it was still empty enough to mean very little.

The output was technically correct and generically good. Clip-path reveals, custom cursor, clean type pairing. Fine work, in the sense that it looked like every dark-mode portfolio from 2024. Nothing wrong with it. Nothing specific either.

The Prompt That Mattered

The second prompt was the useful one. I wrote it against this site, using the actual hex values from the CSS, the font stack, and the current layout as something to push against. Geist Sans for body, Geist Mono for labels, timestamps, and badges. I named references too: Stratechery, Bloomberg terminal, The Browser.

That was the difference. Claude Design needs real constraints, not abstract mood words.

The output was 1,079 lines of HTML, and most of it was immediately more interesting than the generic brief. The homepage came back with a dateline above the featured article: VOL. 03 · ISSUE 142 · SAT · APR 18 2026 · EDITION MORNING, plus a pulsing green dot labeled EDITORS ONLINE. Section headings were marked as §01, §02, §03. That is a very specific interpretation of Bloomberg terminal as a reference, and it worked.

The featured article split into two columns, with an oversized editorial title on the left and a generative SVG illustration on the right. Concentric arcs and scatter points, all built from SVG primitives, captioned as FIG. 01 / COVER. No stock image. No placeholder box. It invented a solution to the missing-image problem without being asked.

The Homepage Decisions That Were Worth Keeping

The best surprise on the homepage was the scrolling ticker. I did not ask for it, but Claude Design added a 40-pixel bar with a live dot, headlines in white, category labels in accent blue, timestamps in muted grey, pause on hover, and fading edges via CSS mask.

That is the kind of feature that makes sense for an editorial site. It gives the page movement without turning it into noise.

The other smart move was the article grid. Instead of treating every post the same, it mixed five card types: a tall two-row card for long reads, a medium card, a text-only note card with NOTE watermarked in the corner, a pull-quote card, and a wide panoramic card. All of it sat on a 12-column grid.

That matters because the current site gives every article the same card. For a publication that wants editorial hierarchy, that is the wrong default. Claude Design understood that immediately.

What It Did on the Article Page

The article page used 44 percent of my weekly quota on its own, which is useful to know before you get carried away.

What came back was strong enough to justify it. There was a reading progress bar fixed at the top of the viewport, just two pixels tall, powered by four lines of JavaScript. The first paragraph got a drop cap using ::first-letter. The hero image broke out of the centered container with the classic width: 100vw; margin-left: calc(50% - 50vw) trick.

Subheadings got a 3-pixel left border in the accent color, plus a mono section marker above each one, like § 01 · The shape of the collapse. The body text landed at 17 pixels with line-height: 1.7, and Claude introduced a --body-ink token using color-mix(in oklch, var(--fg) 86%, transparent) to soften paragraph text just enough for long reads.

The sources section used CSS counters to render academic-style [01] markers. The continue-reading area at the bottom was clean and compact: category badge, title, excerpt, reading time, hover arrow. No images. No cards. Just typography doing its job.

Dark Mode and Light Mode Both Worked

I also added one instruction to every prompt after the first run: support both dark and light mode using prefers-color-scheme, with explicit light mode tokens.

The light mode background was #f7f6f2, a warm off-white instead of pure white. The foreground was #0a0a0a. The accent changed to #1d4ed8, which holds contrast much better on light backgrounds than #60a5fa, which works in dark mode but washes out on white.

Every subsequent output handled both modes correctly, with no toggle, no button, no extra JavaScript. The interface just followed the system preference.

That is the right default for a publication. People who have set a system theme do not want to reconfigure every site they read.

What I Would Actually Ship

I am not shipping the generated files as-is. None of it pastes cleanly into a Next.js codebase anyway. What matters are the layout decisions worth extracting.

The reading progress bar ships first. It is tiny, cheap, and useful.

The full-bleed hero image ships second. One CSS rule breaks the image to the browser edge and makes the page feel like a publication instead of a blog.

The section markers ship third. The § notation and the left accent bar on h2s are small changes, but they signal structure immediately.

The light mode accent token is also worth shipping. Swapping #60a5fa for #1d4ed8 in light mode is a small change with a big effect, because every accent element reads properly on a warm background.

The more complex pieces, like mixed homepage card types or richer related-articles blocks, can wait until the data model supports them. There is no point adding features before the schema can hold them.

What the Quota Told Me

One homepage redesign, one article page, one category page, and the weekly Claude Design allocation was gone by Friday afternoon.

That is not a flaw. It is a signal about how the tool works best.

Claude Design is not for iterating on every component in a design system. It is for getting from a vague sense of “this page should feel different” to a browser window that I can actually disagree with in specific ways. That is the useful part. It compresses the design feedback loop.

The generic prompt produced generic output. The prompt with real tokens, real fonts, real layout problems, and named references produced something I would show a designer as a starting point.

One file. Four minutes. Most of it gets replaced. Some of it is worth keeping.