zanwei/design-dna
Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content. observed · 2026-08-28
Health v2 · maintenance only
49/100
- Activity 77
- Release rhythm 35
- Longevity 11
Flags: no_releases young
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-09-03. Adoption (stars, forks) is never an input.
- gap_med: n/a
- age_days: 163
- days_rel: n/a
- days_push: 143
- n_releases_24m: 0
Adoption not part of the score
1509 stars · 83 forks observed · 2026-08-28
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded
An agent skill that extracts a machine-readable 'Design DNA' JSON profile (design tokens, qualitative style, and visual effects) from reference UIs such as screenshots, images, or URLs. It then uses that profile to generate matching UI implementations, typically as self-contained HTML/CSS/JS.
Use cases
- extract design tokens from a screenshot
- clone the visual style of a website I like
- turn a reference UI image into a design system JSON
- generate a landing page matching an existing design
- analyze a URL's visual design into structured tokens
- apply a brand's visual identity to my own content
- create a design profile for reuse across projects
When to choose
- you want to replicate or adapt the visual style of existing UIs with AI coding agents
- you need structured design tokens and style specs rather than ad-hoc descriptions
- you use Claude Code, Cursor, Codex, or similar agent tooling and want a reusable design skill
When to avoid
- you need a full standalone design tool or Figma plugin rather than an agent skill
- your workflow doesn't involve AI coding agents that consume skills
- you require pixel-perfect reproduction of complex proprietary designs
Facets
plugin · maturity active
ui-components developer-tools data-generation web-development web-design frontend developer-tools cli cross-platform agent-skills design-tokens design-system claude-skills cursor-skills ui-design visual-design design-dna nodejs
1 source
- readme: https://github.com/zanwei/design-dna · fetched 2026-08-28 · 0c1cc1f3881d
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| zanwei/design-dna | main | 49 |
For agents
markdown · JSON · MCP: product_card(name="zanwei/design-dna")
Data as of 2026-08-30T08:39:29.467469+00:00 · Report a problem