Claude Design

What it is, from a user's perspective

Claude Design is a design workshop accessible from claude.ai. Unlike a classic Figma plugin that produces screens from visual specifications, the tool takes a plain-language brief as input and returns a structured design brief: art direction, a palette with pre-validated contrasts, typography, components, and usage rules. The output is text (Markdown), to be applied afterwards in code.

This article is a usage report — full credit for the tool goes to Anthropic and the Claude team. The case study covers the visual redesign of Vite Fait, Bien Fait, a personal project I present on this showcase (link at the bottom of the page).

The initial UX problem

Vite Fait, Bien Fait had shipped a v1 in May 2026, followed by a user smoke test that surfaced 6 UX friction points: (1) the "unofficial site" disclaimer not visible enough, (2) Île-de-France coverage microscopically small in the footer, (3) abbreviation tooltips absent outside detail pages, (4) internal links visually indistinguishable from external navigation, (5) overall "official French site" feeling too strong (the navy palette evoked the Marianne), (6) too many drop-shadows giving a generic SaaS vibe.

The brief sent to Claude was intentionally short and philosophical: "Create an original, serious visual identity — not French administrative, independent and recognisable."

What Claude produced in one pass

The output: a 212-line document in 8 sections, dated the same day, kept verbatim as a frozen contract. No further iteration was needed before moving to implementation.

Art direction: positioning as an "practical almanac held by someone who knows the system", with concrete references — Are.na, Robin Sloan, Craig Mod, Index magazine, Werkstatt. The tone borrows from independent printed guides and notarial registers, mixed with contemporary web layout. The result must say in under a second: this is serious, this is verified, this is not the State.

Palette: light mode on cream surface (#FAF6EE) with brown ink (#1A1714), brick primary (#6F2509), saffron accent (#8A5A0B); dark mode on charcoal surface (#14110E) with light ink (#F0EAD8), orange brick (#E8A074), light saffron (#E8C56A). All contrasts validated WCAG AAA (7:1+) across both modes. No trace of Marianne blue.

Typography: Newsreader for display (variable editorial serif, Google Fonts) — no administrative connotation; Atkinson Hyperlegible for body and UI, chosen as the explicit default for dyslexic readability (not an option in a menu — the default font); JetBrains Mono for administrative references (CERFA numbers, MDPH codes). Modular scale 1.200, target reading measure 68ch.

• Signature components: typographic cartouche (ruled box + small caps), recurring on the home and axis pages.
• Thin rules (1px brick) rather than drop-shadows, everywhere.
• Lucide outline 1.5px icons exclusively, never an icon alone without a label.
• Radii systematically < 8px (editorial target, not SaaS).
• Two shadows only, thin and warm.

How I executed it across 4 PRs

Claude Design brief in hand, I split the implementation into 4 phased PRs, each with its own CI gates:

• PR 1 — Foundation (~450 LOC): @theme tokens light + dark, Newsreader/Atkinson/JetBrains fonts, anti-FOUC script, ThemeToggle, mechanical rename marine→primary across 28 files.
• PR 2 — Components (~700 LOC): refactor of 10 existing components + 8 new ones (Cartouche, SignatureIndep, BandeauPositionnement, VoirAussiLink, Callout, MetadonneesCartouche, TOC, ThemeToggle).
• PR 3 — Pages (~800 LOC): restructuring of 7 pages (home, axis×3, detail, letter, decision, contact, legal) + extract-toc helper + sticky TOC.
• PR 4 — Search (~550 LOC): Pagefind indexing + Cmd-K dialog with ARIA combobox.

Gates applied to each PR: Vitest + typecheck + build + Pa11y CI on both modes (light and dark) + Lighthouse a11y/perf/SEO ≥95 on both modes + axe-core 0 serious/critical violations. Observable acceptance criterion post-merge: no residual marine token, ThemeToggle 3 states with localStorage persistence, AAA contrasts, "not the State" signature readable in under a second on the home.

What worked

• Conciseness: 212 lines are enough to document a complete redesign. No Figma mockup to iterate, no pixel-by-pixel review.
• Auto-validated contrasts: all AAA ratios pre-calculated in the output. Zero post-reception corrections on the palette.
• Externalised cultural references: Are.na, Craig Mod, Index magazine = inspiration anchored in the real world, easy to validate visually rather than vaguely.
• Philosophy-first: starting with "it's an almanac, not a brochure" naturally flows into technical choices (editorial serif + thin rules, not drop-shadows + SaaS carousels).
• Deterministic output: over 8 months, I never had to return to the initial prompt for clarification. The brief remained the source of truth.

Watch outs

• Newsreader variable font: ~50 KB compressed woff2. Without a preload in <head>, LCP takes a hit. Solution: preload + font-display: swap, and accept a brief transition.
• Mechanical token rename: 28 files × 154 occurrences. Grep + sed is safe if exhaustive, but requires a systematic runtime smoke test before pushing (otherwise you miss a dead import).
• Systematic dark mode: anti-FOUC script mandatory in <head>, with try/catch for older browsers (native prefers-color-scheme fallback).
• The brief does not give Tailwind tokens ready to paste. You need to translate the HEX values into @theme variables. Not a blocker, but allow 30 minutes of manual transcription.

When to use it, when not to

Good for: solo startups or small teams, philosophy-driven redesigns, projects where the identity must be fresh rather than iterated, teams without a dedicated designer, editorial prototypes.

Less good for: enterprise design systems with multiple stakeholders who want to see screens before signing off, brands with strong constraints already locked upstream (imposed palette, inherited type), iterative redesigns on existing mockups. In these cases Claude Design can still serve as a starter, but the output will need much more negotiation.

Sources & credits

Claude Design is designed and maintained by Anthropic. This article is a usage report — all credit for the product goes entirely to Anthropic and the Claude team.

Case study drawn from Vite Fait, Bien Fait — project page available on this site (link below).