Design Dna

Design DNA

A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:

1. Design System — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components) 2. Design Style — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice) 3. Visual Effects — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)

Phases

Phase 1: Structure — Output the Schema

When the user asks for the structural dimensions or schema:

1. Read references/schema.md 2. Present the full schema with field descriptions 3. Explain the three dimensions and their roles:

• design_system: What you can measure — exact hex values, pixel sizes, rem scales
• design_style: What you can feel — mood, personality, composition strategy
• visual_effects: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations

4. Ask if the user wants to customize or extend any dimensions

Phase 2: Analyze — Extract DNA from References

When the user provides images, screenshots, or links representing a target design style:

1. Read references/schema.md for the full field list 2. For each reference provided:

• If image/screenshot: analyze visual properties directly
• If URL: fetch and analyze the page's visual design

3. For every field in the schema, extract or infer a value from the references 4. When multiple references conflict, note the dominant pattern and mention variants 5. Output a complete Design DNA JSON — every field populated, no empty strings 6. After output, ask: "Want to adjust any values before using this for generation?"

Analysis approach per dimension:

Dimension 1: design_system

• color: Extract dominant palette via visual sampling. Primary by area dominance, secondary by supporting role, accent by CTA usage. Map neutral scale from lightest background to darkest text.
• typography: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships.
• spacing: Assess density by element proximity. Measure rhythm by section gap consistency.
• layout: Identify grid by content alignment patterns. Note max-width, column count, asymmetry.
• shape: Measure border-radius by comparing to element height. Note border and divider presence.
• elevation: Classify shadow softness, spread, and layering approach.
• motion: If observable (video/interactive), note easing curves and duration feel.

Dimension 2: design_style

• Synthesize holistic impressions — mood, personality, composition strategy
• Compare against genre archetypes (SaaS, editorial, brutalist, etc.)
• Note ornamentation level and whitespace philosophy

Dimension 3: visual_effects

• From code: Scan for <canvas>, WebGL contexts, Three.js/Pixi.js imports, GSAP/Lottie usage, custom shaders, IntersectionObserver scroll triggers, SVG <animate> elements
• From screenshots: Describe visible effects that go beyond standard CSS — glowing particles, 3D object renders, noise textures, gradient animations, parallax depth, cursor trails, text distortions, glassmorphic surfaces. Note these in composite_notes when exact implementation can't be determined.
• From video/interaction demos: Note scroll behaviors, hover distortions, transition choreography, loading sequences
• Set enabled: false for any effect category not present in the reference
• Rate overview.effect_intensity and overview.performance_tier based on what's observed

Phase 3: Generate — Apply DNA to Content

When the user provides DNA JSON + content to design:

1. Read references/generation-guide.md 2. Parse the DNA JSON and extract all tokens across three dimensions 3. Build CSS custom properties from design_system values 4. Apply design_style qualitative fields to guide subjective design decisions 5. When the design needs assets or source materials, fetch them from the original source whenever possible. If the user provided a URL, retrieve the real asset from that URL instead of recreating, approximating, or substituting it. 6. Implement visual_effects using appropriate technologies:

• Lightweight effects → CSS animations, SVG, vanilla JS
• Medium effects → Canvas 2D, GSAP, Lottie
• Heavy effects → Three.js, custom GLSL shaders, Pixi.js

7. Generate the design output (default: self-contained HTML with inline CSS/JS) 8. Run quality checks from the generation guide

If the user provides only content without DNA JSON, ask whether to:

• Analyze a reference first (go to Phase 2)
• Use a described style (extract DNA from description, then generate)

Phase Combinations

Users may invoke any combination:

• Phase 1 only: "Show me the design structure/schema"
• Phase 2 only: "Analyze this design" (with images/links)
• Phase 2 → 3: "Analyze this design and build me a landing page in the same style"
• Phase 1 → 2 → 3: Full pipeline
• Phase 3 only: User already has DNA JSON

Detect which phase(s) are needed from context and execute accordingly.

<h1 align="center">design-dna</h1>

<p align="center"> <a href="README.md">English</a> | <a href="README.zh-CN.md">中文</a> | <a href="README.ja.md">日本語</a> | <a href="README.ko.md">한국어</a> | Español | <a href="README.zh-TW.md">繁體中文</a> </p>

Una habilidad para agentes de código que extrae, estructura y aplica la identidad visual (Design DNA) en tres dimensiones: sistema de diseño (tokens medibles), estilo de diseño (percepción cualitativa) y efectos visuales.

!Ejemplo: extraer ADN visual de un sitio de referencia (thekrakentraining.com) y aplicarlo a tu propio contenido (deno.com).

Requisitos

• Entorno Node.js instalado
• Poder ejecutar comandos npx

Instalación

Instalación rápida (recomendada)

npx skills add zanwei/design-dna

Instalar en un agente concreto

# Solo Cursor, no interactivo, instalación global
npx skills add zanwei/design-dna -a cursor -g -y

# Solo Claude Code
npx skills add zanwei/design-dna -a claude-code -g -y

Instalar desde un clon local

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

Listar habilidades disponibles

npx skills add zanwei/design-dna --list

Qué hace

La habilidad incorpora un flujo de trabajo en tres fases:

1. Estructura — Presenta el esquema completo y el significado de cada campo (ver references/schema.md). 2. Analizar — A partir de capturas, imágenes o URL, produce un perfil JSON con todos los campos (sin vacíos; si hay conflictos entre referencias, indica la opción principal y las variantes). 3. Generar — Con el JSON de DNA y el contenido, implementa el diseño (por defecto: HTML/CSS/JS autocontenido) siguiendo las comprobaciones de calidad de references/generation-guide.md.

Las fases se pueden usar por separado o encadenadas (p. ej., Analizar → Generar).

Cómo funciona

Visión general del flujo (GitHub renderiza el diagrama Mermaid siguiente):

