Leaderboard/Design/design-dna
Last commit on March 23, 2026·Created on March 23, 2026

zanwei/design-dna

Captures the three dimensions of design from any reference.
Combined rank
#160
across all skills
In Design
#15
category rank
Stars
1.2k
+3.7% in last 7d
Forks
62
+3.3% in last 7d
Watchers
2
-33.3% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of real attention, adoption, and active maintenance.
Description

This skill turns design references—screenshots, URLs, images—into a structured JSON profile covering three dimensions: measurable design tokens, qualitative style feel, and visual effects like Canvas and WebGL. It helps UI designers capture exact colors and spacing, design system engineers define schemas, frontend developers generate CSS and HTML from the JSON, and creative technologists analyze and recreate visual effects.

WHO IT'S FOR
UI Designers
extract design tokens from screenshots
Design System Engineers
define and document design system schema
Frontend Developers
generate UI code from design DNA JSON
Creative Technologists
analyze and implement visual effects
30 Days of GitHub Stars
+242 stars
↑ 24.5% monthly change
Jul 7Jul 14Jul 21Jul 28Aug 5
Compatibility & Install
1 Skill · 4 Compatible agents · 2 categories · 1 install path
Compatible agents
Claude CodeCodexCursorCopilot
Categories
DesignDeveloper Tooling
Install via
NPX Skills Add
Repository instructions
Also in this category
4 of 46