@ericrisco/rsc 1.0.32 → 1.0.34
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.
- package/README.md +1 -1
- package/manifest.json +43 -2
- package/package.json +1 -1
- package/scripts/doctor.js +124 -3
- package/scripts/lib/domains.js +1 -1
- package/scripts/lib/recommend.js +2 -0
- package/scripts/rsc.js +5 -0
- package/skills/design/SKILL.md +1 -1
- package/skills/design-dna/PROMPT.md +211 -0
- package/skills/design-dna/SKILL.md +139 -0
- package/skills/design-dna/design-dna.schema.json +230 -0
- package/skills/design-dna/evals/README.md +64 -0
- package/skills/design-dna/evals/cases.yaml +68 -0
- package/skills/design-dna/references/method.md +436 -0
- package/skills/design-dna/scripts/emit.py +164 -0
- package/skills/design-dna/templates/PROMPT.md.tmpl +42 -0
- package/skills/design-dna/templates/SKILL.md.tmpl +42 -0
- package/skills/design-dna/templates/check.py.tmpl +143 -0
- package/skills/design-eng/SKILL.md +3 -1
- package/skills/design-loop/SKILL.md +146 -0
- package/skills/design-loop/evals/README.md +56 -0
- package/skills/design-loop/evals/cases.yaml +60 -0
package/README.md
CHANGED
|
@@ -378,7 +378,7 @@ Three engines + engine-agnostic disciplines. Every engine skill pins the current
|
|
|
378
378
|
|
|
379
379
|
### 🎨 Design & content craft
|
|
380
380
|
|
|
381
|
-
[design](skills/design/) · [presentations](skills/presentations/) · [course-storytelling](skills/course-storytelling/) · [course-builder](skills/course-builder/) · [technical-writing](skills/technical-writing/) · [translation-l10n](skills/translation-l10n/)
|
|
381
|
+
[design-loop](skills/design-loop/) · [design](skills/design/) · [design-dna](skills/design-dna/) · [presentations](skills/presentations/) · [course-storytelling](skills/course-storytelling/) · [course-builder](skills/course-builder/) · [technical-writing](skills/technical-writing/) · [translation-l10n](skills/translation-l10n/)
|
|
382
382
|
|
|
383
383
|
### 🧠 Knowledge & meta
|
|
384
384
|
|
package/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.0.34",
|
|
3
3
|
"counts": {
|
|
4
|
-
"skills":
|
|
4
|
+
"skills": 278
|
|
5
5
|
},
|
|
6
6
|
"skills": [
|
|
7
7
|
{
|
|
@@ -1404,6 +1404,27 @@
|
|
|
1404
1404
|
"conversion"
|
|
1405
1405
|
],
|
|
1406
1406
|
"recommends": [
|
|
1407
|
+
"design-loop",
|
|
1408
|
+
"design-dna",
|
|
1409
|
+
"nextjs",
|
|
1410
|
+
"marketing"
|
|
1411
|
+
],
|
|
1412
|
+
"profiles": []
|
|
1413
|
+
},
|
|
1414
|
+
{
|
|
1415
|
+
"id": "design-dna",
|
|
1416
|
+
"description": "Use when a design has won and its look must survive: codify it into a permanent style skill with measured ratios, bans and tests that can fail, then build new pieces in that exact look. Fires on 'turn this into a skill', 'keep the same style', 'my output drifted'. NOT finding the winner (that is `design-loop`), NOT the words (that is `marketing`).",
|
|
1417
|
+
"tags": [
|
|
1418
|
+
"design",
|
|
1419
|
+
"style",
|
|
1420
|
+
"dna",
|
|
1421
|
+
"codify",
|
|
1422
|
+
"skill-factory",
|
|
1423
|
+
"consistency"
|
|
1424
|
+
],
|
|
1425
|
+
"recommends": [
|
|
1426
|
+
"design-loop",
|
|
1427
|
+
"design",
|
|
1407
1428
|
"nextjs",
|
|
1408
1429
|
"marketing"
|
|
1409
1430
|
],
|
|
@@ -1420,6 +1441,7 @@
|
|
|
1420
1441
|
"craft"
|
|
1421
1442
|
],
|
|
1422
1443
|
"recommends": [
|
|
1444
|
+
"design-loop",
|
|
1423
1445
|
"animate",
|
|
1424
1446
|
"review-animations",
|
|
1425
1447
|
"apple-design",
|
|
@@ -1430,6 +1452,25 @@
|
|
|
1430
1452
|
"full"
|
|
1431
1453
|
]
|
|
1432
1454
|
},
|
|
1455
|
+
{
|
|
1456
|
+
"id": "design-loop",
|
|
1457
|
+
"description": "Use when something must be built well and there is a real reference it should beat: turn what makes the reference good into measured mechanisms, then run a builder and three fresh-context critics until all three pass. Fires on 'design loop', 'make it as good as <site>', 'it looks generic'. NOT keeping an already-won look (that is `design-dna`).",
|
|
1458
|
+
"tags": [
|
|
1459
|
+
"design",
|
|
1460
|
+
"critique",
|
|
1461
|
+
"loop",
|
|
1462
|
+
"reference",
|
|
1463
|
+
"quality",
|
|
1464
|
+
"convergence"
|
|
1465
|
+
],
|
|
1466
|
+
"recommends": [
|
|
1467
|
+
"design",
|
|
1468
|
+
"design-dna",
|
|
1469
|
+
"marketing",
|
|
1470
|
+
"nextjs"
|
|
1471
|
+
],
|
|
1472
|
+
"profiles": []
|
|
1473
|
+
},
|
|
1433
1474
|
{
|
|
1434
1475
|
"id": "digitalocean",
|
|
1435
1476
|
"description": "Use when deploying or operating a workload on DigitalOcean — Droplet vs App Platform vs Functions, doctl, app spec YAML, Managed Postgres/MySQL/Valkey on the VPC, S3-compatible Spaces + CDN. NOT host-agnostic CI/CD or rollback strategy (that is `deployment`), NOT a bare Hetzner VPS (that is `hetzner`), NOT another managed PaaS (that is `railway`).",
|
package/package.json
CHANGED
package/scripts/doctor.js
CHANGED
|
@@ -93,32 +93,142 @@ function alwaysOnBytesFor(scopeRoot, settingsRaw) {
|
|
|
93
93
|
return bytesOf(join(scopeRoot, '.rsc', 'skills', 'suggest', 'SKILL.md'));
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
// Every hook rsc wires, as a table rather than a chain of `if`s: adding one is a row, and
|
|
97
|
+
// tests/doctor-hook-counts.test.js iterates it, so a hook added without a row fails the suite instead
|
|
98
|
+
// of shipping uncounted. `needle` is the SCRIPT PATH, never the bare `.rsc` — a user's own hook that
|
|
99
|
+
// merely mentions the directory must not be counted as ours.
|
|
100
|
+
//
|
|
101
|
+
// `injects` marks the two hooks that put text into the conversation. It matters because a duplicated
|
|
102
|
+
// guard costs processes, not bytes, and conflating the two is how this report lied in the first place.
|
|
103
|
+
export const RSC_HOOKS = [
|
|
104
|
+
{ id: 'session-start', label: 'session-start', needle: '.rsc/session-start.', injects: 'sessionStart' },
|
|
105
|
+
{ id: 'userprompt-gate', label: 'userprompt-gate', needle: '.rsc/userprompt-gate.', injects: 'perTurn' },
|
|
106
|
+
{ id: 'worklog-checkpoint', label: 'worklog-checkpoint', needle: '.rsc/worklog-checkpoint.', injects: null },
|
|
107
|
+
{ id: 'ship-guard', label: 'ship-guard', needle: '.rsc/ship-guard.', injects: null },
|
|
108
|
+
{ id: 'danger-guard', label: 'danger-guard', needle: '.rsc/danger-guard.', injects: null },
|
|
109
|
+
{ id: 'gitmoji-guard', label: 'gitmoji-guard', needle: '.rsc/gitmoji-guard.', injects: null },
|
|
110
|
+
// The bash-era form, still retired by unwireHook. If uninstall knows how to remove it, the report
|
|
111
|
+
// has to know how to count it.
|
|
112
|
+
{ id: 'legacy-cat-form', label: 'legacy suggest hook', needle: 'skills/rsc/suggest', injects: 'sessionStart' },
|
|
113
|
+
];
|
|
114
|
+
|
|
115
|
+
// Separators come from whatever platform installed: JSON escapes a Windows backslash as a pair, so
|
|
116
|
+
// the haystack is normalized before comparing. Same lesson as targets/claude.js, same one-liner.
|
|
117
|
+
const entryWiring = (entry) => JSON.stringify(entry).replace(/\\\\/g, '/');
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* How many times each rsc hook is wired, per event.
|
|
121
|
+
* @returns {{perEvent: Object<string, Object<string, number>>, indeterminate: string[]}}
|
|
122
|
+
*/
|
|
123
|
+
export function countHookEntries(settings) {
|
|
124
|
+
const perEvent = {};
|
|
125
|
+
const indeterminate = [];
|
|
126
|
+
const hooks = settings && typeof settings === 'object' ? settings.hooks : null;
|
|
127
|
+
if (!hooks || typeof hooks !== 'object') return { perEvent, indeterminate };
|
|
128
|
+
|
|
129
|
+
for (const [event, entries] of Object.entries(hooks)) {
|
|
130
|
+
// A hand-edited file can put anything here. An event we cannot read is REPORTED, never counted as
|
|
131
|
+
// zero — a silent zero is exactly the "all clear" this whole delivery exists to stop.
|
|
132
|
+
if (!Array.isArray(entries)) { indeterminate.push(event); continue; }
|
|
133
|
+
for (const entry of entries) {
|
|
134
|
+
const wiring = entryWiring(entry);
|
|
135
|
+
for (const hook of RSC_HOOKS) {
|
|
136
|
+
if (!wiring.includes(hook.needle)) continue;
|
|
137
|
+
perEvent[event] ||= {};
|
|
138
|
+
perEvent[event][hook.id] = (perEvent[event][hook.id] || 0) + 1;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return { perEvent, indeterminate };
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// The most copies any one hook has, per injection channel — that is the multiplier that channel pays.
|
|
146
|
+
function maxCopies(perEvent, channel) {
|
|
147
|
+
let most = 1;
|
|
148
|
+
for (const byHook of Object.values(perEvent)) {
|
|
149
|
+
for (const [id, n] of Object.entries(byHook)) {
|
|
150
|
+
const hook = RSC_HOOKS.find((h) => h.id === id);
|
|
151
|
+
if (hook && hook.injects === channel && n > most) most = n;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
return most;
|
|
155
|
+
}
|
|
156
|
+
|
|
96
157
|
function readScope(scopeRoot, label) {
|
|
97
158
|
const settingsPath = join(scopeRoot, '.claude', 'settings.json');
|
|
98
159
|
if (!existsSync(settingsPath)) {
|
|
99
160
|
return { label, root: scopeRoot, wired: false, status: 'ok', alwaysOnBytes: 0, perTurnBytes: 0, version: null };
|
|
100
161
|
}
|
|
101
162
|
let raw;
|
|
163
|
+
let settings;
|
|
102
164
|
try {
|
|
103
165
|
raw = readFileSync(settingsPath, 'utf8');
|
|
104
|
-
JSON.parse(raw); // a scope we cannot parse is reported, not guessed at
|
|
166
|
+
settings = JSON.parse(raw); // a scope we cannot parse is reported, not guessed at
|
|
105
167
|
} catch {
|
|
106
168
|
return { label, root: scopeRoot, wired: true, status: 'unknown', alwaysOnBytes: 0, perTurnBytes: 0, version: null };
|
|
107
169
|
}
|
|
108
170
|
const wired = raw.includes('.rsc/') || raw.includes('.rsc\\\\');
|
|
109
171
|
let version = null;
|
|
110
172
|
try { version = readFileSync(join(scopeRoot, '.rsc', '.version'), 'utf8').trim() || null; } catch { /* unknown */ }
|
|
173
|
+
|
|
174
|
+
const { perEvent, indeterminate } = countHookEntries(settings);
|
|
175
|
+
// The context regime is a STATIC fact, not a caveat: the repeated body is suppressed because the
|
|
176
|
+
// hook calls the single-shot guard, and that guard is a file on disk. Present → the body lands once
|
|
177
|
+
// however many entries fire. Absent (an install older than the guard) → every entry injects.
|
|
178
|
+
//
|
|
179
|
+
// Measured during clarify: four entries sharing a session_id cost ~1.27× context, not 4×. A figure
|
|
180
|
+
// that multiplied unconditionally would be the same lie that started this spec, aimed the other way.
|
|
181
|
+
const dedupeGuard = existsSync(join(scopeRoot, '.rsc', 'hook-once.mjs'));
|
|
182
|
+
const bodyCopies = dedupeGuard ? 1 : maxCopies(perEvent, 'sessionStart');
|
|
183
|
+
const gateCopies = dedupeGuard ? 1 : maxCopies(perEvent, 'perTurn');
|
|
184
|
+
|
|
111
185
|
return {
|
|
112
186
|
label,
|
|
113
187
|
root: scopeRoot,
|
|
114
188
|
wired,
|
|
115
189
|
status: 'ok',
|
|
116
190
|
version,
|
|
117
|
-
|
|
118
|
-
|
|
191
|
+
hookCounts: perEvent,
|
|
192
|
+
hookCountsUnknown: indeterminate.length ? indeterminate : null,
|
|
193
|
+
dedupeGuard,
|
|
194
|
+
alwaysOnBytes: wired ? alwaysOnBytesFor(scopeRoot, raw) * bodyCopies : 0,
|
|
195
|
+
perTurnBytes: wired && raw.includes('userprompt-gate') ? Buffer.byteLength(SDD_GATE_TEXT) * gateCopies : 0,
|
|
119
196
|
};
|
|
120
197
|
}
|
|
121
198
|
|
|
199
|
+
// One finding per scope that has any hook wired more than once. Both costs are named, because they
|
|
200
|
+
// are different quantities: processes are 4× unconditionally, bytes only when the guard is missing.
|
|
201
|
+
function duplicateEntryFindings(scopes) {
|
|
202
|
+
const out = [];
|
|
203
|
+
for (const scope of scopes) {
|
|
204
|
+
if (scope.status !== 'ok' || !scope.hookCounts) continue;
|
|
205
|
+
const repeated = [];
|
|
206
|
+
for (const [event, byHook] of Object.entries(scope.hookCounts)) {
|
|
207
|
+
for (const [id, n] of Object.entries(byHook)) {
|
|
208
|
+
if (n > 1) repeated.push({ event, id, n, label: RSC_HOOKS.find((h) => h.id === id)?.label || id });
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
if (!repeated.length) continue;
|
|
212
|
+
const worst = Math.max(...repeated.map((r) => r.n));
|
|
213
|
+
const list = repeated.map((r) => `${r.event}/${r.label} ×${r.n}`).join(', ');
|
|
214
|
+
const contextNote = scope.dedupeGuard
|
|
215
|
+
? 'Context cost stays near 1× — the single-shot guard suppresses the repeated always-on body '
|
|
216
|
+
+ '(the residue is the banners printed outside it).'
|
|
217
|
+
: `Context cost is the full ${worst}× — this scope has no single-shot guard materialized, so every `
|
|
218
|
+
+ 'entry injects the always-on body again.';
|
|
219
|
+
out.push({
|
|
220
|
+
id: 'duplicate-hook-entries',
|
|
221
|
+
severity: 'high',
|
|
222
|
+
summary: `The ${scope.label} scope wires the same hook more than once: ${list}. `
|
|
223
|
+
+ `Execution cost is ${worst}× processes per event — every session start, every turn, and every `
|
|
224
|
+
+ `Bash command spawns that many. ${contextNote}`,
|
|
225
|
+
action: 'Re-run an install or sync with a current rsc (`npx @ericrisco/rsc@latest`); one pass '
|
|
226
|
+
+ 'collapses the extra copies. No need to hand-edit settings.json.',
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
return out;
|
|
230
|
+
}
|
|
231
|
+
|
|
122
232
|
// Frontmatter `description` of an installed skill — the part of a skill that is ALWAYS in
|
|
123
233
|
// context, whether or not the skill is ever invoked. Cheap to parse, and the figure that
|
|
124
234
|
// matters most as the catalog grows.
|
|
@@ -165,7 +275,18 @@ export function contextBudget({ target, home = homedir(), cwd = process.cwd() }
|
|
|
165
275
|
+ 'root, or update both to a version that de-duplicates at runtime.',
|
|
166
276
|
});
|
|
167
277
|
}
|
|
278
|
+
findings.push(...duplicateEntryFindings(scopes));
|
|
168
279
|
for (const s of scopes) {
|
|
280
|
+
if (s.hookCountsUnknown) {
|
|
281
|
+
findings.push({
|
|
282
|
+
id: 'indeterminate-hook-event',
|
|
283
|
+
severity: 'low',
|
|
284
|
+
summary: `In the ${s.label} scope, ${s.hookCountsUnknown.join(', ')} is not a list of hook entries, `
|
|
285
|
+
+ 'so its copies cannot be counted. A count this report cannot make is said out loud, never '
|
|
286
|
+
+ 'reported as zero.',
|
|
287
|
+
action: 'Fix that entry in settings.json (or remove it), then re-run `rsc doctor`.',
|
|
288
|
+
});
|
|
289
|
+
}
|
|
169
290
|
if (s.status === 'unknown') {
|
|
170
291
|
findings.push({
|
|
171
292
|
id: 'unreadable-scope',
|
package/scripts/lib/domains.js
CHANGED
|
@@ -25,7 +25,7 @@ export const DOMAINS = [
|
|
|
25
25
|
{ title: 'Ship & operate — devops', ids: ['docker', 'github-actions', 'git-workflow', 'domains-dns', 'monitoring', 'email-deliverability', 'scaling', 'deployment', 'deprecation'] },
|
|
26
26
|
{ title: 'Ship & operate — quality & security', ids: ['code-review', 'security-scan', 'secure-coding', 'testing-py', 'testing-web', 'testing-go', 'e2e-testing', 'accessibility', 'performance', 'error-handling', 'observability'] },
|
|
27
27
|
{ title: 'Motion & interface craft', ids: ['design-eng', 'animate', 'animate-expo', 'review-animations', 'improve-animations', 'find-animation-opportunities', 'animation-vocabulary', 'apple-design', 'prototype'] },
|
|
28
|
-
{ title: 'Design & content craft', ids: ['design', 'presentations', 'course-storytelling', 'course-builder', 'technical-writing', 'translation-l10n'] },
|
|
28
|
+
{ title: 'Design & content craft', ids: ['design-loop', 'design', 'design-dna', 'presentations', 'course-storytelling', 'course-builder', 'technical-writing', 'translation-l10n'] },
|
|
29
29
|
{ title: 'Knowledge & meta', ids: ['knowledge-ops', 'codebase-onboarding', 'research-ops', 'decision-records', 'continuous-learning', 'skill-scout', 'context-budget', 'roast-me', 'fable-operator'] },
|
|
30
30
|
];
|
|
31
31
|
|
package/scripts/lib/recommend.js
CHANGED
|
@@ -11,6 +11,8 @@ const OUTCOMES = {
|
|
|
11
11
|
go: 'Your Go backend service',
|
|
12
12
|
postgresdb: 'Store your data reliably',
|
|
13
13
|
design: 'Make it look good and convert',
|
|
14
|
+
'design-loop': 'Make it as good as the site you admire',
|
|
15
|
+
'design-dna': 'Keep every page looking like yours',
|
|
14
16
|
marketing: 'Copy that sells',
|
|
15
17
|
presentations: 'On-brand presentations',
|
|
16
18
|
'course-storytelling': 'Teach so it actually lands',
|
package/scripts/rsc.js
CHANGED
|
@@ -144,6 +144,11 @@ function printContextBudget(b) {
|
|
|
144
144
|
}
|
|
145
145
|
for (const s of b.scopes.filter((x) => x.wired)) {
|
|
146
146
|
say(` Scope ${s.label.padEnd(8)}: ${s.root}${s.version ? ` (${s.version})` : ''}${s.status === 'unknown' ? ' — UNREADABLE' : ''}`);
|
|
147
|
+
// Copies are printed only when there is something to see. A line saying "×1" on every healthy
|
|
148
|
+
// box is noise, and noise is what gets a report skimmed instead of read.
|
|
149
|
+
const repeated = Object.entries(s.hookCounts || {})
|
|
150
|
+
.flatMap(([event, byHook]) => Object.entries(byHook).filter(([, n]) => n > 1).map(([id, n]) => `${event}/${id} ×${n}`));
|
|
151
|
+
if (repeated.length) say(` Hook copies : ${repeated.join(' · ')}`);
|
|
147
152
|
}
|
|
148
153
|
for (const f of b.findings) {
|
|
149
154
|
say(`\n [${f.severity.toUpperCase()}] ${f.summary}`);
|
package/skills/design/SKILL.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
name: design
|
|
3
3
|
description: "Use when designing or refreshing a web UI or landing page — visual concept, type/color/spacing/motion tokens, composition, rescuing a UI that reads AI-generic, or a graded design review. Brand-grounded and research-first; ships Tailwind v4 + Next.js 15 under WCAG 2.2 AA and Core Web Vitals budgets. NOT the words on the page (that is `marketing`), NOT the App Router build (that is `nextjs`)."
|
|
4
4
|
tags: [design, ux, ui, landing, conversion]
|
|
5
|
-
recommends: [nextjs, marketing]
|
|
5
|
+
recommends: [design-loop, design-dna, nextjs, marketing]
|
|
6
6
|
origin: risco
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
<!-- design-dna: the standalone prompt.
|
|
2
|
+
Paste into any session and attach the winning design. Nothing else is needed.
|
|
3
|
+
Kept verbatim from the source method; edit only if you also edit ../SKILL.md. -->
|
|
4
|
+
|
|
5
|
+
You are a design forensics analyst. I am going to give you one design I love.
|
|
6
|
+
|
|
7
|
+
Your job is not to praise it, describe it, or make something like it. Your job is
|
|
8
|
+
to CODIFY it: reduce it to the smallest set of rules that will reproduce its
|
|
9
|
+
identity on completely different content, forever, across any medium.
|
|
10
|
+
|
|
11
|
+
The output is a reusable skill. Treat the design in front of you as evidence,
|
|
12
|
+
not as a brief.
|
|
13
|
+
|
|
14
|
+
## THE STANDARD YOU ARE HELD TO
|
|
15
|
+
|
|
16
|
+
A specification that cannot fail is not a specification.
|
|
17
|
+
|
|
18
|
+
If every rule you write is one a bad output could still satisfy, you have written
|
|
19
|
+
a mood board. Every rule must be checkable against a finished piece, and capable
|
|
20
|
+
of returning FAIL.
|
|
21
|
+
|
|
22
|
+
## WHAT ACTUALLY CARRIES A DESIGN'S IDENTITY
|
|
23
|
+
|
|
24
|
+
Read this before you start. Getting it wrong is the standard failure.
|
|
25
|
+
|
|
26
|
+
1. RELATIONSHIPS, NOT VALUES. "The headline is 96px" is nearly worthless. "The
|
|
27
|
+
headline is 8x the body, never under 6x" is the identity. Style lives in the
|
|
28
|
+
ratios between elements. A list of measurements is exactly that information
|
|
29
|
+
thrown away.
|
|
30
|
+
2. PROPORTIONS OF COLOUR, NOT JUST COLOUR. The same three hex codes at 60/30/10
|
|
31
|
+
and at 90/8/2 are two unrelated designs. Always record coverage.
|
|
32
|
+
3. ONE BREAK IN THE SYSTEM. Almost every design worth copying has exactly one
|
|
33
|
+
deliberate exception: type crossing an image, a rule overshooting its margin,
|
|
34
|
+
a numeral clipped by the canvas edge. It is the highest-information element
|
|
35
|
+
present and the first thing a mechanical extraction loses, because extraction
|
|
36
|
+
looks for systems and this is a break from the system. Find it. Name it.
|
|
37
|
+
4. REFUSALS, NOT JUST PERMISSIONS. Listing six colours tells a model it may use
|
|
38
|
+
six. If the reference uses one accent on 3% of the canvas, the design's real
|
|
39
|
+
content is a refusal. Write the refusals down.
|
|
40
|
+
5. ABSENCE IS DESIGN. No shadows. No icons. No curves. Nothing centred. Record
|
|
41
|
+
what is missing with the same care as what is present.
|
|
42
|
+
6. STRUCTURE, NOT ONLY STYLING. If a style has no named layouts, output #8 will
|
|
43
|
+
not sit beside output #1 as a set. You get consistent styling and
|
|
44
|
+
inconsistent structure, which reads as sloppiness.
|
|
45
|
+
|
|
46
|
+
## RUN THIS IN SEVEN STEPS. SHOW YOUR WORK AT EACH.
|
|
47
|
+
|
|
48
|
+
### STEP 1 - OBSERVE. Do not interpret.
|
|
49
|
+
|
|
50
|
+
Produce a flat inventory of literal observations. Measure, do not describe.
|
|
51
|
+
|
|
52
|
+
Sample real colours. Estimate what share of the canvas each covers. Count the
|
|
53
|
+
type sizes, the weights, the accent uses. Measure the ratio between largest and
|
|
54
|
+
smallest type. Note margins as a percentage of the canvas, not in pixels. Record
|
|
55
|
+
texture, grain, edges, image treatment. Write down what is absent.
|
|
56
|
+
|
|
57
|
+
No judgements yet. Interpretation here is how you end up specifying a design
|
|
58
|
+
that is not the one in front of you.
|
|
59
|
+
|
|
60
|
+
### STEP 2 - DEBATE IT WITH YOURSELF. Two loops, honestly opposed.
|
|
61
|
+
|
|
62
|
+
LOOP A, THE MAXIMALIST. Argue: anything not written down will be improvised, and
|
|
63
|
+
improvisation is where consistency dies. List every property exhaustively.
|
|
64
|
+
Miss nothing.
|
|
65
|
+
|
|
66
|
+
LOOP B, THE MINIMALIST. Argue: a copy can match every value and still look
|
|
67
|
+
generic. Identity lives in a handful of moves and a wall of refusals. Name the
|
|
68
|
+
3-9 moves that actually carry it, and the bans that keep output off the average.
|
|
69
|
+
Attack Loop A's list. Say which entries are load-bearing and which are trivia.
|
|
70
|
+
|
|
71
|
+
ADJUDICATE. For every property, ask:
|
|
72
|
+
|
|
73
|
+
If I changed this value, would the output stop looking like the reference?
|
|
74
|
+
|
|
75
|
+
Yes, it is load-bearing. No, it is trivia, and trivia dilutes attention.
|
|
76
|
+
|
|
77
|
+
Then resolve the debate the right way, which is NOT a compromise. Both sides are
|
|
78
|
+
correct about different documents:
|
|
79
|
+
|
|
80
|
+
- The EXHAUSTIVE record is for me and for build tools. Any size, because a
|
|
81
|
+
compiler does not sample.
|
|
82
|
+
- The PROMPT PAYLOAD is for a model with a finite attention budget. Hard cap:
|
|
83
|
+
2KB of text. Compliance drops as rules pile up, and material in the middle of
|
|
84
|
+
a long document gets recovered far worse than material at either end.
|
|
85
|
+
|
|
86
|
+
### STEP 3 - CODIFY. Write dna.json.
|
|
87
|
+
|
|
88
|
+
Fill these keys. Omit any that genuinely do not apply.
|
|
89
|
+
|
|
90
|
+
meta name, slug, source files, date, medium of origin,
|
|
91
|
+
not_copied (any real logo, wordmark or licensed image -
|
|
92
|
+
reproduce the SYSTEM, never the MARKS)
|
|
93
|
+
soul one_line (max 160 chars, concrete nouns, no marketing words),
|
|
94
|
+
3-5 adjectives, lineage (Swiss editorial / 90s flyer / brutalist),
|
|
95
|
+
read_distance (thumb | arms-length | desk | room | street),
|
|
96
|
+
energy: density, variance, contrast, warmth - each 1-10
|
|
97
|
+
palette colors[]: role, hex, descriptive name ("dusty plum", never
|
|
98
|
+
"accent-500" - image and video models cannot read token names)
|
|
99
|
+
coverage: percentage of canvas per role, summing to ~100
|
|
100
|
+
banned: colour behaviours forbidden
|
|
101
|
+
type families[]: role, family, REQUIRED fallback, weights, licence risk
|
|
102
|
+
scale: display_to_body_ratio (the typographic signature),
|
|
103
|
+
steps, max_sizes_per_frame
|
|
104
|
+
treatment: tracking, leading, case, measure, numerals
|
|
105
|
+
space grid, margin_pct, gutter_pct, alignment, rhythm,
|
|
106
|
+
negative_space (where the emptiness is and how big),
|
|
107
|
+
safe_area per platform
|
|
108
|
+
USE PERCENTAGES so one spec drives a 1080x1350 carousel and a
|
|
109
|
+
1920x1080 slide without a rewrite
|
|
110
|
+
surface texture (kind, opacity, scale, stacking order), edges, elevation,
|
|
111
|
+
imagery treatment, iconography
|
|
112
|
+
signatures[] 3-9. move (name it like a technique), how (AS A RATIO OR
|
|
113
|
+
RELATIONSHIP), when it appears, never (how it gets used wrong)
|
|
114
|
+
weird_move the single break in the system. Its own key, deliberately.
|
|
115
|
+
archetypes[] named layouts: id, purpose in a sequence, anatomy, content budget
|
|
116
|
+
motion easing curves, durations, entrances, what NEVER moves,
|
|
117
|
+
reduced-motion fallback. Omit for static work.
|
|
118
|
+
voice register, sentence length, headline shape, banned words.
|
|
119
|
+
Copy is part of the design.
|
|
120
|
+
bans[] minimum 5, written as absolutes
|
|
121
|
+
tests[] minimum 8. See Step 4.
|
|
122
|
+
|
|
123
|
+
### STEP 4 - WRITE TESTS THAT CAN FAIL. Eight to twelve.
|
|
124
|
+
|
|
125
|
+
Binary and measurable:
|
|
126
|
+
|
|
127
|
+
- "Accent colour covers under 8% of the canvas."
|
|
128
|
+
- "No more than 3 type sizes in a single frame."
|
|
129
|
+
- "Largest-to-smallest type ratio is above 6:1."
|
|
130
|
+
- "Smallest type is at least 28px at 1080px canvas width."
|
|
131
|
+
- "The weird move is present, exactly once."
|
|
132
|
+
- "Body copy stays under 65 characters per line."
|
|
133
|
+
- "Squint from three metres. Does the mass distribution match the reference?"
|
|
134
|
+
|
|
135
|
+
Not tests: "feels premium", "looks clean". If two people could disagree about
|
|
136
|
+
the answer, it is not a test. Mark which ones a script could decide.
|
|
137
|
+
|
|
138
|
+
### STEP 5 - RECONSTRUCT AND DIFF. Do not skip this.
|
|
139
|
+
|
|
140
|
+
Rebuild the original reference using only dna.json. Close the reference. Work
|
|
141
|
+
from the spec alone.
|
|
142
|
+
|
|
143
|
+
Put your rebuild beside the original. List every single difference.
|
|
144
|
+
|
|
145
|
+
Every difference is a field the spec forgot. Fold each one back in. Record what
|
|
146
|
+
was missing. Go again. Repeat until a stranger could not pick the copy from the
|
|
147
|
+
original.
|
|
148
|
+
|
|
149
|
+
This is the only honest test of completeness that exists. A spec that has never
|
|
150
|
+
been used to rebuild its own source has never been tested. Expect two or three
|
|
151
|
+
passes. Expect the gaps to be things you were sure were obvious.
|
|
152
|
+
|
|
153
|
+
### STEP 6 - EMIT THE SKILL.
|
|
154
|
+
|
|
155
|
+
Write a folder named after meta.slug:
|
|
156
|
+
|
|
157
|
+
<slug>/
|
|
158
|
+
SKILL.md how to use this style
|
|
159
|
+
PROMPT.md the 2KB payload. THIS is what goes in a context window.
|
|
160
|
+
dna.json the full record. NEVER pasted into a prompt.
|
|
161
|
+
reference/ the original, kept forever
|
|
162
|
+
example/ one worked output, the canonical proof
|
|
163
|
+
tools/check.py the automatable tests, exits non-zero on failure
|
|
164
|
+
|
|
165
|
+
PROMPT.md is the file that matters. Order it exactly like this, because
|
|
166
|
+
attention is strongest at the two ends and weakest in the middle:
|
|
167
|
+
|
|
168
|
+
1. The reference image, attached and named first
|
|
169
|
+
2. soul.one_line
|
|
170
|
+
3. The weird move, alone, unmissable
|
|
171
|
+
4. The 3-9 signature moves, as ratios
|
|
172
|
+
5. The bans, as absolutes
|
|
173
|
+
6. Palette and type - roles and coverage only, not a full ramp
|
|
174
|
+
7. Archetype names and when to use each
|
|
175
|
+
8. The self-check, last
|
|
176
|
+
|
|
177
|
+
Nothing else. If it does not change what the output looks like from three metres
|
|
178
|
+
away, it belongs in dna.json, not here. To add a tenth signature you must delete
|
|
179
|
+
one. The cap is the point: it forces you to decide, and an uncapped spec just
|
|
180
|
+
ships your indecision.
|
|
181
|
+
|
|
182
|
+
End PROMPT.md with this line:
|
|
183
|
+
|
|
184
|
+
Before returning any output, run every test in the self-check. Name each test
|
|
185
|
+
and its result. If any fails, repair the output and run them again. Never
|
|
186
|
+
return output with a failing test and a note explaining it away.
|
|
187
|
+
|
|
188
|
+
### STEP 7 - TELL ME WHAT YOU ARE UNSURE ABOUT.
|
|
189
|
+
|
|
190
|
+
List every value you inferred rather than measured, and every rule you are under
|
|
191
|
+
70% confident in. These are where the style will drift first, and I would rather
|
|
192
|
+
know now.
|
|
193
|
+
|
|
194
|
+
## RULES FOR YOU, THE ANALYST
|
|
195
|
+
|
|
196
|
+
- Never invent a value you could measure. If you cannot measure it, say so and
|
|
197
|
+
mark it inferred.
|
|
198
|
+
- Never copy a real logo, wordmark, licensed photograph or proprietary typeface.
|
|
199
|
+
Put them in meta.not_copied and substitute. Reproduce the system, never the
|
|
200
|
+
marks.
|
|
201
|
+
- Descriptive colour names, not systematic ones. "Dusty plum" travels to an
|
|
202
|
+
image model. "accent-500" does not.
|
|
203
|
+
- Every font family needs a fallback. Silent Arial substitution is the most
|
|
204
|
+
common way a reproduction dies quietly.
|
|
205
|
+
- When you are tempted to add a rule because output looks generic, add a ban
|
|
206
|
+
instead. A prohibition steers harder than a permission, and one ban can rule
|
|
207
|
+
out an entire space in a single line.
|
|
208
|
+
- One skill per style. Never merge two identities into one spec. The average of
|
|
209
|
+
two good designs is a bad design.
|
|
210
|
+
|
|
211
|
+
Begin at Step 1. Show your work.
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: design-dna
|
|
3
|
+
description: "Use when a design has won and its look must survive: codify it into a permanent style skill with measured ratios, bans and tests that can fail, then build new pieces in that exact look. Fires on 'turn this into a skill', 'keep the same style', 'my output drifted'. NOT finding the winner (that is `design-loop`), NOT the words (that is `marketing`)."
|
|
4
|
+
tags: [design, style, dna, codify, skill-factory, consistency]
|
|
5
|
+
recommends: [design-loop, design, nextjs, marketing]
|
|
6
|
+
origin: risco
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Design DNA - one beautiful design into a permanent skill
|
|
10
|
+
|
|
11
|
+
*A design loop finds you one beautiful thing. This turns that one thing into a skill you keep forever, so you can make more of it, in any format, without the look drifting.*
|
|
12
|
+
|
|
13
|
+
**Not only about "designs".** The subject is anything that got built: a website, a landing page, a poster, a motion graphic, a carousel, a deck. Same system, same file, same tests. The format is an output, not the subject.
|
|
14
|
+
|
|
15
|
+
## The problem this solves
|
|
16
|
+
|
|
17
|
+
Nobody wrote down **why** the winner was beautiful. Next time you ask for "the same style" you get something close, then something a bit off, then something generic. 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 slop. Slop is the sound of an unwritten rule.
|
|
18
|
+
|
|
19
|
+
## Two modes
|
|
20
|
+
|
|
21
|
+
| You say | Mode | What happens |
|
|
22
|
+
|---|---|---|
|
|
23
|
+
| "codify this", "turn this into a skill", here is the winner | **CAPTURE** | Run the seven steps below. Output: a new style skill folder. |
|
|
24
|
+
| "build X in <style>", "another one like the last", `/<slug>` | **REUSE** | Load that style's `PROMPT.md` only, build, then run its self-check before returning. |
|
|
25
|
+
|
|
26
|
+
If a `dna.json` already exists for the style named, you are in REUSE. Never re-derive a style that has a record.
|
|
27
|
+
|
|
28
|
+
## Hard rules (these are the skill)
|
|
29
|
+
|
|
30
|
+
1. **A specification that cannot fail is not a specification.** If every rule you wrote is one a bad output could still satisfy, you wrote a mood board.
|
|
31
|
+
2. **Compile, do not paste.** Two files, always. `dna.json` is the record, any size, and it **never** enters a prompt. `PROMPT.md` is the payload, **hard cap 2KB**, and it is the only thing that does.
|
|
32
|
+
3. **Always attach the reference image.** Highest-leverage move available and close to free: image conditioning runs on its own pathway, so it does not eat the attention your words are competing for.
|
|
33
|
+
4. **Ratios, not values.** "The headline is 96px" is nearly worthless. "The headline is 8x the body, never under 6x" is the identity.
|
|
34
|
+
5. **Coverage, not just colour.** The same three hex codes at 60/30/10 and at 90/8/2 are two unrelated designs.
|
|
35
|
+
6. **Percentages, not pixels,** in everything spatial. One spec has to drive a 1080x1350 carousel and a 1920x1080 slide with no rewrite.
|
|
36
|
+
7. **When output looks generic, add a ban, not a rule.** A positive instruction is one weak vote against a landslide; "never centre the hero" deletes the landslide from the options. Bans should outnumber positive style rules.
|
|
37
|
+
8. **One skill per style.** Never merge two identities into one spec. The average of two good designs is a bad design.
|
|
38
|
+
9. **Reproduce the system, never the marks.** Real logos, wordmarks, licensed photographs and proprietary typefaces go in `meta.not_copied` with a named substitute.
|
|
39
|
+
10. **Step 5 is not optional.** A spec that has never been used to rebuild its own source has never been tested.
|
|
40
|
+
|
|
41
|
+
## CAPTURE - the seven steps
|
|
42
|
+
|
|
43
|
+
Run `PROMPT.md` as written. It is the operative artefact and it is self-contained; this section is the map, not a second copy of it.
|
|
44
|
+
|
|
45
|
+
| Step | Name | Non-negotiable output |
|
|
46
|
+
|---|---|---|
|
|
47
|
+
| 1 | **Observe** | Flat inventory of literal measurements. Sampled hexes, coverage estimates, type counts, largest-to-smallest ratio, margins as percentages, texture, and **what is absent**. No judgements: interpreting here is how you end up specifying a design that is not the one in front of you. |
|
|
48
|
+
| 2 | **Debate** | Loop A argues exhaustive, Loop B argues nine moves and a wall of refusals, then adjudicate each property with one question: *if I changed this value, would it stop looking like the reference?* Yes is load-bearing, no is trivia, and trivia dilutes attention. Resolve it by splitting documents, not by compromising. |
|
|
49
|
+
| 3 | **Codify** | `dna.json` against `design-dna.schema.json`. Descriptive colour names ("dusty plum", never "accent-500": image and video models cannot read token names). Every family gets a fallback. |
|
|
50
|
+
| 4 | **Tests that can fail** | 8 to 12, binary and measurable, each marked auto or human. |
|
|
51
|
+
| 5 | **Reconstruct and diff** | Close the reference. Rebuild it from `dna.json` alone. Put them side by side and list **every** difference: each one is a field the spec forgot. Fold them in, record them in `reconstruction.gaps_found`, go again. Expect two or three passes, and expect the gaps to be things you were sure were obvious. |
|
|
52
|
+
| 6 | **Emit the skill** | The folder below. |
|
|
53
|
+
| 7 | **Declare uncertainty** | Every value inferred rather than measured, and every rule under 70% confidence, into `meta.confidence_notes`. That is where the style drifts first. |
|
|
54
|
+
|
|
55
|
+
### What gets emitted
|
|
56
|
+
|
|
57
|
+
~/.claude/skills/<slug>/
|
|
58
|
+
SKILL.md how to use this style, and when not to
|
|
59
|
+
PROMPT.md the 2KB payload. THIS is what enters a context window
|
|
60
|
+
dna.json the full record. NEVER pasted into a prompt
|
|
61
|
+
design-dna.schema.json -> validated against the parent copy
|
|
62
|
+
reference/ the original, kept forever
|
|
63
|
+
example/ one worked output, the canonical proof
|
|
64
|
+
scripts/check.py the auto tests, exits non-zero on failure
|
|
65
|
+
|
|
66
|
+
Scaffold from `templates/` and validate before you claim it works:
|
|
67
|
+
|
|
68
|
+
python3 ~/.claude/skills/design-dna/scripts/emit.py <slug> # scaffold + validate
|
|
69
|
+
python3 ~/.claude/skills/<slug>/scripts/check.py <output-file> # run the auto tests
|
|
70
|
+
|
|
71
|
+
### PROMPT.md ordering is fixed
|
|
72
|
+
|
|
73
|
+
Attention is strongest at the two ends and weakest in the middle, so the order is a mechanism, not a style choice:
|
|
74
|
+
|
|
75
|
+
1. The reference image, attached and named first
|
|
76
|
+
2. `soul.one_line`
|
|
77
|
+
3. The weird move, alone, unmissable
|
|
78
|
+
4. The 3-9 signature moves, as ratios
|
|
79
|
+
5. The bans, as absolutes
|
|
80
|
+
6. Palette and type: roles and coverage only, never a full ramp
|
|
81
|
+
7. Archetype names and when to use each
|
|
82
|
+
8. The self-check, last
|
|
83
|
+
|
|
84
|
+
Nothing else. If it does not change what the output looks like from three metres away, it belongs in `dna.json`. To add a tenth signature you must delete one.
|
|
85
|
+
|
|
86
|
+
Last line of every `PROMPT.md`, verbatim:
|
|
87
|
+
|
|
88
|
+
> Before returning any output, run every test in the self-check. Name each test and its result. If any fails, repair the output and run them again. Never return output with a failing test and a note explaining it away.
|
|
89
|
+
|
|
90
|
+
## REUSE - building with a captured style
|
|
91
|
+
|
|
92
|
+
1. Load **only** that style's `PROMPT.md`. Attach `reference/`. Do not read `dna.json` into context; read it only to answer a specific measured question or to regenerate the payload.
|
|
93
|
+
2. Pick an archetype by name before writing anything. Structure first: unnamed layouts are why piece 8 does not sit beside piece 1 as a set.
|
|
94
|
+
3. Build. For web, hand the build to `../nextjs/SKILL.md` and the words to `../marketing/SKILL.md`; the identity stays here.
|
|
95
|
+
4. Run the self-check, name each test and its result, repair and re-run on any failure.
|
|
96
|
+
5. If output drifts, do not add a rule. Consult the table below.
|
|
97
|
+
|
|
98
|
+
## When it goes wrong
|
|
99
|
+
|
|
100
|
+
| What you see | Cause | Fix |
|
|
101
|
+
|---|---|---|
|
|
102
|
+
| Matches every value, still looks generic | Signature moves missing, or too many | Cut to 3-9, rewrite each as a ratio |
|
|
103
|
+
| Drifts back to the stock AI look | Not enough bans | Bans should outnumber positive style rules |
|
|
104
|
+
| Piece 1 and piece 8 do not match | No named layouts | Add archetypes |
|
|
105
|
+
| The accent reads as a theme, not an accent | No coverage percentages | Add them |
|
|
106
|
+
| Works on a slide, breaks on a carousel | Pixel values in the spacing | Convert to percentages |
|
|
107
|
+
| Obeys some rules, ignores others, differently each run | Payload over the cap | Cut to 2KB |
|
|
108
|
+
| Your best rule keeps getting ignored | It is buried in the middle | Move it to the top or the bottom |
|
|
109
|
+
| Fine, but forgettable | No weird move | Find the one break in the system |
|
|
110
|
+
| Spec feels complete, output is wrong | You skipped Step 5 | Rebuild the original from the spec. Compare. |
|
|
111
|
+
|
|
112
|
+
## Styles captured so far
|
|
113
|
+
|
|
114
|
+
| Style | Reads as | Weird move |
|
|
115
|
+
|---|---|---|
|
|
116
|
+
| `../cold-press/SKILL.md` | newsprint editorial, serif at 8x, one vermilion | section numeral clipped by the right edge |
|
|
117
|
+
| `../night-shift/SKILL.md` | near-black instrument panel, one phosphor green | status ribbon severed mid-word by the right edge |
|
|
118
|
+
| `../soft-optics/SKILL.md` | warm paper, lowercase display at 6x, one olive | display line crossing a tinted plate's bottom edge |
|
|
119
|
+
|
|
120
|
+
Each is a finished skill: reference, `dna.json`, a capped payload, a worked proof, and tests that exit non-zero. Never merge two of them: the average of two good designs is a bad design.
|
|
121
|
+
|
|
122
|
+
## Hand-offs
|
|
123
|
+
|
|
124
|
+
- **No winner yet, no reference to measure** -> `../design-loop/SKILL.md` first: it takes a real reference and converges on a piece that beats it. Come back with the winner. Capturing an average of several candidates produces the average, which is the thing you are trying to escape.
|
|
125
|
+
- **The words on the page** -> `../marketing/SKILL.md`. `voice` in `dna.json` constrains them; it does not write them.
|
|
126
|
+
- **The build** -> `../nextjs/SKILL.md` (App Router, React 19) or `../react/SKILL.md` (Vite SPA).
|
|
127
|
+
- **SDD gate.** Capturing a style writes a skill, not product code, so it needs no spec. The moment its output becomes a new feature or a non-trivial behaviour change in a real app, `../specify/SKILL.md` runs first.
|
|
128
|
+
|
|
129
|
+
## Files
|
|
130
|
+
|
|
131
|
+
| File | What it is |
|
|
132
|
+
|---|---|
|
|
133
|
+
| `PROMPT.md` | The standalone prompt. Paste anywhere, attach the design, done. |
|
|
134
|
+
| `design-dna.schema.json` | Every field of `dna.json`, explained. |
|
|
135
|
+
| `scripts/emit.py` | Scaffolds and validates an emitted style skill. |
|
|
136
|
+
| `templates/` | `SKILL.md`, `PROMPT.md` and `check.py` skeletons for the emitted skill. |
|
|
137
|
+
| `references/method.md` | The full method and the research each decision traces to. Read once, not per run. |
|
|
138
|
+
|
|
139
|
+
**Why any of this works** is not opinion: lost-in-the-middle recovery, instruction-compliance decay under constraint count, style being formally the correlation between features rather than the features, and decoupled image cross-attention. The citations are in `references/method.md`.
|