THE LOOKBOOK
Directed Design
Keypad or type your PIN
The Lookbook · Directed Design
Claude Design · new-skill visual walkthrough · 2026-09-13

What the AI-slop fixes actually look like.

Anthropic's new design skills are words — taste, told not shown. This is the showing: every pair below is the same brief twice. Left, the default a model reaches for when nobody steers it. Right, the same surface after a directed pass — subject-derived palette, chosen type, one orchestrated moment.

How to read it: each frame is a live artboard (real HTML/CSS, not a screenshot) · left = default pull · right = directed choice
These artboards deliberately include the "tells" the new skills name, so you can see exactly what they cost you.
Exhibit 01

A product landing page

Same brief: "a landing page for a product that tells you where your money went last month." The left one is what comes out with no steering. The right is the same content after the discipline in the new skill: a subject-derived palette, a serif chosen for the mood, texture instead of a hero gradient.

Your money, finally clear.

Ledgerly automatically tracks every dollar and shows you exactly where it went.

Start free todaySee how it works
📊

Smart tracking

Every transaction, sorted automatically.

🎯

Clear budgets

Set it and forget it. We handle the rest.

🔒

Secure & private

Bank-level encryption, always.

Default — the pull of the model Count the tells: Inter everywhere · violet-indigo gradient on the headline and buttons · white canvas · centered stack · three equal feature cards with emoji icon toppers · "Get started / Start free today / See how it works" — CTAs that don't say what happens. Every one of these is in Anthropic's cluster list. None of them are choices.

Where did last month
actually go?

Ledgerly reads your accounts and writes one honest page: what you earned, what left, and which habits made the difference. No dashboards to configure.

Open your October Read a sample report
3 min to connect
1 page per month
0 spreadsheets
October — where it went
Rent & utilities
Coffee & lunches
Everything else
62% committed$1,240 left
NOTEYou spent 31% less on delivery than in September.
PAGE 01 / 12
Directed — grounded in the subject The skill at work: a ledger is quiet and paper-like, so the palette is deep green ink + cream — not a gradient. Fraunces serif carries the mood; IBM Plex Mono handles the numbers like a printed statement. The hero opens with the subject's own artifact — the monthly page — instead of a centered slogan. Dot-grid texture gives depth without a "wash". CTAs name their action: "Open your October", not "Get started".
Exhibit 02

A performance console

Same brief: "a dashboard an ops person watches all day." This is a Monitor surface — the new skill's framing says density and glanceable hierarchy beat decoration. The default reaches for a white SaaS card kit anyway.

Overview
Reports
Alerts
Team
Settings

Overview

Export
Uptime
99.9%
▲ 0.2%
Requests
2.4M
▲ 12%
Latency
142ms
▼ 8%
Errors
0.03%
▲ 1%
Traffic over time
Top endpoints
/api/v2/search48%
/api/v2/feed22%
/api/v2/auth14%
/api/v2/sync9%
Default — the SaaS card kit Tells: white cards floating on pale blue-grey · the same rounded corner radius on everything regardless of hierarchy · the same soft grey shadow under each · stat tiles with big numbers filling space · blue "Export" pill · a sidebar of five links nobody asked about. All legitimate — but it's the wallpaper of every SaaS product, chosen by default rather than for this surface.
PULSECONTROL
LIVE · PROD-EU
99.98%
Uptime · 30d
142msp50 latency
0.03%error rate
2.4Mreq / day
REQUEST RATE · LAST 60 MIN2,412/S
Anomalies
SEV-2/api/v2/search p95 spike 340ms — above threshold 18 min
SEV-3cache hit ratio drifting down in eu-west
SEV-4nightly sync completed 4 min late
Directed — density as the design The skill at work: a monitoring wall should feel like an instrument panel, so the palette is near-black + a single vermilion signal colour, and IBM Plex Mono carries every figure — machines report in mono. No sidebar of links; the top rail is the instrument. Severity is encoded in the layout itself (orange rule on the active alert), not in decoration. One orchestrated accent — the signal colour — spent in exactly one family of places.
Exhibit 03

One surface, three directions

The variation rule: when exploring, don't ship the first viable skin. Same brief — "a music player for one track" — taken three ways. All three are legitimate; they are simply directions, which is the point. The default look isn't one of the options.

Now PlayingSide A · 03
FIG. 3 — THE SINGLE

Half-Light

Marla & The Tide
2:414:12
04Low Tide, Morning3:58
05Everything Keeps4:20
Direction A — Neo-editorial Record-shop print energy. Newsreader italic for the titles, a hairline progress rule with one red marker, mono for numbers. Quiet, warm, deliberate.
marla@tide ~ now-playing
TRACK
♫ HALF-LIGHT — Marla & The Tide
████████████░░░░░░░░
SPACE pause  next  prev
04Low Tide, Morning3:58
05Everything Keeps4:20
Direction B — Terminal For people whose home is a shell. Green phosphor on near-black, keyboard-first, progress as a block meter. The aesthetic is the audience's own materials.
THE SINGLE — OUT NOW4:12

Half-Light

MARLA & THE TIDE
2:414:12
Direction C — Maximalist pop Loud on purpose. Archivo Black, yellow ground, hard offset shadows, shapes that break the frame. The energy of the record itself, translated to pixels.
Exhibit 04

The typography dimension

