用途
Design DNA 用于把轻量级的视觉参考转化为可迁移的设计决策，并进一步实现和视觉验证。它不要求用户提供情绪板或多张截图，接受用户已经提供的最轻量输入。
输入优先级
接受用户已提供的最轻量输入：
- 自然语言的感觉或类比
- 具名产品、出版物、地点或视觉流派
- 公开 URL
- 一张或多张可选截图
当前三种输入已提供足够方向时，不要索取图片。仅当目标界面或主要用户任务确实未知且无法推断时，才提出一个聚焦的问题。
翻译工作流
1. 区分来源与目标
识别：
- 来源信号：正在被翻译的感觉或参考
- 目标职责：新界面必须帮助用户完成什么
- 迁移边界：什么可以延续，什么必须保持原创
在保留来源外观之前，先保留目标的可用性。一个受编辑杂志启发的财务仪表盘，仍然必须像财务仪表盘那样便于浏览。
2. 检查可用证据
对于 URL，在浏览器工具可用时，检查桌面和移动尺寸下的实时页面。对于图片，只检查可见证据。对于没有可访问证据的具名参考，使用公认的高层特征，并明确标注不确定的推断。
绝不编造无法观察到的精确测量值、字体、交互行为或隐藏状态。将不确定的值表达为范围或设计意图。
3. 提取设计 DNA
将证据翻译为 5-8 条规则，覆盖对该目标有实质影响的维度：
- 层级与信息密度
- 网格、对齐与构图
- 字体角色与比例关系
- 颜色角色与对比策略
- 表面、边框、圆角与深度
- 图像与图标处理
- 交互与动效节奏
- 响应式转换
每条规则都必须是可操作的。包含决策、原因和实现后果。
反例：“使用干净、高级的美学。”
正例：“通过字体比例和留白而非嵌套卡片来构建层级，因为参考具有编辑感；主要区块保持无边框，仅将带边框容器保留给交互工具。”
4. 去除品牌指纹
不要复制标志、专有插图、商标形状、标志性布局、精确文案或独特资产组合。不要逐像素复现参考。
将具体属性翻译为角色：
- 精确品牌蓝 -> 一个克制的操作强调色
- 专有字体 -> 具有相同功能对比度的字体
- 标志性主视觉构图 -> 底层层级原则
- 可识别插图 -> 使用兼容视觉处理的新主题
结果应在设计逻辑上相关，但明显属于目标产品。
5. 解决冲突
当来源与目标冲突时，按以下顺序决策：
- 任务完成与内容可读性
- 无障碍与响应式行为
- 目标品牌与领域惯例
- 迁移的视觉特征
只说明有后果的妥协。不要用常规实现叙述增加用户负担。
6. 实现
编码前，将每条设计 DNA 规则映射到可见的实现位置。复用项目的框架、组件、令牌和图标库。仅当设计语言重复足够多、足以证明其合理性时，才创建新抽象。
使用真实或代表性内容。实现预期的交互状态和响应式行为，而不仅是静态主视觉。
7. 视觉验证
当浏览器工具可用时：
- 在桌面和移动尺寸下渲染结果
- 捕获截图
- 检查层级、溢出、文本换行、交互状态和品牌独立性
- 修复可见故障
如果未检查截图，不要声称进行了视觉验证。
输出契约
保持分析简洁且面向行动。
设计 DNA
提供 5-8 条编号规则。每条规则包含：
- 决策
- 为什么可迁移
- 实现
翻译映射
使用紧凑表格：
| 来源信号 | 翻译规则 | 应用位置 |
交付物
创建或修改所请求的 Web 界面。如果不存在代码库且用户只要求探索方向，创建能演示该语言的最小可运行产物。
验证
报告：
- 桌面和移动状态
- 修复的主要问题
- 任何未验证的假设
质量门
完成前，确认以下五项陈述均为真：
- 用户没有被强制提供超出必要的参考材料。
- 设计 DNA 包含可观察的决策，而非美学形容词。
- 目标工作流仍适合其领域。
- 没有复制可识别的品牌指纹。
- 在工具允许时，实现经过了视觉检查。