design-dna

Design DNA is a powerful agent skill designed to extract and structure visual design identity into machine-readable JSON format. It operates across three key dimensions: design tokens, qualitative style, and visual effects. With Design DNA, users can seamlessly convert reference UIs—be it images, screenshots, or URLs—into quantifiable specifications, and then generate matching user interfaces tailored to their content needs.

Key Features

• Three Dimensions of Design:
  • Design System: Provides measurable tokens such as colors, typography, spacing, layouts, shapes, elevations, motion, and components.
  • Design Style: Captures qualitative perceptions including mood, visual language, composition, imagery, interaction feel, and brand voice.
  • Visual Effects: Goes beyond basic CSS with advanced options like Canvas, WebGL, 3D rendering, particles, shaders, scroll-driven motion, cursor effects, SVG animations, and glassmorphism.

Workflow Overview

The Design DNA skill follows a three-phase workflow:

1. Structure: Define the full schema and the meaning of each field.
2. Analyze: Extract a complete JSON profile from screenshots, images, or URLs, noting any conflicts.
3. Generate: Implement the design using the DNA JSON along with provided content, resulting in a full HTML/CSS/JS output.

How It Works

• Users can collect and curate reference designs, including screenshots or URLs, that represent the desired visual identity. The skill analyzes these references and extracts every visual property across all three dimensions, producing a comprehensive Design DNA JSON.
• This JSON serves as a reusable design specification that can be committed to version control, shared among teams, and utilized across various projects.

Example Usage

To analyze designs and generate a matching UI, run the following commands:

// Analyze reference designs into Design DNA JSON

// Generate UI from DNA JSON and content

After generating the Design DNA JSON, a polishing iteration can be performed, refining the visual outputs to better match the original references. This iterative approach ensures the generated UI is rich and visually aligned with the desired design aesthetic.

Compatibility: Designed to integrate with the Agent Skills specification and is installable via the skills CLI, supporting various agents such as Cursor, Claude Code, Codex, and GitHub Copilot.

For anyone looking to enhance their UI design workflow, Harness the potential of Design DNA to create precise, reusable, and visually stunning interfaces.