design-dna-extractor

Extract visual design identity from UI references into Design DNA JSON.

3|Updated May 16, 2026

Search Tags:#design tokens #visual effects #ui generation #json generation #ui extraction #design dna #visual style analysis

Ready to run

npx skills add https://github.com/Aradotso/design-skills --skill design-dna-extractor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-dna-extractor
Source: https://github.com/Aradotso/design-skills/tree/main/skills/design-dna-extractor
Command: npx skills add https://github.com/Aradotso/design-skills --skill design-dna-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the guesswork of turning a reference UI into a structured, reusable design identity you can implement across products.

Core Features & Use Cases

Design DNA extraction from references: Analyze screenshots, images, or URLs and convert visual properties into machine-readable JSON.
Design-system token coverage: Capture colors, typography, spacing, layout, shapes, elevation, and motion in a structured schema.
Style and effects modeling: Infer qualitative design style (mood, composition, brand voice) and visual effects (scroll/cursor/SVG/WebGL cues) to guide implementation.

Quick Start

Ask the agent to extract Design DNA JSON from the provided screenshot or website reference, then use the resulting JSON to generate a UI that matches the same visual identity.

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 UI screenshot?▼

To extract design tokens from a UI screenshot, the Skill analyzes the reference image and converts visual properties like colors, typography, spacing, shapes, and elevation into a machine-readable Design DNA JSON. This structured output captures the complete design-system parameters for reuse.

What is Design DNA used for in UI generation?▼

Design DNA is a machine-readable JSON specification used to replicate visual identity across implementation workflows. It captures design-system tokens, qualitative style, and visual effects, enabling you to generate matching UIs from structured design specifications.

Can I reverse engineer a website's visual style into a JSON schema?▼

Yes, you can reverse engineer a website's visual style into a JSON schema by providing the reference URL or screenshot. The Skill audits the visual properties and outputs a complete three-dimension JSON covering design-system, design-style, and visual-effects fields.

Does the design token extraction capture motion and visual effects?▼

Yes, design token extraction captures motion and visual effects by inferring scroll, cursor, SVG, and WebGL cues from the reference. These visual properties are modeled alongside design-system tokens and style mood to guide accurate implementation.

What is the best way to tokenize an existing UI into design system parameters?▼

The best way to tokenize an existing UI into design system parameters is to extract a structured Design DNA JSON. This process quantifies colors, typography, spacing, and layout into schema fields, ensuring all values are filled for direct implementation.