design-dna
把品牌视觉拆成可度量的 token 与质感层面，便于一步步落地
抽取并在设计系统、风格与视觉特效三维度定义与应用设计 DNA
把参考图、截图或现有设计拆解成完整的 Design DNA，覆盖三维度：design system（tokens）、design style（视觉语感）和 visual effects（Canvas、WebGL、粒子等）。用在需要把参考转为结构化配置、生成设计或从 JSON 恢复视觉风格时最有用。输出标准化的 JSON 配置，方便设计与工程同步落地。
▸ 展开 SKILL.md 英文原文
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".
帮我安装这个 skill：https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/design-dna/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/design-dna/SKILL.md"# 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 sche