flowchart LR
    A["Diseños de referencia<br/>Capturas · URL · imágenes<br/><br/>Cualquier diseño que admires"]
    B["Design DNA JSON<br/>Especificación cuantificada<br/><br/>Perfil estructurado"]
    C["Resultado final<br/>Implementación fiel<br/><br/>UI lista para producción"]

    A -->|"Analizar — extraer cada propiedad visual"| B
    B -->|"Generar — aplicar el DNA a tu contenido"| C
    B -.-> D["Guardar · reutilizar · control de versiones"]

Paso 1 — Reunir referencias. Prepara capturas, imágenes o enlaces a páginas en vivo de diseños cuya identidad visual quieras capturar. Puedes combinar varias referencias; la habilidad identifica patrones dominantes y anota variantes.

Paso 2 — Extraer DNA. Entrega las referencias al agente. Inspecciona cada propiedad visual en las tres dimensiones y genera un Design DNA JSON completo y cuantificado, sin campos vacíos ni conjeturas. Ese JSON es una especificación de diseño portable y reutilizable.

Paso 3 — Generar desde el DNA. Proporciona el JSON de DNA junto con tu propio contenido. El agente produce implementaciones que reproducen fielmente el lenguaje de diseño original adaptándose a tu material y copy.

El JSON de DNA es el artefacto central. Una vez extraído, puede versionarse, compartirse entre equipos, reutilizarse en varios proyectos y refinarse de forma iterativa, convirtiendo un «hazlo como ese sitio» subjetivo en una especificación precisa y reproducible que cualquier agente puede consumir.

[!TIP]

Enriquecer el aspecto visual. Si el primer resultado sigue pareciendo pobre o poco detallado frente a las referencias, inicia una iteración de pulido explícita: vuelve a adjuntar las mismas URL o capturas. Así reduces la distancia entre un borrador usable y un resultado rico y fiel a la referencia sin empezar de cero.

>

Prompt: Frente a la referencia, revisa jerarquía, ornamentación, ritmo tipográfico, movimiento, materialidad y la UI en conjunto; luego incorpora tus conclusiones a la implementación actual.

Compatibilidad

Cumple la especificación Agent Skills. Instalable con la CLI `skills` en todos los agentes compatibles, incluidos Cursor, Claude Code, Codex, GitHub Copilot y más de 40.

Contribuciones

Las issues y pull requests son bienvenidas. Si cambias el comportamiento de la habilidad, actualiza SKILL.md y los archivos afectados en references/ para mantener coherencia entre documentación y comportamiento.

Licencia

MIT

Historial de estrellas


<h1 align="center">design-dna</h1>

<p align="center"> <a href="README.md">English</a> | <a href="README.zh-CN.md">中文</a> | 日本語 | <a href="README.ko.md">한국어</a> | <a href="README.es.md">Español</a> | <a href="README.zh-TW.md">繁體中文</a> </p>

コーディングエージェント向けのスキルで、視覚的なデザインアイデンティティ（Design DNA）を抽出・構造化・適用します。三つの次元をカバーします：デザインシステム（測定可能なトークン）、デザインスタイル（定性的な印象）、ビジュアルエフェクト。

!例：参考サイト（thekrakentraining.com）から視覚的 DNA を抽出し、自前のコンテンツ（deno.com）に適用。

前提条件

• Node.js 環境がインストールされていること
• npx コマンドを実行できること

インストール

クイックインストール（推奨）

npx skills add zanwei/design-dna

特定のエージェントへインストール

# Cursor のみ、非対話、グローバルインストール
npx skills add zanwei/design-dna -a cursor -g -y

# Claude Code のみ
npx skills add zanwei/design-dna -a claude-code -g -y

ローカルクローンからインストール

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

利用可能なスキルを一覧表示

npx skills add zanwei/design-dna --list

機能概要

スキルは 三フェーズ のワークフローを内蔵しています。

1. 構造 — 完全なスキーマと各フィールドの意味を提示（references/schema.md を参照）。 2. 分析 — スクリーンショット、画像、または URL に基づき、フィールドが揃った JSON プロファイルを出力（空欄なし。複数参考で競合する場合は主案とバリアントを明記）。 3. 生成 — 既存の DNA JSON とコンテンツを前提に実装へ落とし込む（デフォルト：自己完結型 HTML/CSS/JS）。references/generation-guide.md の品質チェックに従う。

各フェーズは単独でも、連結（例：分析 → 生成）でも利用できます。

仕組み

フロー概要（GitHub は以下の Mermaid 図をレンダリングできます）：

flowchart LR
    A["参考デザイン<br/>スクリーンショット · URL · 画像<br/><br/>好きなデザインを選ぶ"]
    B["Design DNA JSON<br/>定量化された仕様<br/><br/>構造化プロファイル"]
    C["最終成果物<br/>忠実な実装<br/><br/>納品可能な UI"]

    A -->|"分析 — 視覚属性を項目ごとに抽出"| B
    B -->|"生成 — DNA をあなたのコンテンツへ適用"| C
    B -.-> D["保存 · 再利用 · バージョン管理"]

ステップ 1 — 参考の収集。 参考にしたいデザインのスクリーンショット、画像、または公開ページのリンクを用意します。複数の参考を同時に渡せます。スキルは支配的なパターンを識別し、差異を注記します。

ステップ 2 — DNA の抽出。 参考素材をエージェントに渡します。三つの次元の各視覚属性を項目ごとに検査し、完全かつ定量化された Design DNA JSON を出力します。空欄はなく、推測に頼りません。この JSON が移植可能で再利用可能なデザイン仕様です。

ステップ 3 — DNA からの生成。 DNA JSON と独自のコンテンツをセットで渡すと、エージェントは元のデザイン言語を忠実に再現しつつ、あなたの素材とコピーに合わせた実装を生成します。

