Designome

Extracting structured design data from screenshots usually results in vague descriptions or generic CSS variables. Designome-extract solves this by converting UI screenshots into framework-neutral, evidence-backed Design DNA. It moves beyond simple color palettes to capture component anatomy, state expectations, and interface logic based on visual reasoning.

What it does

• Visual Evidence Indexing creates stable region IDs for every UI element identified in source images.
• Multi-Axis Analysis evaluates 13 distinct design axes and 65 facets, including typography, spacing, and motion.
• UI Domain Classification detects 20 specific domains such as dashboards, web apps, or mobile interfaces to ensure context-aware rules.
• Fidelity Mapping assigns status labels like observed, inferred, or proposed to every design claim based on visual proof.
• Deterministic Validation uses a bundled Node.js helper to verify metadata, request contracts, and schema integrity.

How it works

1. Request Normalization interprets conversational intent into a structured contract mapping images to specific axes and concepts.
2. Source Initialization uses the init-run command to generate metadata and validate screenshot accessibility in a local run directory.
3. Evidence Inspection performs visual reasoning to classify surfaces and detect UI domains while respecting strict routing boundaries.
4. Synthesis and Expansion writes a draft design-dna.authoring.json and uses the expand-dna helper to produce a canonical, validated JSON artifact.

Frameworks & tools

This skill requires Node.js 24 or newer. It utilizes a custom CLI (designome.mjs) for deterministic operations, JSON Schema for contract validation, and Markdown for reporting coverage, unknowns, and design rules.

Why this beats prompting it yourself

Standard prompts often hallucinate CSS values or miss complex component states. This skill enforces a strict Fidelity Contract, requiring evidence for every claim and preventing the model from speculative design based on mere resemblance.

Use cases

• Generate structured design specifications from legacy application screenshots.
• Audit UI consistency across multiple platforms by extracting and comparing Design DNA.
• Create framework-neutral component libraries based on existing visual assets.
• Prepare validated design requirements for handoff to frontend engineering teams.

Known limitations

Requires Node.js 24+. It cannot identify exact font files or implementation libraries from resemblance alone. Does not perform automatic installation of artifacts into target projects.