/lock

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.15.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](../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

1. Read the target file (HTML with inline CSS). 2. Extract palette: scan `:root { }` block and all `var(--*)` usage for hex values. 3. Extract type stack: scan `font-family` declarations; capture display, body, fallbacks. 4. Extract motifs: scan SVG `<pattern>`, `<linearGradient>`, keyframe `@keyframes` names. 5. Extract motion: count `@keyframes` blocks, note durations, check `prefers-reduced-motion`. 6. Extract 3D: scan for `perspective`, `rotateX`, `rotateY`, `translateZ`. 7. Extract section structure: scan semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`). 8. Write the pack to `references/locks/<name>.md`. 9. 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