DNA JSON が中核のアーティファクトです。一度抽出すれば、バージョン管理にコミットしたり、チームで共有したり、複数プロジェクトで再利用したり、継続的に微調整したりできます。主観的な「あのサイトみたいに」を、正確で再現可能な仕様に変え、どのエージェントもそれに沿って一貫したデザインを安定して出力できます。

[!TIP]

視覚的な精緻化。 初回の成果物が参考に比べてまだ薄い、あるいはディテールが足りないと感じる場合は、同じ参考リンクやスクリーンショットをエージェントに再度渡し、明確な精緻化ラウンドを行ってください。初稿を活かしたまま、「高忠実度の参照」にかなり近づけられ、最初からやり直す必要はありません。

>

プロンプト例： 参考と照らし合わせ、界面の階層と装飾、字階と余白、モーションとマテリアリティ、および UI 全体を再監査し、結論を現在の実装へ反映してください。

互換性

Agent Skills 仕様 に準拠。`skills` CLI から、対応エージェント すべてにインストール可能です。Cursor、Claude Code、Codex、GitHub Copilot など 40 種類以上 に対応しています。

コントリビューション

Issue と Pull Request を歓迎します。スキルの挙動を変更する場合は、SKILL.md と references/ 内の関連ファイルを更新し、ドキュメントと挙動の一致を保ってください。

ライセンス

MIT

Star 履歴


<h1 align="center">design-dna</h1>

<p align="center"> <a href="README.md">English</a> | <a href="README.zh-CN.md">中文</a> | <a href="README.ja.md">日本語</a> | 한국어 | <a href="README.es.md">Español</a> | <a href="README.zh-TW.md">繁體中文</a> </p>

코딩 에이전트를 위한 스킬로, 시각적 디자인 아이덴티티(Design DNA)를 추출·구조화·적용합니다. 세 가지 차원을 다룹니다: 디자인 시스템(측정 가능한 토큰), 디자인 스타일(정성적 인상), 비주얼 이펙트.

!예: 참고 사이트(thekrakentraining.com)에서 시각적 DNA를 추출해 자체 콘텐츠(deno.com)에 적용.

사전 요구 사항

• Node.js 환경이 설치되어 있을 것
• npx 명령을 실행할 수 있을 것

설치

빠른 설치(권장)

npx skills add zanwei/design-dna

특정 에이전트에 설치

# Cursor만, 비대화형, 전역 설치
npx skills add zanwei/design-dna -a cursor -g -y

# Claude Code만
npx skills add zanwei/design-dna -a claude-code -g -y

로컬 클론에서 설치

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

사용 가능한 스킬 목록

npx skills add zanwei/design-dna --list

기능 개요

스킬은 3단계 워크플로를 내장합니다.

1. 구조 — 전체 스키마와 각 필드 의미를 제시(references/schema.md 참고). 2. 분석 — 스크린샷, 이미지 또는 URL로 필드가 채워진 JSON 프로필을 출력(빈 칸 없음. 다중 참고 충돌 시 주안과 변형을 명시). 3. 생성 — 기존 DNA JSON과 콘텐츠를 전제로 구현(기본: 자급족 HTML/CSS/JS). references/generation-guide.md의 품질 검사를 따름.

각 단계는 단독으로도, 연결(예: 분석 → 생성)으로도 사용할 수 있습니다.

작동 방식

흐름 개요(GitHub는 아래 Mermaid 다이어그램을 렌더링합니다):

flowchart LR
    A["참고 디자인<br/>스크린샷 · URL · 이미지<br/><br/>마음에 드는 디자인"]
    B["Design DNA JSON<br/>정량화된 스펙<br/><br/>구조화된 프로필"]
    C["최종 결과물<br/>충실한 구현<br/><br/>납품 가능한 UI"]

    A -->|"분석 — 시각 속성을 항목별로 추출"| B
    B -->|"생성 — DNA를 콘텐츠에 적용"| C
    B -.-> D["저장 · 재사용 · 버전 관리"]

1단계 — 참고 수집. 따르고 싶은 디자인의 스크린샷, 이미지 또는 공개 페이지 링크를 준비합니다. 여러 참고를 동시에 제공할 수 있으며, 스킬은 주도 패턴을 식별하고 차이를 표기합니다.

2단계 — DNA 추출. 참고 자료를 에이전트에 넘기면 세 차원의 각 시각 속성을 항목별로 검사하고, 완전하고 정량화된 Design DNA JSON을 출력합니다. 빈 필드나 추측에 의존하지 않습니다. 이 JSON이 이식 가능하고 재사용 가능한 디자인 사양입니다.

3단계 — DNA로부터 생성. DNA JSON과 자체 콘텐츠를 함께 제공하면 에이전트는 원래 디자인 언어를 충실히 재현하면서 소재와 카피에 맞춥니다.

DNA JSON이 핵심 산출물입니다. 한 번 추출하면 버전 관리에 커밋하거나, 팀 간 공유하거나, 여러 프로젝트에서 재사용하거나, 지속적으로 미세 조정할 수 있습니다. 주관적인 「그 사이트처럼」을 정확하고 재현 가능한 사양으로 바꿔, 어떤 에이전트도 일관된 디자인을 안정적으로 내보낼 수 있게 합니다.

[!TIP]

시각적 다듬음. 첫 결과가 참고에 비해 여전히 얇거나 디테일이 부족하다면, 같은 참고 링크나 스크린샷을 에이전트에 다시 제공해 명확한 다듬음 라운드를 진행하세요. 초안을 유지한 채 「고충실도 참고」에 훨씬 가까워질 수 있으며 처음부터 다시 할 필요는 없습니다.

>

프롬프트 예: 참고와 대조하여 화면 계층과 장식, 자간·여백, 모션과 재질감, 전체 UI를 재검토하고 결론을 현재 구현에 반영해 주세요.

호환성

