visual-dna-system

Visual DNA System

Purpose

MUST extract transferable visual principles from a visual sample and convert them into a reusable abstract design system. MUST remove source brand identity, protected layouts, exact copy, and proprietary components. NEVER reuse source logos, brand names, exact layouts, exact copy, or proprietary components.

Inputs

Accept one or more of:

• Website URL, screenshot, Figma reference, image, HTML/CSS, app UI, deck, poster, card, dashboard, or other visual artifact.
• Optional user notes about what attracted them to the sample.
• Optional target industry, audience, elements to ignore or emphasize, abstraction level, and originality constraints.

If source access requires tools that are unavailable, ask for a screenshot, file, or visual description.

Workflow

CREATE A TODO LIST FOR THE TASKS BELOW:

1. Confirm required references are readable: references/output-schema.md and references/originality-guardrails.md. If either file is missing or unreadable, report BLOCKER reference-unavailable: <path> and stop.
2. Read the visual sample and user notes. If no usable sample exists, report missing-visual-sample, ask for a URL, screenshot, file, or visual description, and stop.
3. Apply input guards before extraction:
   • If the user asks only for final production, report production-requested, return a short copyable handoff prompt for any available downstream HTML/design producer, and stop.
   • If visual details are too vague to infer, report insufficient-visual-detail, ask one focused clarification question or request a better visual sample, and stop.
   • If the user asks for direct copying or source brand recreation, report source-copy-request, NEVER produce that copied part, and continue with abstract extraction only.
   • If evidence is partial, report partial-evidence, continue with lower confidence, and fill Evidence And Confidence / missing_evidence.
4. Classify the evidence: URL, screenshot, Figma, image, HTML/CSS, deck, poster, UI, or mixed source.
5. If a URL is unreachable because of login, anti-bot protection, 404, or network failure, report source-unreachable, ask for screenshots or HTML/CSS snippets, and stop.
6. If the sample is non-design content such as a natural photo, video frame, or random screenshot with no design intent, report insufficient-design-signal, request a sample with clear design intent, and stop.
7. If multiple samples have conflicting styles, report conflicting-style-samples, list the differences, and ask whether to synthesize one main DNA, output separate DNA systems, or choose one primary sample. If the user does not answer, output separate DNA systems and continue.
8. Extract visible design signals across essence, color, typography, layout, components, material, imagery, iconography, motion, and composition.
9. Separate transferable principles from non-transferable identity markers.
10. MUST remove source brand assets, logos, brand names, exact layouts, proprietary components, exact copy, and unique identity markers.
11. Compose the Markdown Visual DNA Design System using the schema in references/output-schema.md.
12. Emit the JSON/tokens representation using the schema in references/output-schema.md.
13. Compose a copyable downstream production prompt for any available downstream HTML/design producer.
14. Apply the originality guardrails in references/originality-guardrails.md. If any Self-Check answer is not a clear "No", return to steps 9-10 and rewrite the transferable/non-transferable split. Retry at most 2 times; if the gate still fails, report guardrails-cannot-converge, omit disputed transfer items, keep only high-confidence abstract principles, list omitted items in Originality Guardrails, and continue to step 15.
15. Deliver the named artifacts and end.