/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
- Read the target file (HTML with inline CSS).
- Extract palette: scan
:root { } block and all var(--*) usage for hex values.
- Extract type stack: scan
font-family declarations; capture display, body, fallbacks.
- Extract motifs: scan SVG
<pattern>, <linearGradient>, keyframe @keyframes names.
- Extract motion: count
@keyframes blocks, note durations, check prefers-reduced-motion.
- Extract 3D: scan for
perspective, rotateX, rotateY, translateZ.
- Extract section structure: scan semantic HTML (
<header>, <main>, <section>, <footer>).
- Write the pack to
references/locks/<name>.md.
- Report
LOCKED: <name> → references/locks/<name>.md with a summary of what was captured.
Must not
- Save outside
references/locks/ (or the host's configured locks path)
- Capture invented colors not actually in the source CSS
- Overwrite an existing lock without asking
- Skip the token translation table
1---2name: reimagine-it-lock3description: 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.4license: MIT5---67# /reimagine-it lock89**Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles design DNA capture and reuse.1011Captures a shipped design's full identity into a portable markdown pack so it can be reused on any source file:1213```14/reimagine-it lock gold/domains/cinematic/after.html as house-cinema15/reimagine-it lock examples/end-users/horizon/auto.html as ops-console16```1718## What gets captured1920| Category | What | Example |21|----------|------|---------|22| **Palette** | Ground, accent, support colors with hex values | `#08141a` ground, `#3ae098` accent |23| **Type stack** | Display family, body family, fallbacks | `Iowan Old Style`, `Georgia`, `serif` |24| **Motifs** | Repeating visual patterns | Pulse wave, heartbeat ring |25| **Motion** | Animation budget, keyframe durations | `alive-micro`, 2–4 loops |26| **3D signature** | 3D approach for the medium | `matcap-hero`, `card-fan` |27| **Section structure** | Page anatomy grid | Hero → Cards → Footer |2829## Token translation3031Locks include a translation table so a webpage lock can inform another HTML token:3233```34/reimagine-it webpage --ref house-cinema35/reimagine-it infographic --ref house-cinema36/reimagine-it dashboard --ref house-cinema37```3839## CLI (machine-readable)4041The agent pack is markdown for the LLM. The CLI writes JSON the engine can apply without an agent:4243```bash44npx reimagine-it lock -i house-style.html -o house.lock.json45npx reimagine-it -i my-page.html --ref house.lock.json -t landing -o on-brand.html46npx reimagine-it -i my-page.html --ref competitor.html --auto -o study.html47```4849`--ref` accepts a `.lock.json` file **or** raw HTML (reverse-lock). Structure stays content-derived; only palette, type, and voice are pinned.5051## Procedure52531. Read the target file (HTML with inline CSS).542. Extract palette: scan `:root { }` block and all `var(--*)` usage for hex values.553. Extract type stack: scan `font-family` declarations; capture display, body, fallbacks.564. Extract motifs: scan SVG `<pattern>`, `<linearGradient>`, keyframe `@keyframes` names.575. Extract motion: count `@keyframes` blocks, note durations, check `prefers-reduced-motion`.586. Extract 3D: scan for `perspective`, `rotateX`, `rotateY`, `translateZ`.597. Extract section structure: scan semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`).608. Write the pack to `references/locks/<name>.md`.619. Report `LOCKED: <name> → references/locks/<name>.md` with a summary of what was captured.6263## Must not6465- Save outside `references/locks/` (or the host's configured locks path)66- Capture invented colors not actually in the source CSS67- Overwrite an existing lock without asking68- Skip the token translation table
Kayforkind