Agent Skills 사양을 따릅니다. `skills` CLI로 지원 에이전트 전체에 설치할 수 있습니다. Cursor, Claude Code, Codex, GitHub Copilot 등 40종 이상을 지원합니다.

기여

Issue와 Pull Request를 환영합니다. 스킬 동작을 바꿀 때는 SKILL.md와 references/의 관련 파일을 함께 업데이트해 문서와 동작을 맞추세요.

라이선스

MIT

Star 히스토리


<h1 align="center">design-dna</h1>

<p align="center"> English | <a href="README.zh-CN.md">中文</a> | <a href="README.ja.md">日本語</a> | <a href="README.ko.md">한국어</a> | <a href="README.es.md">Español</a> | <a href="README.zh-TW.md">繁體中文</a> </p>

An agent skill for extracting, structuring, and applying visual design identity as machine-readable "Design DNA" across three dimensions: design tokens, qualitative style, and visual effects.

https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97

<h3 align="center">Other cases</h3>

https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54

https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f

Prerequisites

• Node.js environment installed
• Ability to run npx commands

Installation

Quick Install (Recommended)

npx skills add zanwei/design-dna

Install to Specific Agent

# Cursor only, non-interactive, global install
npx skills add zanwei/design-dna -a cursor -g -y

# Claude Code only
npx skills add zanwei/design-dna -a claude-code -g -y

Install from Local Clone

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

List Available Skills

npx skills add zanwei/design-dna --list

What It Does

The skill drives a three-phase workflow:

1. Structure — Surface the full schema and field meanings (see references/schema.md). 2. Analyze — From screenshots, images, or URLs, produce a complete JSON profile (every field filled; conflicts noted). 3. Generate — Given DNA JSON plus content, implement the design (default: self-contained HTML/CSS/JS), following references/generation-guide.md.

Phases can be used alone or chained (e.g. Analyze → Generate).

How It Works

Pipeline at a glance (Mermaid renders on GitHub):

flowchart LR
    A["Reference designs<br/>Screenshots · URLs · images<br/><br/>Any design you admire"]
    B["Design DNA JSON<br/>Quantified spec<br/><br/>Structured profile"]
    C["Final output<br/>Faithful implementation<br/><br/>Production-ready UI"]

    A -->|"Analyze — extract every visual property"| B
    B -->|"Generate — apply DNA to your content"| C
    B -.-> D["Save · reuse · version control"]

Step 1 — Curate references. Collect screenshots, images, or live URLs of designs whose visual identity you want to capture. Multiple references can be combined; the skill identifies dominant patterns and notes variants.

Step 2 — Extract DNA. Feed the references to the agent. It inspects every visual property across all three dimensions and outputs a complete, quantified Design DNA JSON — no empty fields, no guesswork. This JSON becomes a portable, reusable design specification.

Step 3 — Generate from DNA. Provide the DNA JSON together with your own content. The agent produces implementations that faithfully reproduce the original design language while adapting to your material.

The DNA JSON is the key artifact. Once extracted, it can be committed to version control, shared across teams, reused across projects, and iteratively refined — turning subjective "make it look like that site" into a precise, reproducible specification that any agent can consume.

[!TIP]

Refining visual richness. If the first pass still feels visually thin or under-detailed next to your references, run a deliberate polish iteration: re-attach the same URLs or screenshots. This narrows the gap between a workable draft and a reference-faithful, visually rich result without starting over.

>

Prompt: Against the reference, audit hierarchy, ornamentation, typographic rhythm, motion, materiality, and overall UI—then merge your conclusions back into the current implementation.

Compatibility

Follows the Agent Skills specification. Installable via `skills` CLI to all supported agents including Cursor, Claude Code, Codex, GitHub Copilot, and 39 more.

Contributing

Issues and pull requests are welcome. For substantive behavior changes, update SKILL.md and any affected files under references/ so the skill stays internally consistent.

License

MIT

Star History


<h1 align="center">design-dna</h1>

<p align="center"> <a href="README.md">English</a> | 中文 | <a href="README.ja.md">日本語</a> | <a href="README.ko.md">한국어</a> | <a href="README.es.md">Español</a> | <a href="README.zh-TW.md">繁體中文</a> </p>

面向编程智能体的技能，用于提取、结构化并应用视觉设计身份（Design DNA），覆盖三个维度：设计系统（可度量 token）、设计风格（定性感受）与视觉特效。

!示例：从参考站点（thekrakentraining.com）提取视觉 DNA，并应用到自有内容（deno.com）。

前置条件

• 已安装 Node.js 环境
• 能够运行 npx 命令

安装

快速安装（推荐）

npx skills add zanwei/design-dna

安装到指定智能体

# 仅 Cursor，非交互，全局安装
npx skills add zanwei/design-dna -a cursor -g -y

# 仅 Claude Code
npx skills add zanwei/design-dna -a claude-code -g -y

从本地克隆安装

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

列出可用技能

npx skills add zanwei/design-dna --list

功能说明

技能内置 三阶段 工作流：

1. 结构 — 展示完整 schema 与各字段含义（见 references/schema.md）。 2. 分析 — 根据截图、图片或 URL，输出字段齐全的 JSON 画像（无空字段；多参考冲突时注明主方案与变体）。 3. 生成 — 在已有 DNA JSON + 内容的前提下落地实现（默认：自包含 HTML/CSS/JS），并遵循 references/generation-guide.md 中的质量检查。

各阶段可单独使用，也可串联（例如：分析 → 生成）。

工作原理

流程一览（GitHub 会渲染下方 Mermaid 图）：

flowchart LR
    A["参考设计<br/>截图 · 网址 · 图片<br/><br/>任何你喜欢的设计"]
    B["Design DNA JSON<br/>量化规格<br/><br/>结构化画像"]
    C["最终产出<br/>忠实还原的实现<br/><br/>可交付界面"]

    A -->|"分析 — 逐项提取视觉属性"| B
    B -->|"生成 — 将 DNA 应用到你的内容"| C
    B -.-> D["保存 · 复用 · 版本管理"]

