Claude Design Kit

Design Map

The single most important file: product, character, world, signature, tokens and competitors. Read first, every session.

The single source of truth for this product's design direction. Every color, typeface, spacing value, icon and animation should trace back to a line here. Fill it with /design-brief (Product, Competitors, inventory) and /direction (Character → Tokens). Replace every <…>; session-start.sh treats < as "still the template".

Changing Character, World, Signature or the palette needs the user's approval.

Product

<One plain sentence: what it is, for whom, and the one thing this screen must get someone to do.\>

  • Kind: <page (read and scrolled) | app screen (worked in)\>
  • Audience: &lt;…\>
  • Existing brand: <logo / color / typeface: keep, refresh or none>
  • Constraints: <framework, component library, dark mode, languages/RTL, accessibility target>
  • Assets that exist: <logo files, product screenshots, photography; plan only around these>

Character

&lt;2–3 concrete words, e.g. "patient, exact, a little dry".\>

{/* Don't use: clean, modern, sleek, minimal, premium, intuitive, seamless. slop-scan.sh flags them here. */}

World

<A place or material to borrow from, not a style label. e.g. "a ship's chart room: paper, brass, pencil marks".\>

Subject inventory (8–12 things only this product has):

  • &lt;…\>

Moments

&lt;1–2 places that get rich color and detail. Everything else stays quiet.\>

  1. &lt;…\>

Signature

<Exactly one ownable detail.>

Idea sentence: On this page, <subject thing> becomes <device>.

Tokens

TokenValueWhy (which line above)
Neutral ramp&lt;…\>&lt;…\>
Accent&lt;…\> (contrast: <measured value + tool, or "estimated">)&lt;…\>
Type<family> / <partner, optional>&lt;…\>
Type scale&lt;…\>
Spacing4px base: 4 8 12 16 20 24 32 40 48 64 80 96 128
Radius<family>&lt;…\>
Motionease-out cubic-bezier(0.23, 1, 0.32, 1), UI &lt; 300ms
Icons<set>, <size>/<stroke>

Competitors

&lt;3–5 real competitors or alternatives. The competitor test runs against these.\>

  • <name>: <what their screen looks like, in one line>

Don'ts

<Corrections that should hold in future sessions. Add one each time the user says "this isn't us".\>

  • &lt;…\>