# 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.

Repository: https://github.com/zanwei/design-dna
Canonical: https://ross.abutalabs.com/products/design-dna
License: MIT
License Family: permissive
Topics: agent-skills, claude-skills, codex-skills, cursor-skills, design-system, design-tokens, design-dna, skills-cli, ui-design, visual-design
Last push: 2026-04-13T01:30:34+00:00

## Health v2 (maintenance only)
Score: 49/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 77, release rhythm 35, longevity 11
- inputs: {"age_days": 163, "days_push": 143, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, young
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1509, forks 83 (observed 2026-08-28T04:04:55.013164+00:00)

## What it is
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
- artifact type: plugin
- maturity: active
- function: ui-components, developer-tools, data-generation
- domain: web-development, web-design, frontend, developer-tools
- platform: cli, cross-platform
- tags: agent-skills, design-tokens, design-system, claude-skills, cursor-skills, ui-design, visual-design, design-dna, nodejs

## Member repositories
- zanwei/design-dna (main) score 49

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:55.013164+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:32:30.343785+00:00, confidence not recorded.
  - readme: https://github.com/zanwei/design-dna (fetched 2026-08-28T04:04:55.013164+00:00, sha 0c1cc1f3881d)
- Data as of 2026-08-30T08:39:29.467469+00:00.