第一步 — 收集参考。 准备你欣赏的设计截图、图片或线上页面链接。可以同时提供多份参考，技能会识别主导模式并标注差异。

第二步 — 提取 DNA。 将参考素材交给智能体，它会逐项检视三个维度的每一项视觉属性，输出一份完整且量化的 Design DNA JSON — 没有空字段、没有猜测。这份 JSON 就是一份可移植、可复用的设计规格。

第三步 — 基于 DNA 生成。 将 DNA JSON 与你自己的内容一同提供，智能体会生成忠实还原原始设计语言的实现，同时适配你的素材与文案。

DNA JSON 是核心产物。一旦提取完成，它可以提交到版本控制、跨团队共享、在多个项目中复用，也可以持续迭代微调 — 把主观的「照着那个网站做」变成一份精确、可复现的规格定义，任何智能体都能据此稳定输出一致的设计。

[!TIP]

视觉精修提示。 若首轮产出相对参考仍显单薄或细节不足，可将同一批参考链接或截图再次提供给智能体，发起明确的精修轮次；可在保留初稿的前提下显著拉近与「高保真参照」的差距，无需从零重做。

>

Prompt： 请其对照参考复审界面层级与点缀、字阶与留白、动效与材质及整体 UI，并将结论回填至当前实现。

兼容性

符合 Agent Skills 规范。可通过 `skills` CLI 安装到所有支持的智能体，包括 Cursor、Claude Code、Codex、GitHub Copilot 等 40+ 款。

贡献

欢迎提 Issue 与 Pull Request。若修改技能行为，请同步更新 SKILL.md 及 references/ 下相关文件，保持文档与行为一致。

许可证

MIT

星标历史


<h1 align="center">design-dna</h1>

<p align="center"> <a href="README.md">English</a> | <a href="README.zh-CN.md">中文</a> | <a href="README.ja.md">日本語</a> | <a href="README.ko.md">한국어</a> | <a href="README.es.md">Español</a> | 繁體中文 </p>

面向程式編寫代理人的技能，用於擷取、結構化並套用視覺設計身分（Design DNA），涵蓋三個維度：設計系統（可度量 token）、設計風格（定性感受）與視覺特效。

!範例：從參考網站（thekrakentraining.com）擷取視覺 DNA，並套用到自有內容（deno.com）。

前置條件

• 已安裝 Node.js 環境
• 能夠執行 npx 指令

安裝

快速安裝（建議）

npx skills add zanwei/design-dna

安裝到指定代理人

# 僅 Cursor，非互動，全域安裝
npx skills add zanwei/design-dna -a cursor -g -y

# 僅 Claude Code
npx skills add zanwei/design-dna -a claude-code -g -y

從本機複製安裝

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

列出可用技能

npx skills add zanwei/design-dna --list

功能說明

技能內建 三階段 工作流程：

1. 結構 — 展示完整 schema 與各欄位意義（見 references/schema.md）。 2. 分析 — 依截圖、圖片或 URL，輸出欄位齊備的 JSON 畫像（無空欄位；多份參考衝突時註明主方案與變體）。 3. 生成 — 在已有 DNA JSON 與內容的前提下落地實作（預設：自包含 HTML/CSS/JS），並遵循 references/generation-guide.md 中的品質檢查。

各階段可單獨使用，亦可串聯（例如：分析 → 生成）。

工作原理

流程一覽（GitHub 會渲染下方 Mermaid 圖）：

flowchart LR
    A["參考設計<br/>截圖 · 網址 · 圖片<br/><br/>任何你喜歡的設計"]
    B["Design DNA JSON<br/>量化規格<br/><br/>結構化畫像"]
    C["最終產出<br/>忠實還原的實作<br/><br/>可交付介面"]

    A -->|"分析 — 逐項擷取視覺屬性"| B
    B -->|"生成 — 將 DNA 套用到你的內容"| C
    B -.-> D["儲存 · 複用 · 版本管理"]

第一步 — 收集參考。 準備你欣賞的設計截圖、圖片或線上頁面連結。可同時提供多份參考；技能會辨識主導模式並標註差異。

第二步 — 擷取 DNA。 將參考素材交給代理人，它會逐項檢視三個維度下的每一項視覺屬性，輸出一份完整且量化的 Design DNA JSON — 沒有空欄位、沒有猜測。這份 JSON 就是一份可移植、可複用的設計規格。

第三步 — 依 DNA 生成。 將 DNA JSON 與你自己的內容一併提供，代理人會產出忠實還原原始設計語言的實作，同時適配你的素材與文案。

DNA JSON 是核心產物。一旦擷取完成，它可以提交到版本控制、跨團隊共享、在多個專案中複用，也可以持續迭代微調 — 把主觀的「照著那個網站做」變成一份精確、可重現的規格定義，任何代理人都能據此穩定輸出一致的設計。

[!TIP]

視覺精修提示。 若首輪產出相對參考仍顯單薄或細節不足，可將同一批參考連結或截圖再次提供給代理人，發起明確的精修輪次；可在保留初稿的前提下顯著拉近與「高保真參照」的差距，無需從零重做。

>

Prompt： 請其對照參考複審介面層級與點綴、字階與留白、動效與材質及整體 UI，並將結論回填至目前實作。

相容性

符合 Agent Skills 規範。可透過 `skills` CLI 安裝到所有支援的代理人，包括 Cursor、Claude Code、Codex、GitHub Copilot 等 40+ 款。

貢獻

歡迎提交 Issue 與 Pull Request。若修改技能行為，請同步更新 SKILL.md 及 references/ 下相關檔案，保持文件與行為一致。

授權

MIT

星標歷史


Generation Guide

