| name | reimagine-it-lock |
| description | Design DNA capture — extracts palette, type stack, motifs, motion, and 3D signatures from a shipped HTML file and saves them as a reusable reference pack. Use when the user says /reimagine-it lock, "lock this design", "save design DNA", "capture this look", or wants to reuse a shipped design on a different target. Locks capture palette, type, motif, and motion from a shipped HTML file. Part of the reimagine-it Content-Derived Design suite. |
| license | MIT |
| metadata | {"author":"Kayforkind","version":"2.11.0","parent":"reimagine-it","hosts":["claude-code","cursor","codex","copilot","gemini-cli"]} |
| keywords | ["lock","design-dna","palette-capture","design-system","reusable-design","style-extraction","content-derived-design"] |
| category | Design |
| capabilities | ["palette-extraction","type-stack-capture","motif-extraction","motion-signature-capture","design-reuse"] |
| trigger_phrases | ["/reimagine-it lock","lock this design","save design DNA","capture this look","reuse this design","extract palette","lock and reuse"] |
/reimagine-it lock
Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles design DNA capture and reuse.
Captures a shipped design's full identity into a portable markdown pack so it can be reused on any source file:
/reimagine-it lock gold/domains/cinematic/after.html as house-cinema
/reimagine-it lock examples/end-users/horizon/auto.html as ops-console
What gets captured
| Category | What | Example |
|---|
| Palette | Ground, accent, support colors with hex values | #08141a ground, #3ae098 accent |
| Type stack | Display family, body family, fallbacks | Iowan Old Style, Georgia, serif |
| Motifs | Repeating visual patterns | Pulse wave, heartbeat ring |
| Motion | Animation budget, keyframe durations | alive-micro, 2–4 loops |
| 3D signature | 3D approach for the medium | matcap-hero, card-fan |
| Section structure | Page anatomy grid | Hero → Cards → Footer |
Token translation
Locks include a translation table so a webpage lock can inform another HTML token:
/reimagine-it webpage --ref house-cinema
/reimagine-it infographic --ref house-cinema
/reimagine-it dashboard --ref house-cinema
CLI (machine-readable)
The agent pack is markdown for the LLM. The CLI writes JSON the engine can apply without an agent:
npx reimagine-it lock -i house-style.html -o house.lock.json
npx reimagine-it -i my-page.html --ref house.lock.json -t landing -o on-brand.html
npx reimagine-it -i my-page.html --ref competitor.html --auto -o study.html
--ref accepts a .lock.json file or raw HTML (reverse-lock). Structure stays content-derived; only palette, type, and voice are pinned.
Procedure
