Extract visual design identity into machine-readable Design DNA JSON profiles.
npx skills add https://github.com/zanwei/design-dna --skill design-dna
Please help me install this Agent Skill. Skill: design-dna Source: https://github.com/zanwei/design-dna/tree/main Command: npx skills add https://github.com/zanwei/design-dna --skill design-dna
This Skill eliminates the inconsistency of subjective design replication by turning visual design identities from reference designs (screenshots, live URLs, or images) into precise, machine-readable "Design DNA" specifications that any AI agent can use to generate consistent, faithful UI implementations without guesswork.
Use the design-dna skill to analyze the visual design of the reference site https://example.com and generate a matching landing page for your new SaaS product using the extracted Design DNA.
High-intent search queries and answers about installing and using this skill.
You can extract a design system from a reference website by profiling its visual identity across design tokens, style, and visual effects to output structured JSON profiles. This captures measurable attributes like color and typography into machine-readable specifications.
Replicating visual effects from an existing UI involves extracting Canvas, WebGL, 3D, and shader parameters into a structured design DNA profile. This profile then generates self-contained HTML, CSS, and JS implementations with built-in fallbacks.
You can generate production-ready HTML from a design screenshot by applying the extracted design DNA JSON profile. The workflow converts the visual reference into self-contained HTML, CSS, and JS code without manual recreation of design details.
Design DNA extraction explicitly captures qualitative design style attributes including mood, composition, and brand voice alongside measurable tokens. This ensures the generated UI matches the exact feel of the original reference design.
Documenting design tokens from an image reference involves analyzing the visual input to structure color, typography, and spacing into a machine-readable JSON schema. This eliminates subjective guesswork by providing precise specifications for AI agents.
A key limitation of using design DNA for UI generation is that complex visual effects like WebGL and shaders require built-in fallbacks. While it generates self-contained HTML, CSS, and JS, highly custom interactions may still need manual refinement.
acquiaCapture desktop, tablet, and mobile screenshots and HTML from web pages.
chartsaiGenerate self-contained HTML UI prototypes from collaborative design sessions.
WeAreBiniGuide frontend developers in building consistent UI components for Paperclip.
DiologIRExtract visual design specifications from slide screenshots into a PRESENTATION_DESIGN.md file.