How to use a completed Design DNA JSON to generate designs in Phase 3. Covers all three dimensions.

Priority Order

When generating a design from DNA JSON + content:

1. Color & Typography — define 80% of visual identity 2. Spacing & Layout — structural rhythm 3. Shape & Elevation — surface treatment 4. Design Style qualitative fields — mood, personality, composition approach 5. Visual Effects — special rendering layer (Canvas, WebGL, shaders, etc.) 6. Motion & Interaction — enhance after static layout and effects are solid

Dimension 1: design_system → Code

Tailwind CSS / Utility-First

color.primary.hex        → --color-primary / bg-[hex]
typography.font_families → font-family config
spacing.scale            → spacing config values
shape.border_radius      → rounded-{sm|md|lg|full}
elevation.levels         → shadow-{sm|md|lg}

Plain CSS / CSS Variables

Generate a :root block with all design tokens:

:root {
  --color-primary: {color.primary.hex};
  --color-secondary: {color.secondary.hex};
  --color-accent: {color.accent.hex};
  --font-heading: {typography.font_families.heading};
  --font-body: {typography.font_families.body};
  --radius-sm: {shape.border_radius.small};
  --radius-md: {shape.border_radius.medium};
  --radius-lg: {shape.border_radius.large};
  --shadow-low: {elevation.levels.low};
  --shadow-med: {elevation.levels.medium};
  --shadow-high: {elevation.levels.high};
  --ease: {motion.easing};
  --duration-micro: {motion.duration_scale.micro};
  --duration-normal: {motion.duration_scale.normal};
  --duration-macro: {motion.duration_scale.macro};
  /* ... map all tokens */
}

Component Decisions

• components.button_style → button classes and variants
• components.card_style → card container treatment
• components.navigation_pattern → nav component choice
• interaction_feel.hover_behavior → :hover / :focus states
• motion.easing + motion.duration_scale → transition properties

Dimension 2: design_style → Subjective Decisions

Dimension 3: visual_effects → Special Rendering

Technology Selection by Performance Tier

Implementation Patterns

Background Effects

"none"              → skip
"gradient-animation" → CSS @keyframes on linear-gradient or conic-gradient
"noise-field"       → Canvas 2D with Perlin/simplex noise
"mesh-gradient"     → SVG <mesh> or canvas interpolation
"video-bg"          → <video autoplay muted loop> with poster fallback
"generative-art"    → Canvas 2D or WebGL generative algorithms

Particle Systems

When particle_systems.enabled: true:

• For count < 100 and no complex physics → vanilla JS + Canvas 2D
• For count >= 100 or complex interaction → consider Pixi.js or Three.js Points
• Map interaction ("mouse-repel", "mouse-attract") to pointer event handlers
• Use requestAnimationFrame loop; include destroy/cleanup on unmount

3D Elements

When 3d_elements.enabled: true:

• Default to Three.js unless DNA specifies otherwise
• Apply lighting, camera, materials from params
• Add post_processing effects via EffectComposer
• Handle resize with ResizeObserver
• Load via CDN: https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js

Shader Effects

When shader_effects.enabled: true:

• Create vertex/fragment shaders based on type
• Pass uniforms from params (time, resolution, mouse position)
• For "noise-distortion": use noise functions matching noise_type
• Animate via requestAnimationFrame updating u_time uniform

Scroll Effects

• Parallax: Use transform: translateY() with scroll offset × layer speed
• Scroll-triggered: Use IntersectionObserver with threshold array
• Scrub behavior: If "scrubbed", animation progress = scroll progress. If "triggered", play once on enter.

Text Effects

"split-letter-animate" → Split text into <span> per char/word, stagger CSS animation
"typewriter"           → CSS steps() or JS interval revealing chars
"glitch"               → Layered clip-path + color offset animation
"gradient-fill"        → background-clip: text with animated gradient
"3d-extrude"           → text-shadow stack or WebGL text geometry

Cursor Effects

When cursor_effects.enabled: true:

• Hide default cursor: cursor: none
• Create custom cursor element following pointermove
• "magnetic-buttons": Apply transform pull on hover proximity
• "spotlight": Radial gradient mask following cursor
• "trail": Spawn fading elements on move

Glassmorphism / Neumorphism

"glass"             → backdrop-filter: blur({blur_radius}); background: rgba(..., {transparency})
"neumorphic-light"  → Dual box-shadow (light + dark offset) on light bg
"neumorphic-dark"   → Dual box-shadow (inverted) on dark bg
"frosted-layers"    → Stacked blur layers with varying opacity

Canvas Drawings

When canvas_drawings.enabled: true:

• Initialize canvas with width/height matching container
• Use draw_method to select rendering approach
• Animate with requestAnimationFrame
• Handle responsiveness via ResizeObserver

SVG Animations

When svg_animations.enabled: true:

• "path-draw": Animate stroke-dashoffset from path length to 0
• "morph-shapes": Interpolate d attribute between two paths
• "stroke-animation": Animate stroke properties (dasharray, width, color)

Fallback Strategy

Always implement the fallback defined in overview.fallback_strategy:

// Example: reduce to CSS on low-end devices
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const isLowEnd = navigator.hardwareConcurrency <= 2;
if (prefersReduced || isLowEnd) {
  // Apply fallback: static CSS version, disable canvas/WebGL
}

Output Format

Generate output as a single self-contained HTML file with inline CSS and JS (unless user specifies a framework). Include:

1. CSS custom properties block from design_system tokens 2. Component styles from design_system.components + design_style 3. Layout structure per design_system.layout 4. Content populated from user-provided content 5. Visual effects implemented per visual_effects specification 6. Animations/transitions if design_system.motion.philosophy is not "none" 7. Fallback handling for effects

For heavy effects requiring external libraries, load via CDN <script> tags:

<!-- Three.js -->
<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js"}}</script>

<!-- GSAP -->
<script src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/gsap.min.js"></script>

