zanwei/design-dna

Design DNA is an agent skill that turns the visual style of an existing design into a structured, reusable specification, then uses that specification to generate new interfaces in the same style. You give it reference material such as screenshots, images, or live website URLs, and it studies the visual identity across three areas: measurable design tokens like color, typography, and spacing, qualitative style like mood and brand voice, and visual effects like animation, glassmorphism, or particle work that go beyond plain CSS. The tool works in three phases. First it lays out the full schema of fields it will fill in. Second, in an analyze step, it examines your reference images or URLs and produces a complete JSON profile describing every property of that design, filling in every field rather than leaving gaps, and noting when references conflict with each other. Third, in a generate step, it takes that JSON profile along with your own content and produces a working implementation, by default a self contained page built with HTML, CSS, and JavaScript, that matches the captured style. The resulting Design DNA JSON file is the central output. Because it is just a JSON file, it can be saved, checked into version control, shared with a team, reused across different projects, and refined over time. This turns a vague instruction like make it look like that other website into a precise, repeatable specification that any compatible AI agent can read and act on. If a first generated result still looks thin compared to the references, the README suggests running a polish pass by re-attaching the same images or URLs and asking the agent to compare hierarchy, motion, and overall detail against them. The skill follows the Agent Skills specification and installs through the skills command line tool, which supports many AI coding agents including Cursor, Claude Code, Codex, and GitHub Copilot. Installing it requires Node.js and the ability to run npx commands. The project is released under the MIT license.