design-dna
一个能提取、解析并应用视觉设计DNA的AI技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-dna。 它的用途是：一个能提取、解析并应用视觉设计DNA的AI技能。 完整的 Skill 内容见：https://321skill.com/skills/design-dna/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请分析这个网站的设计DNA。”并附上网址。它会提取该网站的颜色、字体、布局等设计系统，解读其简约或华丽的风格感受，并识别可能存在的滚动视差或动画特效，最终输出一份结构化的JSON报告。或者，你可以直接给它一份设计DNA JSON和内容，让它生成一个符合该风格的新设计稿。
介绍
设计DNA技能旨在解决设计师和开发者难以系统化捕捉、复用复杂视觉风格的问题。传统工具通常只能分析颜色或字体等单一维度，而该技能能从一个参考图或网址中，深度解析出包含设计系统（如色板、间距）、设计风格（如情绪、构图）和视觉特效（如粒子、3D效果）三个维度的完整设计基因，并输出为结构化的JSON档案。
使用时，用户只需提供参考图片、截图或网址，技能便会自动分析并生成一份详尽的设计DNA JSON描述。用户也可以直接提供一份已有的DNA JSON，让AI基于此生成新的设计。整个过程支持分阶段进行，例如先获取结构框架，再进行分析或生成。
该技能非常适合UI/UX设计师、前端开发者、品牌设计师以及任何需要快速解构优秀设计、建立可复用设计系统或确保多平台设计一致性的专业人士。它降低了从灵感参考到可执行设计规范之间的认知与执行门槛。
与同类设计分析工具或简单的取色插件相比，该技能的核心区别在于其三维度的系统化分析框架。它不仅提取可量化的设计令牌（Token），还深入解读感性的设计风格，并能识别复杂的动态视觉特效，提供了从微观参数到宏观感受再到前沿效果的完整设计图谱，而非零散的设计属性。
核心特点
该技能首创了三维度（设计系统、设计风格、视觉特效）的设计DNA分析框架，能同时提取可量化的设计令牌、感性的风格语言以及复杂的动态视觉效果（如WebGL、粒子系统），将零散的设计属性整合为一份完整、可复用的结构化基因档案。
注意事项
该技能高度依赖输入参考素材的视觉质量和清晰度，对于极度抽象、概念化或信息密度极低的设计，分析结果的准确性和完整性可能受限。
常见问题
设计DNA技能能分析哪些类型的参考？
可以分析图片、网页截图以及直接输入网址，解析其中的设计系统、风格和视觉特效。
生成的Design DNA JSON有什么用？
可用于存档设计规范、在不同项目中快速复用一致风格，或直接作为输入让AI生成符合该DNA的新设计。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-dna/raw/index.md 读取 design-dna 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-dna/raw/index.md（查看排版版本）