<!-- Lottie -->
<script src="https://cdn.jsdelivr.net/npm/lottie-web@latest/build/player/lottie.min.js"></script>

Quality Checks

Before delivering, verify:

• [ ] Every color in output traces back to DNA palette
• [ ] Font families match DNA specification
• [ ] Spacing rhythm matches DNA scale
• [ ] Border radius matches DNA shape tokens
• [ ] Overall mood matches design_style.aesthetic.mood
• [ ] Component patterns match DNA components descriptions
• [ ] Contrast ratios meet WCAG AA minimum (4.5:1 body text, 3:1 large text)
• [ ] Visual effects match visual_effects specification (type, technology, params)
• [ ] Fallback strategy is implemented for effects
• [ ] prefers-reduced-motion is respected
• [ ] No effects render when their enabled flag is false
• [ ] Canvas/WebGL contexts are properly sized and handle resize
• [ ] Animation loops use requestAnimationFrame (no setInterval)

Design DNA Schema

Three-dimensional design profile:

• design_system — measurable tokens
• design_style — qualitative perception
• visual_effects — special rendering such as Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animation, and glassmorphism

Every field below must appear in the final JSON output.

Top-Level Structure

meta

• name
• description
• source_references
• created_at

design_system

The structural and measurable layer.

design_system.color

• palette_type
• primary.hex
• primary.role
• secondary.hex
• secondary.role
• accent.hex
• accent.role
• neutral.scale
• neutral.usage
• semantic.success
• semantic.warning
• semantic.error
• semantic.info
• surface.background
• surface.card
• surface.elevated
• contrast_strategy

design_system.typography

• type_scale.display.size
• type_scale.display.weight
• type_scale.display.line_height
• type_scale.display.tracking
• type_scale.heading_1.size
• type_scale.heading_1.weight
• type_scale.heading_1.line_height
• type_scale.heading_1.tracking
• type_scale.heading_2.size
• type_scale.heading_2.weight
• type_scale.heading_2.line_height
• type_scale.heading_2.tracking
• type_scale.heading_3.size
• type_scale.heading_3.weight
• type_scale.heading_3.line_height
• type_scale.heading_3.tracking
• type_scale.body.size
• type_scale.body.weight
• type_scale.body.line_height
• type_scale.body.tracking
• type_scale.body_small.size
• type_scale.body_small.weight
• type_scale.body_small.line_height
• type_scale.body_small.tracking
• type_scale.caption.size
• type_scale.caption.weight
• type_scale.caption.line_height
• type_scale.caption.tracking
• type_scale.overline.size
• type_scale.overline.weight
• type_scale.overline.line_height
• type_scale.overline.tracking
• font_families.heading
• font_families.body
• font_families.mono
• font_style_notes

design_system.spacing

• base_unit
• scale
• content_density
• section_rhythm

design_system.layout

• grid_system
• max_content_width
• columns
• gutter
• breakpoints
• alignment_tendency

design_system.shape

• border_radius.small
• border_radius.medium
• border_radius.large
• border_radius.pill
• border_usage
• divider_style

design_system.elevation

• shadow_style
• levels.low
• levels.medium
• levels.high
• depth_cues

design_system.iconography

• style
• stroke_weight
• size_scale
• preferred_set

design_system.motion

• easing
• duration_scale.micro
• duration_scale.normal
• duration_scale.macro
• entrance_pattern
• exit_pattern
• philosophy

design_system.components

• button_style
• input_style
• card_style
• navigation_pattern
• modal_style
• list_style
• component_notes

design_style

The qualitative and perceptual layer.

design_style.aesthetic

• mood
• visual_metaphor
• era_influence
• genre
• personality_traits
• adjectives

design_style.visual_language

• complexity
• ornamentation
• whitespace_usage
• visual_weight_distribution
• focal_strategy
• contrast_level
• texture_usage

design_style.composition

• hierarchy_method
• balance_type
• flow_direction
• grouping_strategy
• negative_space_role

design_style.imagery

• photo_treatment
• illustration_style
• graphic_elements
• pattern_usage
• image_shape

design_style.interaction_feel

• feedback_style
• hover_behavior
• transition_personality
• loading_style
• microinteraction_density

design_style.brand_voice_in_ui

• tone
• formality
• cta_style
• empty_state_approach
• error_tone

visual_effects

The special rendering and advanced visual behavior layer.

visual_effects.overview

• effect_intensity
• performance_tier
• fallback_strategy
• primary_technology

visual_effects.background_effects

• type
• description
• technology
• params.color_palette
• params.speed
• params.density
• params.opacity
• params.blend_mode

visual_effects.particle_systems

• enabled
• type
• description
• technology
• params.count
• params.shape
• params.size_range
• params.movement_pattern
• params.color_behavior
• params.interaction
• params.spawn_area

visual_effects.3d_elements

• enabled
• type
• description
• technology
• params.renderer
• params.lighting
• params.camera
• params.materials
• params.geometry
• params.post_processing
• params.interaction_model

visual_effects.shader_effects

• enabled
• type
• description
• technology
• params.uniforms
• params.vertex_manipulation
• params.fragment_output
• params.noise_type
• params.distortion

visual_effects.scroll_effects.parallax

• enabled
• layers
• depth_range
• speed_curve

visual_effects.scroll_effects.scroll_triggered_animations

• enabled
• trigger_points
• animation_type
• scrub_behavior

visual_effects.scroll_effects.scroll_morphing

• enabled
• description

visual_effects.text_effects

• type
• description
• technology
• params.split_strategy
• params.animation_per_unit
• params.stagger
• params.effect_style

visual_effects.cursor_effects

• enabled
• type
• description
• params.shape
• params.size
• params.blend_mode
• params.trail
• params.interaction_zone

visual_effects.image_effects

• type
• description
• technology
• params.filter_pipeline
• params.hover_transform
• params.reveal_animation
• params.distortion_type

