design-dna
Convert reference UI (images, screenshots, URLs) into a quantified design DNA JSON to generate matching UI.
- Type
- Agent Skill
- Open source
- Yes
- GitHub Stars
- ★ 1.0k
- Source
- skill-github
- Repository
- github.com/zanwei/design-dna
Overview
design-dna is an agent skill for extracting, structuring, and applying visual design identity as machine-readable 'design DNA,' covering three dimensions: design tokens, qualitative style, and visual effects. By analyzing reference UI (images, screenshots, URLs), it generates a complete design DNA JSON and uses that JSON to produce matching UI. Suitable for scenarios requiring extraction and application of visual styles from existing designs.
Capabilities
- ▪Extract design attributes from reference UI
- ▪Generate quantified design DNA JSON
- ▪Generate matching UI based on DNA JSON
- ▪Support multiple reference sources (images, screenshots, URLs)
Use cases
Setup
npx skills add zanwei/design-dna
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
How to install design-dna?
Install using the command `npx skills add zanwei/design-dna`.
Which agents does design-dna support?
Supports 39 agents including Cursor, Claude Code, Codex, GitHub Copilot, and others.
Related skills
material-3-skill
Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.
flint-chart
Flint is a visual language that enables AI agents to create elegant charts from simple chart specifications.
drawio-skill
Generate draw.io diagrams from natural language, supporting multiple presets and export formats.
ui-ux-pro-max-skill-cn
Professional-grade UI/UX design intelligence for AI coding assistants.
logo-generator-skill
Professional SVG logo generator with multiple design variants and presentation backgrounds.
claude-skill-aso-appstore-screenshots
Generate high-quality App Store screenshots to boost app download rates.