ClaudeStudio: design like the studios that win

This skill comes from measuring live client work, not from taste. We loaded 99 sites in headless Chrome at 1440px and 390px, read their computed styles and mined their JS bundles for motion values. The sites were shipped by about 40 studios (the evidence list is in references/evidence.md). Every number below is a measured range from real sites. When this file says "64px", it means the median of Linear, Vercel, Ramp, and Raycast, not a guess.

The finding behind all of it: top-tier work is disciplined in a very specific, measurable way. AI-generated work is noisy in a very specific, measurable way. Discipline is about count (one idea, one type system, one colour logic), not volume. Some of the best sites studied are quiet (Totême, Aesop); some are loud (Lando Norris, MindMarket, Norton, Obama). This skill teaches discipline at every volume and bans noise.

Warning about medians. The measured defaults below are medians, and medians produce the average site. Applied without choosing a register and the five range axes (references/range.md), every build converges on the same tasteful look (off-white paper, mono labels, hairline metadata, a line-drawing hero). That look is not a direction; it is a default. Step 1 makes you choose.

The six laws (what separates the top tier from templates)

1. Discipline is the signal. Use 1–2 typefaces (3 max), 2 weights, and one colour logic. In the quiet register that means one accent at under 5% of pixels (Factory's orange is on 3 text nodes; Totême has none). In the loud register it means colour as a full-bleed field, with each hue assigned one meaning (Norton gives each section a colour; MindMarket's whole hero is lime). What reads as cheap is many unrelated colours, not a lot of one.
2. Type does the work. Hierarchy comes from size, tracking, and opacity, not weight. Display type sits at weight 300–500 with negative tracking (−0.02 to −0.06em) and line-height 0.85–1.05. Secondary text uses the same ink at lower opacity (100 / 60 / 40%), not a new grey.
3. The image is the subject, never decoration. Use the real product UI rebuilt in HTML, an art-directed photograph, an illustration cast, a colour-block composition, a type poster, a tactile object, a collage, or a domain-specific drawing. Choose the medium that fits the brand (range.md §2C); don't reach for a thin line drawing by habit. Never gradient blobs, glowing orbs, stock 3D shapes, or icon-in-a-rounded-square grids.
4. One idea, carried everywhere. Serve Robotics reuses the robot's two "eyes" as loader, glow, icon, and scroll mascot. Kriss.ai uses corner brackets on buttons, nav, and cards. Pick one motif and use it 3–5 times, changing its role and scale each time (hero ornament → divider → loader → icon → data-viz). The same texture used as background filler in every section is wallpaper, not a motif.
5. Motion focuses; it does not perform. Elements resolve (blur → sharp, grey → ink) more than they fly. Use one house ease (expo-out), 150–300ms for UI and 600–1000ms for reveals. Overshoot is only for tiny UI pops.
6. Craft lives in the boring places, and the copy has a voice. Examples: a cookie banner set in the display face, a live clock in the footer, read-time labels, footnoted claims, optically corrected button padding. Headlines run 2–8 words and are declarative, specific, and never hype.