visual_effects.glassmorphism_neumorphism

• enabled
• style
• params.blur_radius
• params.transparency
• params.border_treatment
• params.shadow_type
• params.light_source_angle

visual_effects.canvas_drawings

• enabled
• type
• description
• technology
• params.draw_method
• params.animation_loop
• params.color_scheme
• params.responsiveness
• params.interaction

visual_effects.svg_animations

• enabled
• type
• description
• params.animation_method
• params.path_morphing
• params.stroke_animation
• params.filter_effects

visual_effects.composite_notes

• Free-text notes for layered effects, implementation ambiguity, performance trade-offs, or screenshot-only observations

Field Guidance

design_system (Dimension 1: Structural / Measurable)

Concrete, token-level values. Extract exact values where visible; estimate from visual inspection otherwise.

• `color.palette_type`: "monochromatic", "complementary", "analogous", "triadic", "split-complementary"
• `color.contrast_strategy`: How text/background contrast is managed — "high contrast", "subtle layers", "dark-on-light dominant"
• `typography.font_style_notes`: e.g. "geometric sans with humanist touches"
• `spacing.content_density`: "compact", "comfortable", "spacious"
• `spacing.section_rhythm`: How vertical spacing varies between sections
• `layout.alignment_tendency`: "strict grid", "centered", "asymmetric", "mixed"
• `shape.border_usage`: "none", "subtle 1px", "bold borders", "only on inputs"
• `elevation.shadow_style`: "none", "soft diffused", "hard drop", "layered"
• `elevation.depth_cues`: "shadows", "overlapping layers", "blur/glass", "color intensity"
• `motion.philosophy`: "minimal functional", "playful bouncy", "cinematic", "none"
• `components`: Describe observed patterns — e.g. "ghost buttons with thick borders, rounded inputs with inner shadow"

design_style (Dimension 2: Qualitative / Perceptual)

Subjective assessments. Use descriptive language.

• `aesthetic.mood`: Array of 3–5 mood words, e.g. ["calm", "professional", "warm"]
• `aesthetic.genre`: e.g. "corporate SaaS", "indie creative", "luxury editorial", "neo-brutalist"
• `aesthetic.personality_traits`: As if the design were a person, e.g. ["confident", "approachable", "meticulous"]
• `visual_language.complexity`: "minimal", "moderate", "rich", "maximal"
• `visual_language.ornamentation`: "none", "subtle accents", "decorative", "heavily ornamented"
• `visual_language.focal_strategy`: "single hero element", "distributed interest", "progressive reveal"
• `composition.hierarchy_method`: "scale contrast", "color weight", "spatial isolation", "typographic hierarchy"
• `composition.balance_type`: "symmetric", "asymmetric", "radial", "mosaic"
• `interaction_feel.transition_personality`: "snappy", "smooth glide", "bouncy elastic", "fade-subtle"
• `brand_voice_in_ui.cta_style`: "direct imperative", "friendly invitation", "urgent scarcity", "subtle suggestion"

visual_effects (Dimension 3: Special Rendering / Visual Wizardry)

Effects beyond standard CSS. These often require Canvas, WebGL, SVG animation, shader programs, or JS animation libraries. When not directly observable from static code, describe them from screenshots or video.

• `overview.effect_intensity`: "none", "subtle-accent", "moderate", "heavy-immersive"
• `overview.performance_tier`: "lightweight" (CSS + simple JS), "medium" (Canvas 2D, SVG anim), "heavy" (WebGL, Three.js, shaders)
• `overview.fallback_strategy`: What happens on low-end devices — "disable effects", "reduce to CSS", "static snapshot"
• `overview.primary_technology`: "CSS only", "Canvas 2D", "WebGL/Three.js", "GSAP", "Lottie", "SVG SMIL", "Pixi.js"
• `background_effects.type`: "gradient-animation", "noise-field", "mesh-gradient", "video-bg", "generative-art", "none"
• `particle_systems.type`: "floating-dots", "confetti", "snow", "fireflies", "connected-nodes", "custom"
• `particle_systems.params.interaction`: "mouse-repel", "mouse-attract", "click-burst", "none"
• `3d_elements.type`: "hero-model", "product-viewer", "scene-bg", "text-extrusion", "abstract-geometry"
• `3d_elements.params.post_processing`: e.g. ["bloom", "FXAA", "depth-of-field", "chromatic-aberration"]
• `shader_effects.type`: "noise-distortion", "wave", "morph", "color-shift", "custom-GLSL"
• `shader_effects.params.noise_type`: "perlin", "simplex", "worley", "fbm"
• `scroll_effects.parallax.layers`: Number of depth layers, e.g. "3"
• `scroll_effects.scroll_triggered_animations.animation_type`: "fade-up", "scale-in", "clip-reveal", "counter", "draw-SVG"
• `text_effects.type`: "split-letter-animate", "typewriter", "glitch", "gradient-fill", "3d-extrude", "none"
• `text_effects.params.split_strategy`: "by-char", "by-word", "by-line"
• `cursor_effects.type`: "custom-cursor", "magnetic-buttons", "spotlight", "trail", "none"
• `image_effects.type`: "hover-distortion", "reveal-clip", "parallax-tilt", "rgb-shift", "none"
• `image_effects.params.distortion_type`: "barrel", "wave", "liquid", "glitch"
• `glassmorphism_neumorphism.style`: "glass", "neumorphic-light", "neumorphic-dark", "frosted-layers", "none"
• `canvas_drawings.type`: "generative-lines", "interactive-blobs", "data-visualization", "pattern-fill", "none"
• `svg_animations.type`: "path-draw", "morph-shapes", "logo-reveal", "decorative-loop", "none"
• `composite_notes`: Free-text description of how multiple effects layer together, performance trade-offs, or effects visible only in screenshots that cannot be fully captured in structured fields