design-dna

What problem does it solve?

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.

Core Features & Use Cases

• 3-Dimension Design Profiling: Captures design system (measurable tokens like color, typography, spacing), design style (qualitative feel like mood, composition, brand voice), and visual effects (Canvas, WebGL, 3D, particles, shaders, etc.) from any reference design.
• 3-Phase Flexible Workflow: Use standalone phases to output the full design schema, analyze references into complete JSON profiles, or generate production-ready UI from existing DNA JSON, or chain phases end-to-end for full workflow execution.
• Use Case: If you admire the design of a reference website, use this Skill to extract its full Design DNA, then apply that DNA to your own project's content to get a matching, production-ready interface in minutes without manually recreating every design detail.

Quick Start

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.