最近我在研究给自己做一个"个人站"，但我不想让 AI 随便生成一个模板页，也不想做看起来很炫但不知道在表达什么的那种，还是想有些表达的。
但我不是设计背景出身，花了点时间研究了下用 Codex 做 UI 的最佳实践，和大家分享下我的经验。
核心经验：先做设计说明，再做页面
大家一定要记住，用 Codex 做 UI，最重要的不是让它立刻写代码，而是先把"你想要什么样"说清楚。
很多人一上来会这样写：
帮我做一个高级感个人网站。
结果通常是这样的——它可能给你一个深色背景、几个紫蓝渐变、三张功能卡，再加一堆看起来很 AI 的小标签。
正确的打开方式是：
先不要写代码。请先根据我的需求和参考，整理一份 DESIGN.md。我确认后，再开始实现页面。
这就是我今天想分享的核心经验：先做设计说明，再做页面。
DESIGN.md 是什么
DESIGN.md 不用想得很复杂。你可以把它理解成一份给 Codex 看的设计说明。它不是写给设计师看的专业文档，而是帮 Codex 把"感觉"拆成可执行的规则。
比如：
- 这个页面想表达什么
- 给谁看
- 学哪个参考
- 不学哪个参考
- 用什么颜色
- 字体是什么感觉
- 首屏怎么排
- 按钮怎么做
- 卡片多不多
- 动效要轻还是重
- 哪些 AI 味不要出现
你完全不用自己从零写这份文件，更好的方式是让 Codex 帮你写。但你要知道它应该包含什么，不然它写出来的 DESIGN.md 也会很虚，最后页面还是跑偏。
可以直接复制这段：
我想做一个个人站，不要直接写代码。
请先帮我整理一份 DESIGN.md。这份 DESIGN.md 要用普通人能看懂的话写，不要堆专业术语。
请写清楚：
1. 这个页面要表达什么
2. 页面给谁看
3. 参考里要学什么
4. 参考里不要学什么
5. 颜色怎么定
6. 字体大概是什么感觉
7. 首屏怎么排
8. 按钮和卡片怎么做
9. 动效做到什么程度
10. 哪些常见 AI 味不要出现
写完 DESIGN.md 后先停，等我确认。
如果你只改一个习惯，就改这个：不要一上来让 Codex 写页面，先让它写 DESIGN.md。
先找参考，不要让 Codex 瞎猜
做个人站、作品集、产品页都一样，最好先找参考。这里的参考分三类。
第一类：可以直接用的风格参考
有些网站已经把风格整理好了，最适合给 Codex 用。比如 Refero Styles。
它的好处是，你不是只能看到截图，还能拿到现成的 DESIGN.md、颜色、字体和样式规则。这种参考最省事。
你可以找到一个喜欢的风格，然后把它的 DESIGN.md 复制给 Codex，再说：
请读取这份 DESIGN.md。接下来做我的个人站时，参考这份设计语言。注意：只借鉴风格，不复制原网站的品牌、文案和素材。
第二类：有喜欢的网站，先提取它的设计规则
如果你看到某个真实网站很好看，想借它的风格，不要只截图丢给 Codex。可以用 web-to-design-md。
你不用理解太多技术细节，简单说它可以把一个网页拆成设计说明。它会把网页里的颜色、字体、按钮、间距、卡片样式整理出来，变成 Codex 能读的文件。
基本流程是：
- 找到参考网站链接
- 用 web-to-design-md 生成 DESIGN.md
- 删除对方的 logo、文案、图片和品牌元素
- 把剩下的风格规则交给 Codex
- 让 Codex 用你的内容重新做
这里要注意边界：参考网站只能拿来借风格，不要复制别人的品牌、图片、文案和完整结构。
第三类：凭感觉描述，让 AI 帮你找参考
如果你连参考网站都没有，但大概知道自己想要什么风格，可以让 Codex 帮你找几个参考。
比如：
我想做极简风格的个人站，主色调用暖灰 + 橙色，参考一些设计工作室的官网。帮我找 5 个参考，每个附上简要说明，为什么适合我。
几个实用技巧
DESIGN.md 先于人：不管用什么工具，先写清楚再动手永远比边写边改省时间。
参考要够具体：告诉 Codex "做高级一点" 没有用。给它一个参考链接，告诉它哪些地方要学、哪些不要学。
多轮迭代是正常的：第一版 DESIGN.md 通常不会完全满意。确认后再写代码，比写完了再改快 10 倍。
AI 味要明确禁止：在 DESIGN.md 里专门列一条"哪些 AI 味不要出现"，比如紫蓝渐变、毛玻璃、发光边框、科技感线条、三个功能卡并列。
📝 我的点评
这篇文章的核心方法论——"先写 DESIGN.md 再写代码"——和 Agent Skill 的优化逻辑是同一个道理：让 AI 先输出设计说明/计划/大纲，确认后再进入执行阶段，而不是一次把最终目标摊在它面前。
这种"先写说明文档，再执行"的模式可以迁移到很多场景：写代码前先写设计文档、写文章前先写大纲、做产品前先写 PRD。它的核心价值不是文档本身，而是把"模糊的感觉"翻译成 AI 能执行的规则，同时也给了自己一个确认和纠偏的机会。
工具推荐方面，styles.refero.design 和 web-to-design-md 值得关注，前者提供了现成的风格参考包，后者能把任意网页变成可复用的设计规则——即使不做网页设计，这种"把成品拆成可复用规则"的思路也很有参考价值。
原文链接：https://x.com/Jackywxsz/status/2072614425660731498 | 作者：Jacky无限生长（Jackywxsz）
本文为转载文章，内容有删改。