skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

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
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill design-dna-extractor
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
supersterlingsupersterling
1

before-and-after

Capture before-and-after screenshots from two URLs or image paths to compare UI changes.

Community
Intermediate
zanweizanwei
1.3k

design-dna

Extract visual design identity into machine-readable Design DNA JSON profiles.

Community
Advanced
SheshiyerSheshiyer
4

widgets-ui

Render interactive React UI from JSON widget schemas.

Community
Intermediate
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate