Menu

#519 by GitHub stars

zanwei/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 u

DesignWriting

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

SKILL.md

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 593e39bc9e36

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 593e39bc9e3652734653bd75544a333d7d43615e

2.1kGitHub stars
29stars in 7 days
1skill in this repository
0commits in 30 days

Heat

5.8
  • Star growth, last 7 daysAhead of 88% of tracked repositories
  • Star growth, last 24 hoursAhead of 85% of tracked repositories
  • Rank movement, last 7 daysAhead of 47% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20262,084

Individual skills in this repository

How it works

design-dna

When your agent uses it

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

What it loads into context

Frontmatter

215 tokens

Always available to the agent

SKILL.md

1,856 tokens

When the skill is activated

Reference documents

17,588 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Phases
  2. Phase Combinations

Scripts executed separately

  • scripts/color-math.mjs
  • scripts/measure-colors.mjs
  • scripts/package.json
  • scripts/test/color-measurement.test.mjs
  • scripts/verify.mjs

Files

  • .gitignoreasset102 bytes
  • LICENSEasset1,079 bytes
  • README.es.mddoc7,775 bytes
  • README.ja.mddoc9,254 bytes
  • README.ko.mddoc7,934 bytes
  • README.mddoc7,134 bytes
  • README.zh-CN.mddoc6,702 bytes
  • README.zh-TW.mddoc6,715 bytes
  • SKILL.mdcore8,429 bytes
  • SKILL.mdcore8,429 bytes
  • SKILL.mdcore8,429 bytes
  • SKILL.mdcore8,429 bytes
  • SKILL.mdcore8,429 bytes
  • SKILL.mdcore8,429 bytes
  • docs/example-deterministic-measurement.pngasset567,836 bytes
  • docs/example-style-transfer.pngasset55,016 bytes
  • references/generation-guide.mddoc8,567 bytes
  • references/schema.mddoc11,989 bytes
  • scripts/color-math.mjsruns1,542 bytes
  • scripts/measure-colors.mjsruns9,132 bytes
  • scripts/package.jsonruns330 bytes
  • scripts/test/color-measurement.test.mjsruns10,306 bytes
  • scripts/verify.mjsruns6,132 bytes
Read SKILL.md

# 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:
View the complete source on GitHub

Skills included

  • design-dna

Repository facts

License
MIT
Created
Mar 23, 2026
Last pushed
Aug 28, 2026
Forks
114
Open issues
0
Project activity
Slowing

Rank over the last 12 weeks

Now #519 · best #440 · down 56 in 30 days

  1. #512 from Oct 30 to Nov 1
  2. #515 on Nov 2
  3. #516 on Nov 3
  4. #519 on Nov 4
  5. #518 on Nov 5
  6. #519 since Nov 6
76 earlier periods
  1. #476 on Aug 2
  2. #477 on Aug 7
  3. #474 on Aug 8
  4. #470 from Aug 9 to Aug 10
  5. #465 on Aug 11
  6. #461 on Aug 12
  7. #469 on Aug 13
  8. #464 on Aug 14
  9. #453 on Aug 15
  10. #460 on Aug 16
  11. #462 on Aug 17
  12. #468 from Aug 18 to Aug 19
  13. #467 from Aug 20 to Aug 21
  14. #451 on Aug 22
  15. #468 from Aug 23 to Aug 24
  16. #471 on Aug 25
  17. #460 on Aug 26
  18. #468 on Aug 27
  19. #464 on Aug 28
  20. #452 on Aug 29
  21. #444 on Aug 30
  22. #459 on Aug 31
  23. #461 on Sep 1
  24. #453 on Sep 2
  25. #457 on Sep 3
  26. #445 on Sep 4
  27. #444 on Sep 5
  28. #448 on Sep 6
  29. #451 on Sep 7
  30. #464 on Sep 8
  31. #456 from Sep 9 to Sep 10
  32. #452 on Sep 11
  33. #451 on Sep 12
  34. #449 on Sep 13
  35. #461 on Sep 14
  36. #457 on Sep 15
  37. #464 on Sep 16
  38. #457 on Sep 17
  39. #463 on Sep 18
  40. #444 on Sep 19
  41. #458 on Sep 20
  42. #455 on Sep 21
  43. #462 on Sep 22
  44. #456 on Sep 23
  45. #447 on Sep 24
  46. #448 on Sep 25
  47. #442 on Sep 26
  48. #457 on Sep 27
  49. #464 on Sep 28
  50. #466 on Sep 29
  51. #463 on Sep 30
  52. #458 on Oct 1
  53. #455 on Oct 2
  54. #445 on Oct 3
  55. #440 on Oct 4
  56. #451 on Oct 5
  57. #458 on Oct 6
  58. #463 on Oct 7
  59. #472 from Oct 8 to Oct 9
  60. #466 on Oct 10
  61. #465 on Oct 11
  62. #473 on Oct 12
  63. #471 on Oct 13
  64. #474 on Oct 14
  65. #475 on Oct 15
  66. #479 on Oct 16
  67. #469 on Oct 17
  68. #470 on Oct 18
  69. #484 from Oct 19 to Oct 20
  70. #488 on Oct 21
  71. #482 on Oct 22
  72. #479 on Oct 23
  73. #466 on Oct 24
  74. #504 on Oct 25
  75. #510 on Oct 28
  76. #511 on Oct 29

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 5 notes
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 47 signals by file

README.es.md

  • Network accessline 13
    - Entorno [Node.js](https://nodejs.org/) instalado
  • Network accessline 37
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 65
    Visión general del flujo (GitHub renderiza el diagrama [Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) siguiente):
  • Network accessline 117
    Cumple la [especificación Agent Skills](https://agentskills.io). Instalable con la [CLI `skills`](https://github.com/vercel-labs/skills) en todos los [agentes compatibles](https://github.com/vercel-labs/skills#supported-agents), incluidos C
  • Network accessline 129
    [![Gráfico del historial de estrellas](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

README.ja.md

  • Network accessline 13
    - [Node.js](https://nodejs.org/) 環境がインストールされていること
  • Network accessline 37
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 65
    フロー概要（GitHub は以下の [Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) 図をレンダリングできます）：
  • Network accessline 117
    [Agent Skills 仕様](https://agentskills.io) に準拠。[`skills` CLI](https://github.com/vercel-labs/skills) から、[対応エージェント](https://github.com/vercel-labs/skills#supported-agents) すべてにインストール可能です。Cursor、Claude Code、Codex、GitHub Copilot など [40 種類以上](ht
  • Network accessline 129
    [![Star 履歴チャート](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

README.ko.md

  • Network accessline 13
    - [Node.js](https://nodejs.org/) 환경이 설치되어 있을 것
  • Network accessline 37
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 65
    흐름 개요(GitHub는 아래 [Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) 다이어그램을 렌더링합니다):
  • Network accessline 117
    [Agent Skills 사양](https://agentskills.io)을 따릅니다. [`skills` CLI](https://github.com/vercel-labs/skills)로 [지원 에이전트](https://github.com/vercel-labs/skills#supported-agents) 전체에 설치할 수 있습니다. Cursor, Claude Code, Codex, GitHub Copilot 등 [40종 이상](
  • Network accessline 129
    [![Star 히스토리 차트](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

README.md

  • Network accessline 9
    ![example](https://github.com/user-attachments/assets/77e9e02e-35a4-4d65-a402-dc6f9b35ed6e)
  • Network accessline 12
    https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97
  • Network accessline 17
    https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54
  • Network accessline 19
    https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f
  • Network accessline 23
    - [Node.js](https://nodejs.org/) environment installed
  • Network accessline 47
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 75
    Pipeline at a glance ([Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) renders on GitHub):
  • Network accessline 127
    Follows the [Agent Skills specification](https://agentskills.io). Installable via [`skills` CLI](https://github.com/vercel-labs/skills) to all [supported agents](https://github.com/vercel-labs/skills#supported-agents) including Cursor, Clau
  • Network accessline 139
    [![Star History Chart](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

README.zh-CN.md

  • Network accessline 13
    - 已安装 [Node.js](https://nodejs.org/) 环境
  • Network accessline 37
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 65
    流程一览（GitHub 会渲染下方 [Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) 图）：
  • Network accessline 117
    符合 [Agent Skills 规范](https://agentskills.io)。可通过 [`skills` CLI](https://github.com/vercel-labs/skills) 安装到所有[支持的智能体](https://github.com/vercel-labs/skills#supported-agents)，包括 Cursor、Claude Code、Codex、GitHub Copilot 等 [40+ 款](https://github
  • Network accessline 129
    [![星标历史图表](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

README.zh-TW.md

  • Network accessline 13
    - 已安裝 [Node.js](https://nodejs.org/) 環境
  • Network accessline 37
    git clone https://github.com/zanwei/design-dna.git
  • Network accessline 65
    流程一覽（GitHub 會渲染下方 [Mermaid](https://github.blog/news-insights/product-news/github-now-supports-mermaid-diagrams-in-markdown/) 圖）：
  • Network accessline 117
    符合 [Agent Skills 規範](https://agentskills.io)。可透過 [`skills` CLI](https://github.com/vercel-labs/skills) 安裝到所有[支援的代理人](https://github.com/vercel-labs/skills#supported-agents)，包括 Cursor、Claude Code、Codex、GitHub Copilot 等 [40+ 款](https://github
  • Network accessline 129
    [![星標歷史圖表](https://api.star-history.com/svg?repos=zanwei/design-dna&type=Date)](https://star-history.com/#zanwei/design-dna&Date)

references/generation-guide.md

  • Network accessline 103
    - Add `post_processing` effects via EffectComposer - Handle resize with `ResizeObserver` - Load via CDN: `https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js`
  • Network accessline 105
    - Load via CDN: `https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js`
  • Network accessline 184
    <!-- Three.js --> <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js"}}</script>
  • Network accessline 185
    <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js"}}</script>
  • Network accessline 187
    <!-- GSAP --> <script src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/gsap.min.js"></script>
  • Network accessline 188
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/gsap.min.js"></script>
  • Network accessline 190
    <!-- Lottie --> <script src="https://cdn.jsdelivr.net/npm/lottie-web@latest/build/player/lottie.min.js"></script>
  • Network accessline 191
    <script src="https://cdn.jsdelivr.net/npm/lottie-web@latest/build/player/lottie.min.js"></script>

scripts/color-math.mjs

  • Executable scriptline 1
    Executable file

scripts/measure-colors.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

scripts/package.json

  • Executable scriptline 1
    Executable file

scripts/test/color-measurement.test.mjs

  • Executable scriptline 1
    Executable file

scripts/verify.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Signal confidence: 47 facts

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

dembrandt/dembrandt-skills

Senior-level UX and design-system knowledge, packaged so your AI agent applies it automatically.

185GitHub stars

ckryptickunal/OpenDesigner

A free, open-source add-on for Claude, ChatGPT, Codex and Cursor that turns a few plain answers into a design system, so everything you build looks like it belongs together.

75GitHub stars

DonkeyKing01/tasteful-ui-skill

A taste-first UI design skill for coding agents: explore visual direction through references, translate taste into executable design docs, and keep implementation grounded in real…

24GitHub stars

marcosnovo/unslop-design

An agent skill (Claude Code, Codex, Cursor, Copilot, Gemini CLI...) that makes your app or site stop looking AI-generated: 64 numbered design fixes, scripts that score your UI fro…

14GitHub stars

arvindrk/extract-design-system

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an A…

270GitHub stars

andrian-syh/roblox-best-practices-skill

Framework-agnostic Roblox/Luau best-practices skill for AI agents. Performance, security, data, platform limits, Studio MCP safety, and 22 system blueprints. Installs to 62 agents…

13GitHub stars

Add this badge to your README

It updates every night and links to this page.

zanwei/design-dna: #519 on hotskills, 2.1k stars

[![zanwei/design-dna on hotskills](https://hotskills.dev/badge/zanwei-design-dna.svg)](https://hotskills.dev/skill/zanwei-design-dna/)