Claude Design: first look.

Two years into the AI era, most tools still ship with the same aesthetic: shadcn/ui on zinc-950, Inter for everything, purple gradients on the hero, Radix primitives for the buttons. It's efficient and it's everywhere, which means nothing differentiates. When Anthropic released Claude Design in April, the interesting pitch wasn't "generate a logo" — it was the opposite. It's a tool explicitly built to avoid the AI-default look, because the underlying LLM has absorbed enough design context to recognize what's been done to death.

What it generates

You give Claude a product name, a few tone adjectives, a target audience, and ideally a short list of things you don't want. It returns a brand-guideline document — typically one long HTML page with sections for logo concepts, color system, type stack, layout grid, and representative components. The artifact is both visual (you can preview it) and structured (CSS custom-property values, font family names, spacing tokens you could paste into a Tailwind config).

The output we got for Briskly specified: Geist as the single family across display + body (rejected the "display serif + body sans" convention because it's now shorthand for "editorial AI startup"), a warm paper-to-ink scale with four functional accents (hot orange, go green, sun yellow, cool blue), lowercase wordmark with a hot dot for visual punctuation, and explicit instructions to avoid the shadcn zinc-950 / Inter / purple-gradient pattern.

What it does well

Four things stand out on real projects:

1. Coherent color systems. Most AI-generated palettes are eight arbitrary swatches. Claude Design returns palettes with deliberate functional roles — success / accent / warning / info — plus a paper-to-ink neutral scale with enough steps to build real UI. Our briskly palette has eight neutral steps and exactly four accents, each with a documented job.
2. Opinionated type picks. Not just font names — it gives rationale. "Geist everywhere because the 2026 editorial-sans-plus-display-serif combo reads as AI-startup-fund-deck shorthand now." That kind of context is the difference between a specimen sheet and a design system.
3. Respects anti-patterns. If you tell it "no zinc-950, no Inter, no purple gradients, no glassmorphism," it won't sneak them back in. Other generative design tools trained on public sites regress to the defaults because that's what their training data is; Claude holds the rejection list.
4. Developer-usable output. The brand guideline is shipped as a single HTML document with embedded CSS variables, font specs, and layout examples. A developer can read it, pull the tokens, and ship an MVP that actually looks like the spec. No translation layer.

What it does not do (yet)

• Production-ready logo SVGs. The marks are conceptual. Our Briskly wordmark ("briskly" lowercase + red dot) was Claude's concept but I cleaned it up — kerning, x-height of the dot, positioning — before shipping. Treat the logo output as direction, not deliverable.
• Detailed component specs. Buttons, form inputs, modals — it gives you a pattern-level description ("border-first, ink on paper, no shadow") but not pixel-level Figma components. You still build the actual UI library.
• Motion and illustration. The output is static visual identity. Animation principles, illustration style, photography direction — those still require humans.
• Multi-product brand systems. If you have a product family with shared-but-distinct identities (e.g., Google's Material Design applied across Gmail / Drive / Photos), Claude Design handles one brand at a time. You stitch.

How to prompt it well

Vague prompts ("modern and clean") produce vague outputs. The pattern that worked for us:

1. 3-5 tone adjectives, not 12 — too many conflict. Ours was "editorial, warm, brisk, anti-slop."
2. Name three things you explicitly don't want — forces negative space. Ours: shadcn zinc-950, Inter everywhere, purple gradients.
3. Describe the user's context — not the product features, the user's state of mind when they interact. Ours: "someone who needs to make an invoice right now, not browse a product."
4. Include a reference if you have one — an image, a URL, a magazine photo. "Pull the warmth from [paper image] and the precision from [grid image]."
5. Ask for 2-3 directions, then converge — have Claude propose two or three distinct directions, then iterate on the one you like. Don't ask it to nail the answer in one shot.

When to use it vs. hire a designer

Use Claude Design when you're early-stage and need a coherent system that doesn't look like every other AI product; you have strong opinions but don't have a designer; you want to prototype three directions in a day before committing.

Hire a designer when brand is a critical differentiator (luxury, fashion, hospitality); you need motion / photography / illustration that matches; you're scaling past MVP and need the refinement Claude can't yet do.

The honest take: Claude Design eats the bottom 60% of basic branding work — the part most startups were getting from template sites or junior designers on Fiverr. It doesn't replace a real brand designer for the top 40% of projects where brand is the product. It replaces the "generic-enough-to-ship" tier.

How Briskly used it

Briskly's current v2 identity (warm paper ground, ink on paper, hot-orange accent, Geist-only type, lowercase wordmark with a dot) came from a Claude Design session. The prompt listed "editorial, warm, brisk, no AI slop" plus explicit rejections of shadcn zinc and purple gradients. The generated HTML guideline shipped as .brand-assets/v2/briskly/project/Briskly Brand Guidelines v2.html and we implemented it in Tailwind 4 across the site in an evening. The lowercase wordmark, the dot, the color names (hot / go / sun / cool), the rejection of the editorial-serif cliché — all Claude's ideas. The refinement of those ideas, and the implementation, was ours. That's about the right split.

FAQ