mirror of
https://github.com/zanwei/design-dna.git
synced 2026-09-14 19:59:56 +08:00
chore: initialize design-dna skill repo with bilingual README
Made-with: Cursor
This commit is contained in:
zanwei.guo
@@ -0,0 +1,7 @@
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.log
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 the design-dna authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,100 @@
|
||||
# design-dna
|
||||
|
||||
**Language / 语言:** [English](README.md) · [简体中文](README.zh-CN.md)
|
||||
|
||||
---
|
||||
|
||||
An [Agent Skill](https://agentskills.io) for coding agents (Cursor, Claude Code, Codex, and [many others](https://github.com/vercel-labs/skills#supported-agents)). It provides a structured workflow to **extract**, **document**, and **apply** visual design identity as machine-readable “Design DNA” across three dimensions: design tokens, qualitative style, and visual effects.
|
||||
|
||||
Install from this repository with the open [`skills` CLI](https://github.com/vercel-labs/skills). Discover more skills at [skills.sh](https://skills.sh/).
|
||||
|
||||
## What it does
|
||||
|
||||
| Dimension | Role |
|
||||
|-----------|------|
|
||||
| **Design system** | Measurable tokens: color, typography, spacing, layout, shape, elevation, motion, components |
|
||||
| **Design style** | Qualitative perception: mood, visual language, composition, imagery, interaction feel, brand voice |
|
||||
| **Visual effects** | Beyond “plain CSS”: Canvas, WebGL, 3D, particles, shaders, scroll-driven motion, cursor effects, SVG animation, glassmorphism, etc. |
|
||||
|
||||
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).
|
||||
|
||||
## Installation
|
||||
|
||||
Requires [Node.js](https://nodejs.org/) (for `npx`). After you publish this repo to GitHub under `OWNER/REPO`:
|
||||
|
||||
```bash
|
||||
# Install into detected agents (interactive)
|
||||
npx skills add OWNER/REPO
|
||||
|
||||
# Example once your repo is github.com/your-username/design-dna
|
||||
npx skills add your-username/design-dna
|
||||
|
||||
# Cursor only, non-interactive, global (user-wide) install
|
||||
npx skills add your-username/design-dna -a cursor -g -y
|
||||
```
|
||||
|
||||
**Preview skills in the repo without installing:**
|
||||
|
||||
```bash
|
||||
npx skills add https://github.com/OWNER/REPO --list
|
||||
```
|
||||
|
||||
**Install from a local clone:**
|
||||
|
||||
```bash
|
||||
npx skills add /path/to/design-dna -a cursor -y
|
||||
```
|
||||
|
||||
Paths after install depend on the agent; for Cursor, see [Cursor Skills docs](https://cursor.com/docs/context/skills) (often under `~/.cursor/skills/` for global installs).
|
||||
|
||||
## Repository layout
|
||||
|
||||
```
|
||||
design-dna/
|
||||
├── SKILL.md # Skill entry: frontmatter + agent instructions
|
||||
├── references/
|
||||
│ ├── schema.md # Full JSON field list and semantics
|
||||
│ └── generation-guide.md # How to turn DNA into implementation + QA
|
||||
├── README.md # This file (English)
|
||||
├── README.zh-CN.md # Chinese README
|
||||
├── LICENSE
|
||||
└── .gitignore
|
||||
```
|
||||
|
||||
`SKILL.md` uses relative links into `references/`; keep that structure when forking or republishing.
|
||||
|
||||
## When the agent should use this skill
|
||||
|
||||
The skill’s `description` in `SKILL.md` lists trigger phrases. In short, use it when the user wants any of:
|
||||
|
||||
- A **design structure / schema** for “Design DNA”
|
||||
- **Analysis** of references (images, screenshots, URLs) into structured JSON
|
||||
- **Generation** of UI from an existing DNA JSON
|
||||
- **Visual effects** called out explicitly (WebGL, particles, shaders, scroll scenes, etc.)
|
||||
|
||||
## Compatibility
|
||||
|
||||
- Follows the [Agent Skills specification](https://agentskills.io).
|
||||
- Installable via [`vercel-labs/skills` CLI](https://github.com/vercel-labs/skills) to [supported agents](https://github.com/vercel-labs/skills#supported-agents).
|
||||
|
||||
## skills.sh leaderboard
|
||||
|
||||
[skills.sh](https://skills.sh/) ranks skills using **anonymous, aggregated** install telemetry from the `skills` CLI ([docs](https://skills.sh/docs)). There is no separate “submit” step: publishing a public GitHub repo and sharing the `npx skills add owner/repo` command is how people discover and install your skill.
|
||||
|
||||
## Security
|
||||
|
||||
Review any skill before installing. This repository contains only Markdown instructions and references—no executable scripts. For reporting security issues in dependencies you use locally, follow your organization’s process; general guidance appears on [skills.sh docs](https://skills.sh/docs).
|
||||
|
||||
## 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 — see [LICENSE](LICENSE).
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
# design-dna
|
||||
|
||||
**Language / 语言:** [English](README.md) · [简体中文](README.zh-CN.md)
|
||||
|
||||
---
|
||||
|
||||
面向编程智能体（Cursor、Claude Code、Codex 等，完整列表见 [skills CLI 文档](https://github.com/vercel-labs/skills#supported-agents)）的 [Agent Skill](https://agentskills.io)。它提供一套结构化流程，把视觉设计身份整理成可机读的「Design DNA」，并覆盖三个层面：**设计系统（可度量 token）**、**设计风格（定性感受）**与**视觉特效（非常规纯 CSS 的表现）**。
|
||||
|
||||
可通过开源 [`skills` CLI](https://github.com/vercel-labs/skills) 从本仓库安装。更多技能见 [skills.sh](https://skills.sh/)。
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 维度 | 说明 |
|
||||
|------|------|
|
||||
| **设计系统** | 可度量 token：色彩、字体、间距、版式、形状、层级、动效、组件等 |
|
||||
| **设计风格** | 定性描述：情绪、视觉语言、构图、图像风格、交互气质、品牌语气等 |
|
||||
| **视觉特效** | 超出「普通 CSS」的实现：Canvas、WebGL、3D、粒子、着色器、滚动驱动动效、光标效果、SVG 动画、玻璃拟态等 |
|
||||
|
||||
技能内置 **三阶段** 工作流：
|
||||
|
||||
1. **结构** — 展示完整 schema 与各字段含义（见 `references/schema.md`）。
|
||||
2. **分析** — 根据截图、图片或 URL，输出 **字段齐全的 JSON 画像**（无空字段；多参考冲突时注明主方案与变体）。
|
||||
3. **生成** — 在已有 DNA JSON + 内容的前提下落地实现（默认：自包含 HTML/CSS/JS），并遵循 `references/generation-guide.md` 中的质量检查。
|
||||
|
||||
各阶段可单独使用，也可串联（例如：分析 → 生成）。
|
||||
|
||||
## 安装
|
||||
|
||||
需要本机已安装 [Node.js](https://nodejs.org/)（用于 `npx`）。将本仓库发布到 GitHub 后，假设仓库为 `OWNER/REPO`：
|
||||
|
||||
```bash
|
||||
# 安装到 CLI 检测到的智能体（交互式）
|
||||
npx skills add OWNER/REPO
|
||||
|
||||
# 示例：仓库为 github.com/your-username/design-dna
|
||||
npx skills add your-username/design-dna
|
||||
|
||||
# 仅 Cursor、非交互、安装到用户全局目录
|
||||
npx skills add your-username/design-dna -a cursor -g -y
|
||||
```
|
||||
|
||||
**只列出仓库内技能、不安装：**
|
||||
|
||||
```bash
|
||||
npx skills add https://github.com/OWNER/REPO --list
|
||||
```
|
||||
|
||||
**从本地路径安装：**
|
||||
|
||||
```bash
|
||||
npx skills add /path/to/design-dna -a cursor -y
|
||||
```
|
||||
|
||||
安装后的具体路径因智能体而异；Cursor 请参阅 [Cursor Skills 文档](https://cursor.com/docs/context/skills)（全局安装常见位置为 `~/.cursor/skills/`）。
|
||||
|
||||
## 仓库结构
|
||||
|
||||
```
|
||||
design-dna/
|
||||
├── SKILL.md # 技能入口：YAML 头信息 + 智能体执行说明
|
||||
├── references/
|
||||
│ ├── schema.md # 完整 JSON 字段与语义
|
||||
│ └── generation-guide.md # 从 DNA 到实现与自检
|
||||
├── README.md # 英文说明
|
||||
├── README.zh-CN.md # 本文件（中文）
|
||||
├── LICENSE
|
||||
└── .gitignore
|
||||
```
|
||||
|
||||
`SKILL.md` 通过相对路径引用 `references/`；Fork 或再发布时请保持该目录关系。
|
||||
|
||||
## 何时应加载本技能
|
||||
|
||||
`SKILL.md` 的 `description` 中列出了英文触发词。概括而言，适合在用户需要以下任一能力时使用：
|
||||
|
||||
- 查看或讲解 **Design DNA 的结构 / schema**
|
||||
- 根据 **参考图、截图或网页 URL** 做结构化 **分析并输出 JSON**
|
||||
- 在已有 **DNA JSON** 的前提下 **生成界面或原型**
|
||||
- 明确涉及 **视觉特效**（WebGL、粒子、着色器、滚动场景等）的分析或实现
|
||||
|
||||
## 兼容性
|
||||
|
||||
- 符合 [Agent Skills 规范](https://agentskills.io)。
|
||||
- 可通过 [`vercel-labs/skills` CLI](https://github.com/vercel-labs/skills) 安装到 [其支持的智能体](https://github.com/vercel-labs/skills#supported-agents)。
|
||||
|
||||
## 与 skills.sh 排行榜的关系
|
||||
|
||||
[skills.sh](https://skills.sh/) 上的排序依据 `skills` CLI 上报的 **匿名聚合安装数据**（见[官方说明](https://skills.sh/docs)），**没有**单独的「提交上架」流程。将仓库公开到 GitHub，并在 README 或文章中分享 `npx skills add owner/repo`，即完成对外发布；安装量提升后，更容易在排行榜中被看到。
|
||||
|
||||
## 安全说明
|
||||
|
||||
安装任何技能前请自行审阅仓库内容。本仓库仅包含 Markdown 说明与参考文档，**不包含**可执行脚本。若需报告与生态相关的安全问题，可参考 [skills.sh 文档](https://skills.sh/docs)中的指引。
|
||||
|
||||
## 贡献
|
||||
|
||||
欢迎提 Issue 与 Pull Request。若修改技能行为，请同步更新 `SKILL.md` 及 `references/` 下相关文件，保持文档与行为一致。
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT — 见 [LICENSE](LICENSE)。
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
name: design-dna
|
||||
description: >-
|
||||
Extract, define, and apply design DNA across three dimensions: design system
|
||||
(tokens), design style (qualitative feel), and visual effects (Canvas, WebGL,
|
||||
3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user
|
||||
wants to see the full 3-dimension design structure/schema, (2) a user provides
|
||||
images, screenshots, or URLs of reference designs and wants them analyzed into
|
||||
a structured JSON profile covering all three dimensions, (3) a user has a
|
||||
Design DNA JSON and content and wants a design generated from it, or (4) any
|
||||
combination of these phases. Triggers on "design DNA", "extract design style",
|
||||
"analyze design", "design tokens from reference", "generate design from JSON",
|
||||
"design system from screenshot", "design profile", "style guide JSON",
|
||||
"visual effects analysis", "design with effects", "3d design analysis".
|
||||
---
|
||||
|
||||
# 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](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](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](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.
|
||||
@@ -0,0 +1,209 @@
|
||||
# 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:
|
||||
```css
|
||||
: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
|
||||
|
||||
| DNA Field | Guides |
|
||||
|---|---|
|
||||
| aesthetic.mood | Overall emotional feeling — warm tones, cool precision, etc. |
|
||||
| visual_language.whitespace_usage | padding/margin generosity |
|
||||
| visual_language.contrast_level | How much elements pop vs. blend |
|
||||
| composition.hierarchy_method | What tool to use for emphasis |
|
||||
| composition.balance_type | Symmetric layout vs. dynamic asymmetry |
|
||||
| imagery.graphic_elements | Decorative SVGs, gradients, patterns |
|
||||
| brand_voice_in_ui.tone | Microcopy phrasing |
|
||||
| interaction_feel.microinteraction_density | How many hover/click effects |
|
||||
|
||||
## Dimension 3: visual_effects → Special Rendering
|
||||
|
||||
### Technology Selection by Performance Tier
|
||||
|
||||
| Tier | Technologies | When to Use |
|
||||
|---|---|---|
|
||||
| **lightweight** | CSS animations, SVG SMIL, vanilla JS | `overview.performance_tier` = "lightweight" |
|
||||
| **medium** | Canvas 2D, GSAP, Lottie, anime.js | `overview.performance_tier` = "medium" |
|
||||
| **heavy** | Three.js, custom GLSL, Pixi.js, WebGL | `overview.performance_tier` = "heavy" |
|
||||
|
||||
### 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`:
|
||||
|
||||
```js
|
||||
// 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:
|
||||
```html
|
||||
<!-- 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`)
|
||||
@@ -0,0 +1,366 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user