design-dna skill
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
- 2,120 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs helper scripts from the skill directory
- Reads reference images and links
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/design-dnaDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs helper scripts from the skill directory
- Reads reference images and links
This is third-party code. Review the repository files before installing.
What it does
The skill breaks design into three dimensions: a token system (color, typography, spacing, shape, elevation, motion), qualitative style (mood, composition, character) and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll animations). From images, screenshots or links it builds a JSON profile, then generates new UI from that profile and your content in the same character. It runs in three phases: present the schema, extract the profile from references, apply it to content.
Who it is for. For designers and frontend developers who want to carry a reference's style onto their own UI.
Good fit when
- You need to break a reference UI into tokens and style
- You need a structured design profile in JSON
- You need to generate UI in a reference's character for your content
Not a fit when
- You need a finished human design rather than a structural breakdown
- You cannot run npx and helper scripts
Example request
Extract the design DNA from this screenshot and build a landing page from it for my copyLimitations
The skill extracts and applies design structure; the quality of the final UI depends on the content and the model. Some features require running helper scripts from the skill directory.
How to disable. Remove the design-dna folder from your agent's skills directory, for example ~/.claude/skills/design-dna.
FAQ
What is the output format?
The design profile is a structured JSON across three dimensions.
Which agents are supported?
The skills CLI install works for Cursor, Claude Code, Codex, GitHub Copilot and others.
Discussion
No questions or reviews yet.
Related
SkillsA UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
README in short
The README describes a skill that extracts and applies design across three dimensions: token system, qualitative style and visual effects. Install via npx skills add with per-agent flags or from a local clone. The skill follows the Agent Skills specification and installs into supported agents. Helper scripts live in the skill directory and load on demand. MIT licensed.
README badge
Original SKILL.md
--- name: design-dna description: >- Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, or has a Design DNA JSON and content and wants a design generated from it. --- # Design DNA A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions: 1. Design System - measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components) 2. Design Style - qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice) 3. Visual Effects - special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)