Design DNA

Design DNA is an Agent Skill from zanwei that turns reference designs into a portable, quantified spec. Give your agent screenshots, images or URLs of designs you like; it extracts a complete Design DNA JSON across three dimensions, then generates new UI from that DNA and your own content. The three dimensions - Design system: measurable tokens for colour, typography, spacing, layout, shape, elevation, motion and components - Design style: mood, visual language, composition, imagery, interaction feel and brand voice - Visual effects: canvas, WebGL, 3D, particles, shaders, scroll-driven motion, cursor effects, SVG animation and glassmorphism How it works - Structure: shows the full schema and what each field means - Analyze: reads your references and fills every field of the JSON profile, noting conflicts between references - Generate: implements the design from the DNA plus your content, by default as self-contained HTML, CSS and JavaScript - Phases work alone or chained, and the JSON can be saved, versioned and reused across projects - Bundled Node scripts measure colours from images deterministically and verify the result How to install it Run npx skills add zanwei/design-dna. It needs Node.js for npx and the measuring scripts. It works in Claude, ChatGPT, Gemini and more agents that support Agent Skills. Good to know - MIT licensed.