#227227th of 259 in Skills, plugins and prompts
design-dna
Agent skill that extracts a design's tokens and style into JSON, then rebuilds it
- Stars
- 2k
- License
- MIT
- Last commit
- Aug 2026
- Language
- JavaScript
367 on 31 Mar 20262,014 on 20 Oct 2026
From GitHub's daily star counts.
Checked on GitHub.
Overview
An Agent Skills package that analyzes screenshots, images or URLs and writes a JSON "Design DNA" profile covering design tokens, qualitative style and visual effects. A second phase generates self-contained HTML/CSS/JS from that JSON plus your content. Optional Node scripts run k-means color measurement and score the output against the reference by ΔE.
Who it is for: Developers using coding agents who want to reproduce a site's visual style
Strengths
- Optional measure-colors and verify scripts give exact hexes and PASS/FAIL ΔE checks
- DNA JSON can be committed, shared and reused across projects and agents
- One npx command installs it to Cursor, Claude Code, Codex, Copilot and others
- Structure, analyze and generate phases work alone or chained
Weaknesses
- Color measurement scripts apply to image references, not live URLs
- Default output is self-contained HTML/CSS/JS; other frameworks are not documented
- Output quality depends on the host agent; README suggests a manual polish pass
- No tagged releases
What it needs
- no GPU
- Needs Node.js, npx, skills CLI, A host agent such as Cursor or Claude Code
Also in Skills, plugins and prompts
See all 259| Rank | Project | Score |
|---|---|---|
| 1 | impeccableDesign skill with 24 slash commands for AI coding agents' frontend output | 96 out of 100 |
| 2 | cavemanCuts token use in coding agents with terse replies and compressed inputs | 95 out of 100 |
| 3 | skillsAgent skills for planning, TDD, debugging and code review | 94 out of 100 |
| #4 | eccAgents, skills, hooks and rules bundle for Claude Code, Codex and other harnesses | 94 out of 100 |
| #5 | oh-my-claudecodeMulti-agent orchestration plugin and CLI for Claude Code | 94 out of 100 |