{"repo":"zanwei/design-dna","free":true,"listed":false,"github":"https://github.com/zanwei/design-dna","clone":"git clone https://github.com/zanwei/design-dna.git","description":"Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.","language":null,"stars":1429,"topics":["agent-skills","claude-skills","codex-skills","cursor-skills","design-system","design-tokens","design-dna","skills-cli","ui-design","visual-design"],"license":"MIT","category":"ui-components","readme_excerpt":"design-dna English 中文 日本語 한국어 Español 繁體中文 An agent skill for extracting, structuring, and applying visual design identity as machine-readable \"Design DNA\" across three dimensions: design tokens, qualitative style, and visual effects. https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97 Other cases https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54 https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f Prerequisites - Node.js environment installed - Ability to run npx commands Installation Quick Install (Recommended) Install to Specific Agent Install from Local Clone List Available Skills What It Does Dimension Role ----------- ------ Design System Measurable tokens: color, typography, spacing, layout, shape, elevation, motion, components Design Style Qualitative perception: mood, visual language, composition, imagery, interaction feel, brand voice Visual Effects Beyond plain CSS: Canvas, WebGL, 3D, particles, shaders, scroll-driven motion, cursor effects, SVG animation, glassmorphism, etc. The skill drives a three-phase workflow: 1. Structure — Surface the full schema and field meanings (see references/schema.md ). 2. Analyze — From screenshots, images, or URLs, produce a complete JSON profile (every field filled; conflicts noted). 3. Generate — Given DNA JSON plus content, implement the design (default: self-contained HTML/CSS/JS), following references/generation-guide.md . Phases can be used a","default_branch":null,"files":null,"tree":[],"storefront":"/r/zanwei","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/zanwei/design-dna/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}