@ericrisco/rsc 1.0.33 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,64 @@
1
+ # Eval harness — `design-dna` skill
2
+
3
+ Agent-run eval, not a shell script. The cases in `cases.yaml` are fed to a Claude Code agent and
4
+ graded by inspection. Unlike most skills here, part of this one **is** mechanically checkable —
5
+ see §C.
6
+
7
+ ## What's under test
8
+
9
+ 1. **Triggering** — does it fire when a winner exists and its look must survive, and stay quiet when
10
+ there is no winner yet (`design`), when the winner is still being found (`design-loop`), or when
11
+ the user is exploring variants (`prototype`)?
12
+ 2. **Capability** — does it hold the rules that are the method, especially the two it is cheapest to
13
+ drop: Step 5, and the separation of record from payload?
14
+ 3. **Its own gate** — does the emitted skill's checker actually check?
15
+
16
+ ## A. Triggering accuracy
17
+
18
+ The boundary that costs the most is `design-loop` ↔ `design-dna`, because both involve a reference
19
+ image and both are about a look. The split is whether a winner exists: finding it is upstream,
20
+ keeping it is here.
21
+
22
+ ## B. Capability
23
+
24
+ Three scenarios, chosen because each targets a rule that a plausible-looking run will quietly skip:
25
+
26
+ 1. **CAPTURE.** The long list is deliberate — every line is a rule the method names as load-bearing.
27
+ The two that a good-looking run drops first are **Step 5** (rebuild the reference from the record
28
+ alone and diff) and **coverage percentages**. Step 5 is the only honest completeness test that
29
+ exists: a spec that has never been used to rebuild its own source has never been tested.
30
+ 2. **REUSE.** The failure is re-deriving a style that already has a record, which produces a second,
31
+ slightly different identity under the same name.
32
+ 3. **Still generic.** The correct answer is a ban, not a rule. This case exists because the instinct
33
+ is always to add a positive instruction, and a positive instruction is one weak vote against the
34
+ average of everything the model has seen.
35
+
36
+ ## C. The mechanical part — check both directions
37
+
38
+ Most of this eval is judgement. The emitted checker is not, and it must be verified the way the
39
+ constitution's P2 demands: prove it can fail **and** prove it can pass.
40
+
41
+ python3 scripts/emit.py <slug> --validate # the capture is finished, or it is not
42
+ python3 <slug>/scripts/check.py <output> # the output obeys the style, or it does not
43
+
44
+ Both directions, on a real captured style:
45
+
46
+ - **Can pass** — run the checker over the style's own worked example. Zero failures, with the
47
+ manual tests reported as manual rather than silently passing.
48
+ - **Can fail** — run it over an output that breaks a known ban. It must exit non-zero and name
49
+ which test failed and what the failure looks like.
50
+ - **Cannot lie either way** — run it over an artefact a probe cannot read (a PNG for a probe that
51
+ reads declarations). Every such probe must report SKIP with its reason. This is the regression
52
+ that was found and fixed at port time: the declaration-reading probes used to run against empty
53
+ text, which produced spurious failures on one probe kind and, worse, **vacuous passes** on
54
+ another — five greens on an image-only run without having checked anything.
55
+ - **Fails readably when unfinished** — a scaffolded style with no record must exit non-zero with a
56
+ message naming the fix, not a traceback.
57
+
58
+ ## Known limits of this eval
59
+
60
+ - The CAPTURE scenario can check that the agent *runs* Step 5 and reports gaps; it cannot check that
61
+ the reconstruction was honest. A rebuild done with the reference still on screen looks identical to
62
+ one done from the record alone.
63
+ - The 2KB payload cap and the two-ends attention ordering are asserted by the method, not measured
64
+ here. They are plausible and cheap to honour; they are not proven by this eval.
@@ -0,0 +1,68 @@
1
+ skill: design-dna
2
+
3
+ should_trigger:
4
+ - prompt: "This landing page came out beautiful. Turn it into a skill so I can reuse the look."
5
+ why: "The canonical CAPTURE case: a winner exists and the ask is to make its identity permanent and reusable."
6
+ - prompt: "Make five more carousels like this one, same look."
7
+ why: "'More like this' with an existing reference is REUSE if a record exists and CAPTURE if it does not; either way this skill owns the decision."
8
+ - prompt: "Keep the same style as the deck you built me last week."
9
+ why: "Style continuity across pieces is the problem this skill exists for; without a written record the model reproduces the average instead."
10
+ - prompt: "Everything I generate now looks like generic AI slop. It didn't at the start."
11
+ why: "Named verbatim in the description as a trigger. Drift is the symptom of unwritten rules, and the fix is a record with bans, not another prompt."
12
+ - prompt: "Lock this look in so it stops changing on me."
13
+ why: "Explicit trigger phrase; the ask is permanence, which is the record plus tests that can fail."
14
+ - prompt: "Every carousel I post looks slightly different from the last one. I want them to read as a set."
15
+ why: "Non-obvious: no keyword overlap with 'skill' or 'style'. The stated symptom is missing named archetypes — inconsistent structure under consistent styling."
16
+ - prompt: "Esto ha salido bien. Quiero que las siguientes cinco se vean igual."
17
+ why: "Non-English, no keyword overlap; the semantic shape is a winner plus a demand for reproducible identity."
18
+
19
+ should_not_trigger:
20
+ - prompt: "Design a landing page for my new analytics SaaS — hero, pricing, the works."
21
+ route_to: "design"
22
+ why: "No winner and no reference to measure. Capturing an average of candidates produces the average, which is the thing the method exists to escape."
23
+ - prompt: "Make our homepage as good as linear.app and don't stop until it wins."
24
+ route_to: "design-loop"
25
+ why: "Finding the winner is the upstream half of the pipe. There is nothing to codify until a piece has cleared the bar."
26
+ - prompt: "Write the hero headline and value prop for this page."
27
+ route_to: "marketing"
28
+ why: "The words. `voice` in the record constrains copy; it does not write it."
29
+ - prompt: "Build these pages with the App Router and server actions."
30
+ route_to: "nextjs"
31
+ why: "The build. The identity stays in the record; the framework work is the sibling's."
32
+ - prompt: "Give me three different directions for this poster and I'll choose."
33
+ route_to: "prototype"
34
+ why: "Exploration among variants. One skill per style: merging two candidate identities into one spec produces the average of two good designs, which is a bad design."
35
+
36
+ capability:
37
+ - scenario: "User attaches a screenshot of a landing page they love and says 'codify this'. (CAPTURE mode, nothing captured for this style yet.)"
38
+ must_include:
39
+ - "Runs the seven steps in order and shows work at each; does not jump straight to writing a style file."
40
+ - "Step 1 produces literal measurements with NO judgements — sampled colours, coverage estimates, type counts, largest-to-smallest ratio, margins as percentages, and what is ABSENT."
41
+ - "Records ratios and relationships rather than absolute values ('headline is 8x body, never under 6x', not 'headline is 96px')."
42
+ - "Records colour COVERAGE percentages, not just the colours — states that the same three colours at 60/30/10 and at 90/8/2 are two unrelated designs."
43
+ - "Uses descriptive colour names ('dusty plum'), never systematic ones ('accent-500'), because image and video models cannot read token names."
44
+ - "Gives every type family a fallback."
45
+ - "Identifies the ONE deliberate break in the system (the weird move) and gives it its own field."
46
+ - "Writes 8-12 tests that are binary and measurable, marks which are automatable, and rejects 'feels premium' / 'looks clean' as non-tests."
47
+ - "Produces MORE bans than positive style rules, written as absolutes."
48
+ - "Does NOT skip Step 5: rebuilds the reference from the record alone, diffs against the original, folds every difference back in as a forgotten field, and records the gaps found."
49
+ - "Keeps the record and the payload as two separate artefacts: the payload is capped at 2KB and the record never enters a prompt."
50
+ - "Puts any real logo, wordmark, licensed photograph or proprietary typeface into not_copied with a named substitute — reproduces the system, never the marks."
51
+ - "Declares every inferred-rather-than-measured value and every rule under 70% confidence."
52
+ - "Validates the emitted skill with the emit script rather than asserting it works."
53
+ - scenario: "A style called `cold-press` already has a full record. User says: 'build me an about page in cold-press'."
54
+ must_include:
55
+ - "Recognises this as REUSE and does NOT re-derive the style — a style with a record is never re-measured."
56
+ - "Loads that style's payload ONLY and attaches the kept reference; does not read the full record into context."
57
+ - "Picks a named archetype BEFORE writing anything, so the new piece sits beside the earlier ones as a set."
58
+ - "Hands the build to the nextjs sibling and the words to marketing, keeping the identity here."
59
+ - "Runs the style's own auto-check before returning, names each test and its result, and repairs then re-runs on any failure."
60
+ - "Does not return output with a failing test plus a note explaining it away."
61
+ - scenario: "A style is captured and its record is complete, but the pages built from it still come out looking generic. User asks what to add."
62
+ must_include:
63
+ - "Adds a BAN, not another positive rule — states that a positive instruction is one weak vote against the average while a prohibition deletes a whole space."
64
+ - "Checks whether the signature moves are missing or too numerous and cuts to 3-9, each rewritten as a ratio."
65
+ - "Checks whether the payload is over its cap, since an over-cap payload is obeyed unevenly and differently each run."
66
+ - "Checks whether the strongest rule is buried in the middle of the payload rather than at either end."
67
+ - "Checks whether a weird move exists at all, since a spec with no break in the system reads as forgettable rather than wrong."
68
+ - "Does not respond by merging in a second style or by re-capturing from scratch."
@@ -0,0 +1,436 @@
1
+ > Source: Notion, "Design DNA: One beautiful design into a permanent skill".
2
+ > Transcribed verbatim (em dashes normalised to hyphens). This is the rationale and the research trail behind `../SKILL.md`.
3
+
4
+ # Design DNA: One beautiful design into a permanent skill
5
+
6
+ > [!NOTE]
7
+ **The idea in one line.** A design loop finds you one beautiful thing. Design DNA turns that one thing into a skill you keep forever, so you can make more of it, in any format, without the look drifting.
8
+ [image: attachment:44015a64-bb3b-48e3-854f-ea1df12d3132:design-dna-card-v3.png]
9
+ > [!NOTE]
10
+ **Important: this is not only about "designs".** It is about Claude codifying **anything it built**. The winner from your loop might be a website, a poster, a motion graphic, a carousel or a deck. Same system, same file, same tests. The format is an output, not the subject.
11
+ [table_of_contents]
12
+
13
+ ---
14
+
15
+
16
+ ## The problem
17
+
18
+ You run a design loop. Lots of models make lots of options. One comes out beautiful.
19
+ Then it dies.
20
+ Nobody wrote down **why** it was beautiful. Next time you ask for "the same style" you get something close, then something a bit off, then something generic. By the fifth one it looks like every other AI design on the internet.
21
+ > [!NOTE]
22
+ This is not the model being lazy. Every rule you do not write down, the model has to guess. And it does not guess randomly. It guesses **the average of everything it has ever seen**. That average is what people call AI slop. Slop is just the sound of an unwritten rule.
23
+ So the answer is: write the rules down. But *which* rules, and how many? That turns out to be the whole game.
24
+
25
+ ---
26
+
27
+
28
+ ## The 60-second version
29
+
30
+ 1. Find a design you love.
31
+ 1. Take it apart. Measure it, do not describe it.
32
+ 1. Argue with yourself about which bits actually matter.
33
+ 1. Write the rules down as a file.
34
+ 1. Write **tests** that a bad copy would fail.
35
+ 1. Rebuild the original from your rules alone. Whatever you get wrong is a rule you forgot. Add it. Go again.
36
+ 1. Save the whole thing as a skill.
37
+ Step 6 is the one nobody does, and it is the one that works.
38
+
39
+ ---
40
+
41
+
42
+ ## The six things that actually make a design a design
43
+
44
+ Most people write down the wrong things. Here is what carries the look.
45
+ | Thing | What it means, plainly |
46
+ |---|---|
47
+ | **Ratios, not numbers** | "The headline is 96px" is nearly useless. "The headline is 8 times the body text, never under 6" is the actual style. The look lives in the **gap** between things, not in either thing. |
48
+ | **How much, not just what** | The same 3 colours at 60/30/10 and at 90/8/2 are two different designs. Always write down roughly what share of the page each colour covers. |
49
+ | **The one weird move** | Nearly every great design breaks its own rules exactly once. Type crossing a photo. A line poking past the margin. A giant number cut off by the edge. This is the most important single thing in the design, and it is the first thing you lose when you copy it, because you copy the system and this is a break from the system. |
50
+ | **The refusals** | If you list six colours, you have told the model it may use six. The real design used one accent on 3% of the page. The design's actual content was a **refusal**. Write refusals down. |
51
+ | **What is missing** | No shadows. No icons. No curves. Nothing centred. Absence is a design decision. Record it like you record anything else. |
52
+ | **Named layouts** | If you do not name the layouts, slide 8 will not match slide 1. You get the right colours in the wrong arrangement, which reads as sloppy. |
53
+
54
+ ---
55
+
56
+
57
+ ## The big decision: how much do you write down?
58
+
59
+ I ran two agents against each other on this. One argued for writing **everything** down. One argued that writing everything down is a trap. Both had real evidence. Here is how it resolved.
60
+ > [!NOTE]
61
+ **Write everything**
62
+ Anything you leave out gets guessed. Guessing is where the look dies. Real design systems (Material, Figma, Tailwind, the W3C token standard) are all exhaustive, and they are exhaustive for a reason.
63
+ > [!NOTE]
64
+ **Write almost nothing**
65
+ A copy can match every single value and still look generic. Models obey **fewer** rules as you add more of them. Anything in the middle of a long document gets ignored. The look lives in about nine moves.
66
+ **Both are right, about different documents.** That is the answer, and it is not a compromise.
67
+ > [!NOTE]
68
+ **Compile, do not paste.**
69
+ You keep two files. A big one for your records and your build tools. A tiny one for the model. The big one **never** goes in a prompt.
70
+ | | dna.json - the record | PROMPT dot md - the payload |
71
+ |---|---|---|
72
+ | Who reads it | You, and build tools | The model |
73
+ | How big | As big as it needs to be | **Hard cap: 2KB** |
74
+ | What is in it | Every measured value | Reference image, the weird move, 3-9 moves, the bans, one example |
75
+ | Rule | Never goes in a prompt | Never leaves out the image |
76
+ **Why the cap is real, not a preference:**
77
+ - The more rules you give a model, the **fewer** it follows. This is measured, and it drops steadily. A 200-rule spec is not 200 rules obeyed, it is a lottery over which ones get dropped, and you do not pick the winners.
78
+ - Anything in the middle of a long document gets recovered much worse than anything at the start or the end. Over 30% worse. So your best rule, sitting at line 147 of 400, is in the dead zone. That is why **the weird move gets its own slot near the top**.
79
+ - Style largely cannot be put into words at all. The best style-transfer research sends *content* through the text channel and *style* through the **image** channel, because fine-grained style resists description.
80
+ - The reference image is almost free. Image conditioning runs on its own pathway, so it does not eat the attention your words are competing for.
81
+ > [!NOTE]
82
+ **Always attach the reference image.** Highest-leverage move available, costs you almost nothing.
83
+
84
+ ---
85
+
86
+
87
+ ## The blueprint: what you need to know to rebuild any design
88
+
89
+ This is the answer to "if we wanted to reproduce this, what would we need?"
90
+ | Section | What it holds | Why it matters |
91
+ |---|---|---|
92
+ | `meta` | Name, source files, date, and anything you refuse to copy | Real logos and licensed photos get excluded. Copy the **system**, never the **marks**. |
93
+ | `soul` | One sentence, 3-5 adjectives, its family tree, how far away it is read from | The compression key. Read this alone and you are most of the way there. Read distance also sets your minimum type size. |
94
+ | `palette` | Colours with a **role** and a **coverage %** | Coverage is the most-skipped and most-decisive field in the whole document. |
95
+ | `type` | Families with fallbacks, and the display-to-body **ratio** | That ratio is a signature on its own. 8-to-1 and 2-to-1 are different designs with identical fonts. |
96
+ | `space` | Grid, margins, alignment, where the emptiness sits | Written as **percentages**, so one file drives a carousel and a slide with no rewrite. |
97
+ | `surface` | Grain, texture, edges, how photos are treated | What the thing is physically made of. |
98
+ | `signatures` | 3-9 named moves, written as **ratios** | The payload. Carry these and nothing else and it is still recognisable. |
99
+ | `weird_move` | The one break in the system | Its own slot so it can never get buried. |
100
+ | `archetypes` | The named layouts | Makes output #8 sit beside output #1 as a set. |
101
+ | `motion` | Curves, timings, and what **never** moves | Restraint is a signature too. |
102
+ | `voice` | Sentence length, headline shape, banned words | Copy is part of the design. Right layout, wrong sentence, broken look. |
103
+ | `bans` | 5 or more, written as absolutes | See below. These do the heavy lifting. |
104
+ | `tests` | 8 or more checks that can **fail** | The difference between a system and a mood board. |
105
+
106
+ ---
107
+
108
+
109
+ ## Why "never" beats "always"
110
+
111
+ > [!NOTE]
112
+ When your output looks generic, do not add a rule about what to do. **Add a ban.**
113
+ Two reasons, and both are real mechanisms rather than folklore.
114
+ **For image models**, a negative prompt is not advice. The sampler works out one prediction with your prompt and one with the negative, then moves **away** from the negative. It is the origin of the vector, on its own channel. It does not compete with the rest of your prompt.
115
+ **For any model**, a positive instruction has to out-vote the training average. "Use an asymmetric layout" is one weak vote against a landslide. "Never centre the hero" **deletes** the landslide from the options. And one ban can rule out a whole space in a single line: "never more than one accent colour" kills every multi-accent palette at once.
116
+ Bans are also checkable. "Is the hero centred?" has a yes or no answer. "Does it feel editorial?" does not.
117
+
118
+ ---
119
+
120
+
121
+ ## The step nobody does
122
+
123
+ > [!NOTE]
124
+ **Rebuild the original using only your spec. Then compare them.**
125
+ Every difference is a rule you forgot. Add it. Go again. Repeat until a stranger cannot tell the copy from the original.
126
+ This is the only honest test of whether your spec is finished. A spec that has never been used to rebuild its own source has never been tested at all.
127
+ Expect two or three rounds. Expect the gaps to be things you were completely sure were obvious.
128
+
129
+ ---
130
+
131
+
132
+ ## Tests that can fail
133
+
134
+ A spec with no failing test is a mood board with better formatting. Write 8 to 12. Binary and measurable.
135
+ **Good:**
136
+ - Accent colour covers under 8% of the canvas.
137
+ - No more than 3 type sizes in one frame.
138
+ - Largest-to-smallest type ratio is above 6 to 1.
139
+ - Smallest type is at least 28px at 1080px wide.
140
+ - The weird move is present, exactly once.
141
+ - Body copy stays under 65 characters per line.
142
+ - Squint from three metres. Does the weight sit in the same places as the reference?
143
+ **Not tests:** "feels premium", "looks clean". If two people could disagree on the answer, it is not a test.
144
+
145
+ ---
146
+
147
+
148
+ ## The JSON architecture
149
+
150
+ The shape of the file. Full schema with descriptions lives at `~/.claude/skills/design-dna/design-dna.schema.json`.
151
+ ```json
152
+ {
153
+ "meta": { "name", "slug", "source", "captured", "not_copied", "medium_of_origin" },
154
+ "soul": { "one_line", "adjectives", "lineage", "read_distance",
155
+ "energy": { "density", "variance", "contrast", "warmth" } },
156
+ "palette": { "colors": [{ "role", "hex", "name" }], "coverage", "mode", "banned" },
157
+ "type": { "families": [{ "role", "family", "fallback", "weights" }],
158
+ "scale": { "display_to_body_ratio", "steps", "max_sizes_per_frame" },
159
+ "treatment": { "display_tracking", "body_leading", "case", "measure" } },
160
+ "space": { "grid", "margin_pct", "gutter_pct", "alignment",
161
+ "rhythm", "negative_space", "safe_area" },
162
+ "surface": { "texture", "edges", "elevation", "imagery", "iconography" },
163
+ "signatures": [{ "move", "how", "when", "never" }],
164
+ "weird_move": { "what", "how", "why" },
165
+ "archetypes": [{ "id", "purpose", "anatomy", "content_shape" }],
166
+ "motion": { "easing", "durations", "entrances", "never_moves", "reduced_motion" },
167
+ "voice": { "register", "sentence_length", "headline_shape", "banned_words" },
168
+ "bans": [ "written as absolutes, 5 minimum" ],
169
+ "tests": [{ "id", "check", "fail_looks_like", "auto" }],
170
+ "reconstruction": { "attempted", "gaps_found", "passes" }
171
+ }
172
+ ```
173
+
174
+ ---
175
+
176
+
177
+ ## THE PROMPT
178
+
179
+ Paste this into any session. Attach the design. That is the whole setup.
180
+ ```markdown
181
+ You are a design forensics analyst. I am going to give you one design I love.
182
+
183
+ Your job is not to praise it, describe it, or make something like it. Your job is
184
+ to CODIFY it: reduce it to the smallest set of rules that will reproduce its
185
+ identity on completely different content, forever, across any medium.
186
+
187
+ The output is a reusable skill. Treat the design in front of you as evidence,
188
+ not as a brief.
189
+
190
+ ## THE STANDARD YOU ARE HELD TO
191
+
192
+ A specification that cannot fail is not a specification.
193
+
194
+ If every rule you write is one a bad output could still satisfy, you have written
195
+ a mood board. Every rule must be checkable against a finished piece, and capable
196
+ of returning FAIL.
197
+
198
+ ## WHAT ACTUALLY CARRIES A DESIGN'S IDENTITY
199
+
200
+ Read this before you start. Getting it wrong is the standard failure.
201
+
202
+ 1. RELATIONSHIPS, NOT VALUES. "The headline is 96px" is nearly worthless. "The
203
+ headline is 8x the body, never under 6x" is the identity. Style lives in the
204
+ ratios between elements. A list of measurements is exactly that information
205
+ thrown away.
206
+ 2. PROPORTIONS OF COLOUR, NOT JUST COLOUR. The same three hex codes at 60/30/10
207
+ and at 90/8/2 are two unrelated designs. Always record coverage.
208
+ 3. ONE BREAK IN THE SYSTEM. Almost every design worth copying has exactly one
209
+ deliberate exception: type crossing an image, a rule overshooting its margin,
210
+ a numeral clipped by the canvas edge. It is the highest-information element
211
+ present and the first thing a mechanical extraction loses, because extraction
212
+ looks for systems and this is a break from the system. Find it. Name it.
213
+ 4. REFUSALS, NOT JUST PERMISSIONS. Listing six colours tells a model it may use
214
+ six. If the reference uses one accent on 3% of the canvas, the design's real
215
+ content is a refusal. Write the refusals down.
216
+ 5. ABSENCE IS DESIGN. No shadows. No icons. No curves. Nothing centred. Record
217
+ what is missing with the same care as what is present.
218
+ 6. STRUCTURE, NOT ONLY STYLING. If a style has no named layouts, output #8 will
219
+ not sit beside output #1 as a set. You get consistent styling and
220
+ inconsistent structure, which reads as sloppiness.
221
+
222
+ ## RUN THIS IN SEVEN STEPS. SHOW YOUR WORK AT EACH.
223
+
224
+ ### STEP 1 - OBSERVE. Do not interpret.
225
+
226
+ Produce a flat inventory of literal observations. Measure, do not describe.
227
+
228
+ Sample real colours. Estimate what share of the canvas each covers. Count the
229
+ type sizes, the weights, the accent uses. Measure the ratio between largest and
230
+ smallest type. Note margins as a percentage of the canvas, not in pixels. Record
231
+ texture, grain, edges, image treatment. Write down what is absent.
232
+
233
+ No judgements yet. Interpretation here is how you end up specifying a design
234
+ that is not the one in front of you.
235
+
236
+ ### STEP 2 - DEBATE IT WITH YOURSELF. Two loops, honestly opposed.
237
+
238
+ LOOP A, THE MAXIMALIST. Argue: anything not written down will be improvised, and
239
+ improvisation is where consistency dies. List every property exhaustively.
240
+ Miss nothing.
241
+
242
+ LOOP B, THE MINIMALIST. Argue: a copy can match every value and still look
243
+ generic. Identity lives in a handful of moves and a wall of refusals. Name the
244
+ 3-9 moves that actually carry it, and the bans that keep output off the average.
245
+ Attack Loop A's list. Say which entries are load-bearing and which are trivia.
246
+
247
+ ADJUDICATE. For every property, ask:
248
+
249
+ If I changed this value, would the output stop looking like the reference?
250
+
251
+ Yes, it is load-bearing. No, it is trivia, and trivia dilutes attention.
252
+
253
+ Then resolve the debate the right way, which is NOT a compromise. Both sides are
254
+ correct about different documents:
255
+
256
+ - The EXHAUSTIVE record is for me and for build tools. Any size, because a
257
+ compiler does not sample.
258
+ - The PROMPT PAYLOAD is for a model with a finite attention budget. Hard cap:
259
+ 2KB of text. Compliance drops as rules pile up, and material in the middle of
260
+ a long document gets recovered far worse than material at either end.
261
+
262
+ ### STEP 3 - CODIFY. Write dna.json.
263
+
264
+ Fill these keys. Omit any that genuinely do not apply.
265
+
266
+ meta name, slug, source files, date, medium of origin,
267
+ not_copied (any real logo, wordmark or licensed image -
268
+ reproduce the SYSTEM, never the MARKS)
269
+ soul one_line (max 160 chars, concrete nouns, no marketing words),
270
+ 3-5 adjectives, lineage (Swiss editorial / 90s flyer / brutalist),
271
+ read_distance (thumb | arms-length | desk | room | street),
272
+ energy: density, variance, contrast, warmth - each 1-10
273
+ palette colors[]: role, hex, descriptive name ("dusty plum", never
274
+ "accent-500" - image and video models cannot read token names)
275
+ coverage: percentage of canvas per role, summing to ~100
276
+ banned: colour behaviours forbidden
277
+ type families[]: role, family, REQUIRED fallback, weights, licence risk
278
+ scale: display_to_body_ratio (the typographic signature),
279
+ steps, max_sizes_per_frame
280
+ treatment: tracking, leading, case, measure, numerals
281
+ space grid, margin_pct, gutter_pct, alignment, rhythm,
282
+ negative_space (where the emptiness is and how big),
283
+ safe_area per platform
284
+ USE PERCENTAGES so one spec drives a 1080x1350 carousel and a
285
+ 1920x1080 slide without a rewrite
286
+ surface texture (kind, opacity, scale, stacking order), edges, elevation,
287
+ imagery treatment, iconography
288
+ signatures[] 3-9. move (name it like a technique), how (AS A RATIO OR
289
+ RELATIONSHIP), when it appears, never (how it gets used wrong)
290
+ weird_move the single break in the system. Its own key, deliberately.
291
+ archetypes[] named layouts: id, purpose in a sequence, anatomy, content budget
292
+ motion easing curves, durations, entrances, what NEVER moves,
293
+ reduced-motion fallback. Omit for static work.
294
+ voice register, sentence length, headline shape, banned words.
295
+ Copy is part of the design.
296
+ bans[] minimum 5, written as absolutes
297
+ tests[] minimum 8. See Step 4.
298
+
299
+ ### STEP 4 - WRITE TESTS THAT CAN FAIL. Eight to twelve.
300
+
301
+ Binary and measurable:
302
+
303
+ - "Accent colour covers under 8% of the canvas."
304
+ - "No more than 3 type sizes in a single frame."
305
+ - "Largest-to-smallest type ratio is above 6:1."
306
+ - "Smallest type is at least 28px at 1080px canvas width."
307
+ - "The weird move is present, exactly once."
308
+ - "Body copy stays under 65 characters per line."
309
+ - "Squint from three metres. Does the mass distribution match the reference?"
310
+
311
+ Not tests: "feels premium", "looks clean". If two people could disagree about
312
+ the answer, it is not a test. Mark which ones a script could decide.
313
+
314
+ ### STEP 5 - RECONSTRUCT AND DIFF. Do not skip this.
315
+
316
+ Rebuild the original reference using only dna.json. Close the reference. Work
317
+ from the spec alone.
318
+
319
+ Put your rebuild beside the original. List every single difference.
320
+
321
+ Every difference is a field the spec forgot. Fold each one back in. Record what
322
+ was missing. Go again. Repeat until a stranger could not pick the copy from the
323
+ original.
324
+
325
+ This is the only honest test of completeness that exists. A spec that has never
326
+ been used to rebuild its own source has never been tested. Expect two or three
327
+ passes. Expect the gaps to be things you were sure were obvious.
328
+
329
+ ### STEP 6 - EMIT THE SKILL.
330
+
331
+ Write a folder named after meta.slug:
332
+
333
+ <slug>/
334
+ SKILL.md how to use this style
335
+ PROMPT.md the 2KB payload. THIS is what goes in a context window.
336
+ dna.json the full record. NEVER pasted into a prompt.
337
+ reference/ the original, kept forever
338
+ example/ one worked output, the canonical proof
339
+ tools/check.py the automatable tests, exits non-zero on failure
340
+
341
+ PROMPT.md is the file that matters. Order it exactly like this, because
342
+ attention is strongest at the two ends and weakest in the middle:
343
+
344
+ 1. The reference image, attached and named first
345
+ 2. soul.one_line
346
+ 3. The weird move, alone, unmissable
347
+ 4. The 3-9 signature moves, as ratios
348
+ 5. The bans, as absolutes
349
+ 6. Palette and type - roles and coverage only, not a full ramp
350
+ 7. Archetype names and when to use each
351
+ 8. The self-check, last
352
+
353
+ Nothing else. If it does not change what the output looks like from three metres
354
+ away, it belongs in dna.json, not here. To add a tenth signature you must delete
355
+ one. The cap is the point: it forces you to decide, and an uncapped spec just
356
+ ships your indecision.
357
+
358
+ End PROMPT.md with this line:
359
+
360
+ Before returning any output, run every test in the self-check. Name each test
361
+ and its result. If any fails, repair the output and run them again. Never
362
+ return output with a failing test and a note explaining it away.
363
+
364
+ ### STEP 7 - TELL ME WHAT YOU ARE UNSURE ABOUT.
365
+
366
+ List every value you inferred rather than measured, and every rule you are under
367
+ 70% confident in. These are where the style will drift first, and I would rather
368
+ know now.
369
+
370
+ ## RULES FOR YOU, THE ANALYST
371
+
372
+ - Never invent a value you could measure. If you cannot measure it, say so and
373
+ mark it inferred.
374
+ - Never copy a real logo, wordmark, licensed photograph or proprietary typeface.
375
+ Put them in meta.not_copied and substitute. Reproduce the system, never the
376
+ marks.
377
+ - Descriptive colour names, not systematic ones. "Dusty plum" travels to an
378
+ image model. "accent-500" does not.
379
+ - Every font family needs a fallback. Silent Arial substitution is the most
380
+ common way a reproduction dies quietly.
381
+ - When you are tempted to add a rule because output looks generic, add a ban
382
+ instead. A prohibition steers harder than a permission, and one ban can rule
383
+ out an entire space in a single line.
384
+ - One skill per style. Never merge two identities into one spec. The average of
385
+ two good designs is a bad design.
386
+
387
+ Begin at Step 1. Show your work.
388
+ ```
389
+
390
+ ---
391
+
392
+
393
+ ## When it goes wrong
394
+
395
+ | What you see | What caused it | Fix |
396
+ |---|---|---|
397
+ | Matches every value, still looks generic | Moves missing, or too many | Cut to 3-9, write them as ratios |
398
+ | Drifts back to the stock AI look | Not enough bans | Bans should outnumber positive style rules |
399
+ | Slide 1 and slide 8 do not match | No named layouts | Add archetypes |
400
+ | The accent reads as a theme, not an accent | No coverage percentages | Add them |
401
+ | Works on a slide, breaks on a carousel | Pixel values in the spacing | Convert to percentages |
402
+ | Obeys some rules, ignores others, differently each run | Prompt is over the cap | Cut to 2KB |
403
+ | Your best rule keeps getting ignored | It is buried in the middle | Move it to the top or the bottom |
404
+ | Fine, but forgettable | No weird move | Find the one break in the system |
405
+ | Spec feels complete, output is wrong | You skipped Step 5 | Rebuild the original from the spec. Compare. |
406
+
407
+ ---
408
+
409
+
410
+ ## Why any of this works
411
+
412
+ <details><summary>**The research behind it.** Click to open.</summary>
413
+ This is not opinion. Each design decision above traces to a specific result.
414
+ - [Lost in the Middle](https://arxiv.org/abs/2307.03172) - models recover information from the middle of a long context over 30% worse than from either end, across six model families. This is why the weird move gets its own slot near the top and the self-check goes last.
415
+ - [FollowBench](https://arxiv.org/abs/2310.20410) and [RECAST](https://arxiv.org/html/2505.19030) - instruction compliance falls steadily as you add constraints. This is why the prompt payload is capped.
416
+ - [InstantStyle](https://arxiv.org/abs/2404.02733) - style is underdetermined and much of it cannot be described in words at all. Their fix is to route content through the text encoder and style through the image encoder. This is why the reference image is mandatory.
417
+ - [IP-Adapter](https://arxiv.org/abs/2308.06721) - image conditioning gets its own decoupled cross-attention pathway, so the reference image does not compete with your words for attention. 22M adapter parameters match a fully fine-tuned model. This is why the image is close to free.
418
+ - [A Neural Algorithm of Artistic Style](https://ar5iv.labs.arxiv.org/html/1508.06576) - style is formally the **correlations between** features, not the features themselves. A flat token list is precisely the part with the correlations discarded. This is why signatures are written as ratios.
419
+ - [Verbalized Sampling](https://arxiv.org/pdf/2510.01171) - human preference data carries a measurable bias toward typical output, and training bakes it in, so models default to a house style. That house style is slop. This is why bans matter.
420
+ - [W3C Design Tokens Format Module](https://www.designtokens.org/TR/drafts/format/) and [Style Dictionary](https://styledictionary.com/info/architecture/) - the one-spec-many-outputs pattern this borrows, already proven across a decade of production use.
421
+ - [Anthropic on context engineering](https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents) - "the smallest possible set of high-signal tokens".
422
+ </details>
423
+
424
+ ---
425
+
426
+
427
+ ## Where the files are
428
+
429
+ | File | What it is |
430
+ |---|---|
431
+ | `~/.claude/skills/design-dna/SKILL.md` | The skill. Run it with `/design-dna`. |
432
+ | `~/.claude/skills/design-dna/PROMPT.md` | The standalone prompt, same as above. |
433
+ | `~/.claude/skills/design-dna/design-dna.schema.json` | The full schema, every field explained. |
434
+ | `~/.claude/skills/design-dna/design-dna-card.html` | Source for the card at the top. Re-render any time. |
435
+ > [!NOTE]
436
+ **How to use it.** Run your design loop. Pick the winner. Type `/design-dna` and point it at the winner. You get a new skill named after the style. From then on, that look is a command, not a memory.