A powerful agent skill, zanwei/design-dna, addresses the challenge of translating subjective visual design inspiration into quantifiable, machine-readable specifications. It enables developers and designers to extract a "Design DNA" from reference UIs (images, screenshots, URLs) and subsequently generate matching UIs from content. This bridges the gap between qualitative design admiration and precise, reproducible implementation, streamlining UI development workflows.

How It Works

The skill employs a three-phase pipeline: Structure, Analyze, and Generate. Users first curate reference designs. The "Analyze" phase then inspects these references to extract every visual property, producing a complete, quantified Design DNA JSON that details design tokens, qualitative style, and visual effects. This JSON serves as a portable, reusable design specification. Finally, the "Generate" phase uses this DNA JSON and provided content to implement a faithful reproduction of the original design language, outputting production-ready UI, typically as self-contained HTML/CSS/JS. This process allows designs to be version-controlled, shared, and iteratively refined.

Quick Start & Requirements

• Primary install: npx skills add zanwei/design-dna
• Prerequisites: Node.js environment, ability to run npx commands.
• Other install options: Specific agents (e.g., Cursor, Claude Code) via flags, or local clone from the repository.
• Links: No direct quick-start or demo links are provided in the README.

Highlighted Details

• Extracts Design DNA across three dimensions: measurable design tokens (color, typography, spacing, layout, etc.), qualitative design style (mood, visual language, brand voice), and advanced visual effects (Canvas, WebGL, 3D, shaders, glassmorphism, etc.).
• Produces a complete, quantified JSON profile from references, ensuring no fields are empty and noting conflicts.
• Enables faithful UI generation from DNA JSON and content, adapting the design language to new material.
• The Design DNA JSON artifact is version-controllable, shareable, and reusable across projects.

Maintenance & Community

The project welcomes issues and pull requests. For substantive behavior changes, updates to SKILL.md and files under references/ are required to maintain internal consistency. No specific community channels or contributor details are listed.

Licensing & Compatibility

• License: MIT.
• Compatibility: Follows the Agent Skills specification, installable via the skills CLI to numerous supported agents. The MIT license permits commercial use and integration with closed-source projects.

Limitations & Caveats

A "polish iteration" may be necessary if the initial generated output feels visually thin, suggesting the first pass might require refinement to precisely match references. Functionality is inherently tied to the Agent Skills ecosystem, requiring compatible agents for installation and use.