Individual skill
design-dna
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: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "extract design style", "analyze design", "design tokens from reference", "generate design from JSON", "design system from screenshot", "design profile", "style guide JSON", "visual effects analysis", "design with effects", "3d design analysis".
SKILL.md
Source commit 593e39bc9e3652734653bd75544a333d7d43615e
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 2,109
- Repository last updated
- Aug 28, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-skills Repository topic
- claude-skills Repository topic
- codex-skills Repository topic
- cursor-skills Repository topic
- design-system Repository topic
- design-tokens Repository topic
- design-dna Repository topic
- skills-cli Repository topic
- ui-design Repository topic
- visual-design Repository topic
- design Derived category
- writing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
.gitignoreasset · 102 bytesLICENSEasset · 1,079 bytesREADME.es.mddoc · 7,775 bytesREADME.ja.mddoc · 9,254 bytesREADME.ko.mddoc · 7,934 bytesREADME.mddoc · 7,134 bytesREADME.zh-CN.mddoc · 6,702 bytesREADME.zh-TW.mddoc · 6,715 bytesSKILL.mdcore · 8,429 bytesSKILL.mdcore · 8,429 bytesSKILL.mdcore · 8,429 bytesSKILL.mdcore · 8,429 bytesSKILL.mdcore · 8,429 bytesSKILL.mdcore · 8,429 bytesdocs/example-deterministic-measurement.pngasset · 567,836 bytesdocs/example-style-transfer.pngasset · 55,016 bytesreferences/generation-guide.mddoc · 8,567 bytesreferences/schema.mddoc · 11,989 bytesscripts/color-math.mjsruns · 1,542 bytesscripts/measure-colors.mjsruns · 9,132 bytesscripts/package.jsonruns · 330 bytesscripts/test/color-measurement.test.mjsruns · 10,306 bytesscripts/verify.mjsruns · 6,132 bytes
Read excerpt
# 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.)
## Phases
### Phase 1: Structure — Output the Schema
When the user asks for the structural dimensions or schema:
