# Image Dna > Capture a look from references and reuse it instead of describing it from memory. Use the moment reference images, screenshots or style sets enter the conversation, before writing any prompt, render brief, CSS or token spec from them, because the usual failure is glancing at the refs and generating from impression, which drops the one detail that made the style work. Three modes. Extract (references in, structured DNA profile out). Learn (file a handed-over style into the Design library with provenance). Compose (several captured profiles plus a target asset type, conflicts resolved explicitly, one resolved token set out). Covers renders, GFX character art, thumbnails, VFX, logos, packaging, UI and HUD surfaces, button sets and full web-page designs. Triggers on match this reference, make it look like these, extract the style, design tokens from this screenshot, capture the visual DNA, saca el estilo de estas imagenes, que se vea igual que esta referencia, analiza este diseno. - Skill: `presidenteog/image-dna` (Agent Skill, multi-file: 16 files) - Install (CLI): `npx skillmds@latest add presidenteog/image-dna` - Raw SKILL.md: https://api.skillmd.com/api/skills/presidenteog/image-dna/raw - Safety review: pending (external: skill-scanner PASS, skillspector CAUTION) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: PresidenteOG (https://skillmd.com/u/presidenteog) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/presidenteog/image-dna --- # Image DNA Turn references into a **structured profile** a downstream model can execute, rather than a vibe you carry in your head. The deliverable is the profile (or a composed token set), not one finished asset — `gfx-prompt`, `image-handoff`, `image-request` and `forgegui` consume what this produces. The core failure this prevents: looking at references, forming an impression, and generating from the impression. The impression is lossy in a predictable direction — perceived colour drifts toward familiar palette defaults by a ΔE of 10+, described faces get sculpted as 3D geometry, one stated light source silently becomes two. Measure and constrain instead. ## 1. Pick the schema The method below is the same for every domain; the **field list** depends on what the references are. Read exactly one: | References are… | Read | Also read | |---|---|---| | Renders, GFX character art, stills, thumbnails, key art, VFX shots, product renders | `references/schema-render.md` | `references/override-risk-render.md` — always, for render work | | A full web page / landing page / marketing site | `references/schema-web.md` | `references/generate-web.md` when a Phase-3 build follows | | A UI surface, HUD, dashboard, component, button set, frame, icon set | `references/schema-ui.md` | — | | A mix (e.g. a site plus its hero render) | the closest schema per reference | note the split in the profile header | `references/profile-template.md` is the fill-in skeleton for the output. Copy its shape; don't invent a fresh structure per run. ## 2. Extract — references in, profile out 1. **Reference table first.** One row per reference: an id or signature, what it is, its dominant palette in words. A profile whose references can't be named one by one can't be audited later, and every rule under it becomes unfalsifiable. 2. **Measure the palette — do not estimate hex by eye.** For every reference that exists as an image file, run the deterministic measurement. Resolve `SKILL_ROOT` to the absolute directory holding this `SKILL.md`; never assume the current project directory contains `scripts/`. Use absolute paths and one uniquely named output per reference: ```bash npm install --prefix "$SKILL_ROOT/scripts" --silent # first run only; pulls sharp node "$SKILL_ROOT/scripts/measure-colors.mjs" "$REF_IMAGE" > "$MEASURE_JSON" ``` The output gives exact hexes with `coverage` (a 0–1 fraction) and a `role` (`background` / `text` / `accent` / `unassigned`). Use those hexes **verbatim** in the profile's palette block, mapped by role. Keep the raw `measurement` config (including `k`) in the profile so `verify.mjs` can reuse the same clustering later. Fall back to visual sampling only when measurement is impossible — a URL-only reference that can't be screenshotted. - `--k N` (2–16, default 8): raise it for a busy reference with many distinct regions, lower it for a flat two- or three-colour reference. 3. **Fill every field in the chosen schema**, each rule carrying its evidence: the rule in bold, which references obey it, what breaks when it's violated. *"Duotone grade, never neutral — all 7; a flat neutral grade is the fastest way to look wrong"* is usable downstream. *"Cool palette"* is not. 4. **Scope each rule to its evidence: state N, name the family.** A rule seen in 7 references is a rule about those 7. When this vault's GFX set grew from 7 to 18, the rim-light rule turned out to describe one style family, not the medium (`Knowledge/Design/gfx/style-families.md`). A rule written wider than its evidence gets applied where it doesn't hold, and the failure reads as bad taste rather than bad sampling. 5. **Tag every rule `derived` or `general`** (see §6). Don't write a hypothesis as settled fact. 6. **Render work: order the profile by override risk, most-violated rule first.** See `references/override-risk-render.md` — face-render technique, lighting logic, material intensity words and edge treatment silently lose to the generation model's own prior unless stated first and explicitly. Put them at the top of the profile, not mid-paragraph. 7. **Output the profile** in `profile-template.md`'s shape — every field populated, no empty strings. Then ask: "Adjust any values before this feeds generation?" When references conflict, note the dominant pattern and name the variants — don't average them into mush. ## 3. Learn — file a handed-over style into the library References arrive in `ClaudeFX/Knowledge/Design/_inbox/` or in chat with a line of context. Extract a profile, file it under the matching domain, empty the inbox back out. Two steps in that flow are the ones that actually get skipped: 1. **Write the reference to `Knowledge/Design//refs/` before writing any rule from it.** Every `refs/` folder in this library except `gfx/` is empty, and the reason is instructive: the 18 renders behind `gfx/style-families.md` existed only in the conversation that produced them, so they can never be re-examined — the vault now holds two GFX rule-sets that disagree and neither one's evidence can be checked. A rule tagged *derived* whose reference isn't on disk is derived in name only. If an image genuinely can't be saved, say so in the profile header rather than letting the citation imply a file that isn't there. 2. **Say what's new versus what merely confirms**, and tag each resulting rule *derived* or *general* the way `Knowledge/Design/gfx/README.md` does. A reference that only confirms an existing rule still earns its place — it widens N, which is what lets that rule be stated at greater width later. Pick the domain from each folder's own `README.md` scope line — `poses` vs `animation` vs `motion`, and `brand` vs `logo`/`color`/`typography`, are the pairs most often confused. Filing the first real profile into an empty domain is normal, not a mistake. Domain index: `ClaudeFX/Index/00 - Design MOC.md`. ## 4. Compose — several profiles into one token set Conflicts are the whole job; if two profiles agree, composing them is concatenation. When they disagree: - **Wider evidence wins over narrower**, and later over earlier when both are equally sourced. Sample size beats seniority — `style-families.md` (18 refs) corrected `visual-dna.md`'s (7) "rim light is the signature" to family-specific. - **Correct the loser in place; don't leave two parallel truths standing.** Two files that disagree with no cross-reference is how a wrong rule survives — whoever reads only the older one never learns it was overturned. - **Name what got dropped and why** in the composed output. A resolved token set that hides its own conflicts can't be argued with later. - **A composition targeting one asset type inherits only the rules that apply to it.** A named sub-style is the clean form of this — `gfx/emissive-prop-macro.md` is one family's rules narrowed to a single prop-lit macro shot with its own prompt template. ## 5. Verify — score the output, don't eyeball it When the profile carries a measured palette and a generated asset comes back: 1. Save the profile JSON to a file if it isn't one already. 2. Render or screenshot the generated asset to a PNG. 3. Score it: ```bash node "$SKILL_ROOT/scripts/verify.mjs" "$GENERATED_PNG" "$MEASURE_JSON" ``` (A standalone `measure-colors.mjs` output works as the reference when that's the only persisted artifact. For multiple references, verify against each separately.) 4. The report gives per-colour ΔE and coverage drift with PASS/FAIL thresholds (mean ΔE ≤ 5, max ΔE ≤ 20, coverage drift ≤ 0.35). On FAIL, fix the offending colours and re-verify — don't ask the user to judge fidelity by eye. This only checks colour. Face technique, lighting logic and composition still need a human look — but colour is the axis where perception drifts most and a number helps most. ## 6. Provenance Every rule is **derived** (traced to a named reference in that domain's `refs/`, or to a real regeneration failure) or **general** (researched or asserted without one — a hypothesis until a reference confirms it). Tag it; don't write *general* rules as fact. `Knowledge/Design/gfx/README.md` is the worked example of the convention. ## Hands off to, doesn't replace - `reference-hunt` — finds and vets references when they don't exist yet. Run it first, then this. - `gfx-prompt` — turns a render profile into a text-to-image prompt. - `image-handoff` / `image-request` — generation from the profile (Gemini web / Antigravity bridge). - `forgegui` — Roblox GUI + thumbnail assets; supplies the contents of its style-reference lock, doesn't compete with this. - `design-system-spec` — authors a formal `DESIGN.md` token spec *with rationale and WCAG checks* for a codebase to consume. Different verb: that one designs a system; this one reverse-engineers an observed look. Hand a `schema-web` / `schema-ui` profile to it as input when the target is a real `DESIGN.md`. ## Attribution The `scripts/` colour-measurement and verify pipeline is adapted from [zanwei/design-dna](https://github.com/zanwei/design-dna) (MIT). Full text: `docs/UPSTREAM-LICENSE`. The three-dimension web schema in `references/schema-web.md` and `references/generate-web.md` also derives from that project.