skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

design-dna-extractor

Extract visual design identity from reference UIs into machine-readable Design DNA JSON.

4|Updated May 16, 2026
Search Tags:#html generation#design system#design tokens#json schema#visual style#ui analysis#screenshot analysis
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill design-dna-extractor-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-dna-extractor
Source: https://github.com/reason-machines/design-skills/tree/main/skills/design-dna-extractor
Command: npx skills add https://github.com/reason-machines/design-skills --skill design-dna-extractor-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Translating the visual identity of an existing website or screenshot into a new UI is slow and inconsistent when done by eye. This Skill converts reference designs into a complete, quantified JSON specification so any agent can reproduce the same look and feel on new content. ## Core Features & Use Cases - Design DNA Extraction: Analyze screenshots, images, or URLs to produce a full JSON spec covering design tokens (colors, typography, spacing, layout, elevation, motion), qualitative style (mood, composition, imagery, brand voice), and visual effects (scroll effects, SVG animation, gradients). - Schema-Driven Analysis: A three-phase workflow (Structure, Analyze, Generate) ensures every schema field is filled, with conflict notation when multiple references disagree. - DNA-Driven Generation: Apply a saved DNA JSON to your own content to generate self-contained HTML/CSS/JS pages or components that match the reference design. - Use Case: Extract the design DNA from linear.app, save it as design-dna.json in version control, then generate a task dashboard that faithfully reproduces Linear's palette, typography, spacing, and interaction feel. ## Quick Start Ask the agent to analyze the design DNA from a screenshot or URL and fill every field of the Design DNA schema, then generate a page from the resulting JSON.

Frequently Asked Questions about design-dna-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a website screenshot?▼

Provide the screenshot or URL and ask the agent to analyze its design DNA. The skill inspects colors, typography, spacing, layout, shapes, elevation, and motion, then outputs a complete JSON with every schema field filled and quantified values like hex codes and pixel scales.

How do I generate a webpage that matches an existing site's design?▼

First extract the site's Design DNA JSON, then prompt the agent to generate a page using that DNA plus your own content. The default output is self-contained HTML/CSS/JS applying the extracted tokens, style attributes, and visual effects.

What is included in a Design DNA JSON file?▼

Design DNA JSON covers three dimensions: design-system (color, typography, spacing, layout, shape, elevation, motion), design-style (mood, visual language, composition, imagery, interaction feel, brand voice), and visual-effects (canvas, particles, scroll effects, cursor effects, SVG animation, gradients).

Does design DNA extraction work without an API key?▼

Yes, the skill works without API keys when the agent has built-in vision, such as Claude Code or Cursor with a vision-capable model. Environment variables for Anthropic or OpenAI keys are only needed if you use external vision APIs.

Why does the generated UI not match my reference design?▼

Generic output usually means the analysis missed details like micro-interactions, shadows, or gradients. Re-run the analysis requesting all visual details, verify the visual-effects fields are populated, and use iterative refinement by re-attaching references for an audit pass.

How are conflicting styles across multiple references handled?▼

The skill identifies dominant patterns across references and documents disagreements in _note fields within the JSON. You can also extract separate DNA per reference and merge manually when styles are incompatible.

Related Skills

Explore More Design & Creative Skills→
acquiaacquia
16

nebula-scrape-url

Capture desktop, tablet, and mobile screenshots and HTML from web pages.

Official
Basic
mostafasudomostafasudo
3

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
alperienalperien

design-humanizer

Audit user interfaces against a 40-point catalog of AI design tells.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate