这是什么
一套三阶段流程，从可量化 token、定性风格和视觉效果三方面抓住设计身份。它输出一份完整的 Design DNA JSON，再把这份 JSON 套到新内容上。
>-
它对设计意味着什么
- 把一张截图或一个网址，变成带命名的颜色、字体和间距数值。
- 不止记录可量化 token，还记下氛围、构图和品牌语气。
- 捕捉纯 CSS 表达不了的 Canvas、WebGL、着色器和滚动效果。
包含哪些内容
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
如何安装
Design DNA
-
克隆这个仓库。
git clone https://github.com/zanwei/design-dna -
把 Codex 指向这个 Skill 文件。
SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
分析之前先要一份 schema，把三个维度看全。
-
把参考图或网址交给 Codex，让它填出一份 DNA JSON。
-
把这份 JSON 连同你的内容传进去，生成一个自包含的 HTML 页面。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。