The skill's most concrete lever: "avoid bolded or colored words mid-sentence" (that's how you say emphasis in a paragraph, not in a display headline). And its single biggest visual win: stop loading Inter.

Ship faster than ever before.

A workflow platform that helps teams move faster with automations that actually work.

Get started free →
Default headline treatment Tells: headline split into "plain + one highlight word" with a gradient colour. Body re-emphasises "faster" and "actually" inline. Every CTA ends with an arrow. This is the exact pattern the new skill tells models to stop producing.

Ship faster
than ever.

Automations that move work forward without a single manual handoff — and a workspace that stays out of your way.

Start a workspaceSee the automation library
TYPE: FRAUNCES · IBM PLEX MONO
Directed headline treatment The skill at work: one serif with optical sizes, headline allowed to run as its own object; emphasis comes from the type itself, not from recoloring a word. Copy is specific ("automations that move work forward") instead of intensified ("actually work"). CTA names its outcome. One type family, used decisively.
What models reach for when nobody steers
AaInterweight 800 headline · weight 400 bodyThe default of defaults. Fine as a choice; the problem is it's the choice on every single brief. The new skills name it explicitly: "avoid generic fonts like Arial and Inter."
AaRobotoAndroid defaultReached for when the brief "feels technical." Neutral to the point of vanishing — nothing about the subject in it.
AaSpace Groteskthe second-order defaultThe trap Anthropic calls out by name: models avoid Inter, then converge on this one across every generation. Still a convergence.
What a directed pass can build with — one family per brief
AaFrauncessoft editorial serifWarmth and humanity — used in the landing direction above. Optical sizes let one family carry both display and body.
AaBricolage Grotesquecharacterful grotesquePersonality without noise. Note: this is the first family in Anthropic's own canvas-design font bundle.
AaNewsreaderquiet reading serifFor editorial surfaces that need to feel printed, not rendered. Used in Direction A above.
AaInstrument Serifcondensed display serifSharp, high-contrast, great at large sizes — this page's own headline face.
AaIBM Plex Monotechnical voiceThe skill's answer for data: "a monospace face for small data labels" — when you want the machine register, mono everywhere beats mono sprinkled.
Exhibit 05

From the poster skill

The canvas-design skill works differently: you first write a one-page design philosophy (an "aesthetic movement"), then express it as art, 90% visual and 10% text. Two of its example movements, rendered as live posters:

MOVEMENT: CONCRETE POETRY
FORM: MONUMENTAL GEOMETRY
NO. 001 — SERIES “SPATIAL SENTENCES”
BREATHE
IN
SPACE
MASS × SILENCEPRINTED MATTER / 2026
"Concrete Poetry" — from the skill's own examples Text as a rare, powerful gesture — three words set at architectural scale, no explanatory sentence anywhere. Colour used as a single spatial event (the red mass), not decoration. Note what's missing: no paragraph, no subtitle selling you the poster.
ANALOG MEDITATION · STUDY 04
“the quiet is not empty”
INK / AIR / PATIENCE
"Analog Meditation" — from the skill's own examples The other pole: vast negative space, whispered type, one phrase as the entire content. The skill says text "appears sparingly — short phrases, never explanatory blocks." Both styles come from the same instructions, which is why the philosophy step exists.
Exhibit 06

The colour discipline

"Commit to a cohesive aesthetic. Dominant colours with sharp accents outperform timid, evenly-distributed palettes." Three of the clusters Anthropic names as current AI defaults — rendered honestly, so you can recognise them on sight.

Cluster 1 — "warm editorial"

cream + high-contrast serif + terracotta
#F4F1EA
#26251F
#D97757
#8A867C
Anthropic's tell #1 — and the family your own report template sits in. Fine when it fits the brief; a fingerprint when it appears on every brief.

Cluster 2 — "dark + signal"

near-black + one acid accent
#0B0B0B
#1A1A1A
#B6FF3B
#E8E8E8
The second-order default: dark ground, one electric accent. Legitimate for a security product; suspicious on a bakery's site.

Cluster 4 — "SaaS wallpaper"

white + blue-violet + soft grey
#FFFFFF
#F5F6F8
#6366F1
#8B5CF6
The one you saw in Exhibit 01 left. Indigo-violet is the model's favourite colour, not the brand's.
Exhibit 07

Where this lands in your pipeline

None of the above is exotic. Every left-hand frame is what a competent template produces; every right-hand frame is a decision. That's the entire value of the new skills — and why the earlier conversation's Option C matters more than A or B:

What the skill says Where it shows up on this page What it changes for us
Ground designs in the subject's materialsLedgerly reads like a printed statement; the console uses instrument-panel materialsEvery HTML deliverable currently ships in one house skin — good for internal consistency, risky for public work
One orchestrated moment, not scattered effectsThe staggered entrance in each artboard — one sequence, not hover noiseOur `.reveal` pattern is close; the rule is spend motion once
Avoid the tells: eyebrow labels, middle dots, mono-ticsThis page keeps one eyebrow style deliberately (it's a gallery); the artboards avoid themOur canonical template scores high on the chrome tells — fine internally, a signal publicly
Write copy that names the action"Open your October" vs "Get started today"Cheap, immediate, applies to every page we ship
Read it this way: the left column of each pair is what our pipeline produces by default today. The right column needs no new tooling — it needs the taste rules available at build time. That is exactly Option C from the earlier map: a design gate inside WebChef, advisory, public-facing only.