Hotline:
很多开发者第一次用 AI 做网页，习惯直接扔过去一句话：照着这个网站做一个类似的。
页面通常很快就能出来。但换一个项目、换一套内容，还是不知道标题为什么放这里、按钮为什么更突出。AI 帮你完成了一次页面，却没有帮你建立设计判断。
我现在更推荐另一种用法：先不要让 Codex 写代码，而是让它把一个优秀网站拆开讲清楚，再把分析直接标注到完整截图上。
这样得到的不是抽象理论，而是一张可以反复查看、继续追问的“设计练习卡”。
别急着仿，先看懂它为什么有效
一个页面好不好看，很少由某个孤立元素决定。
真正起作用的是元素之间的关系：字号差形成信息层级，内容宽度控制阅读节奏，留白负责分组，颜色和对比度引导注意力。
如果只是让 AI 仿站，它很容易复制表面的圆角、渐变和卡片，却忽略这些关系。最后得到的页面“元素都在”，但层级、节奏和重心不对。
所以第一步不应该是生成代码，而是让 Codex 回答几个更具体的问题：
- 第一眼最先看到什么，为什么？
- 页面如何区分主信息、辅助信息和行动按钮？
- 哪些留白在分组，哪些留白在制造呼吸感？
- 字号、字重、颜色和宽度怎样共同控制阅读顺序？
这些问题会迫使 AI 从“描述页面有什么”，转向解释“页面为什么这样设计”。
一张标注截图，解决分析和画面对不上的问题
纯文字分析有一个很现实的问题：读到“第二屏左侧的留白增强了视觉层次”时，你还要切回网页，寻找它说的究竟是哪一块。
来回切换几次，注意力就断了。
更有效的做法，是让 Codex 截取完整页面，用编号、箭头和短句标出视觉焦点、信息层级、对齐基线、模块间距和行动入口。
Codex 当前能接收截图等视觉参考，也能在浏览器中查看页面并进行视觉检查。“分析页面”和“指出证据”因此可以放进同一个工作流。
标注不能只是把术语贴到图片上。每一处都要说明用了什么手法、解决什么问题、迁移时保留什么原则。
我会这样完成一次设计拆解
先选一个与当前项目相近的页面。做工具产品，就选工具类产品页；做内容网站，就选博客或知识库。参考对象越接近，规则越容易迁移。
然后把网址或完整截图交给 Codex，先要求它只分析，不写代码：
请从视觉层级、字体、留白、对齐、颜色、内容密度和行动路径七个方面分析这个页面。
不要只描述用了什么元素，要解释每个设计选择解决了什么问题。
先给出整体判断，再列出最值得学习的 5 个细节。
确认分析有价值后，再让它生成或处理完整页面截图：
请在完整截图上标注刚才的 5 个关键设计点。
每个标注必须指向具体元素，并用一句短话说明“设计手法 + 实际作用”。
避免遮挡正文和按钮，保证缩小后仍然清楚可读。
最后才进入迁移阶段。把自己的页面交给它逐项对比：哪些原则已经用上，哪些地方层级不清楚，哪三处修改收益最大。
改完后再截一次图，对比前后变化。你得到的不只是结果，还有“为什么改、效果如何”的反馈闭环。
最容易踩的三个坑
第一个坑，是只选视觉效果很炸裂的网站。大量动画和 3D 未必适合你的业务，刚开始更应该学习稳定、清楚、能迁移的设计。
第二个坑，是接受“更高级、更现代、更有呼吸感”这类模糊结论。没有指向具体元素、没有说明因果关系的评价，很难指导下一次设计。
第三个坑，是把学习变成复制。真正要迁移的是层级、节奏和决策原则，不是对方的品牌颜色、文案、插画和版式外壳。
谁现在最适合用这套方法
独立开发者可以用它减少“功能做完了，页面总差一点”的反复试错。
前端工程师可以把设计评审里的主观感受，转成具体的视觉问题。
技术内容创作者则可以把抽象分析变成读者愿意收藏的标注图。
我的判断
AI 对非设计师最大的价值，不只是更快生成页面，而是降低获得设计反馈的成本。
过去你看到一个优秀网站，可能只能说“很好看”；现在可以让 Codex 帮你把它拆成可观察的证据和可迁移的规则。但 AI 给出的分析仍然需要你对照页面验证，不能把它的判断当成标准答案。
真正有复利的工作流，不是“参考图进去，代码出来”，而是“观察、解释、标注、迁移、复盘”。
当你积累了十几张这样的设计练习卡，再做新页面时，你依赖的就不再只是 prompt 运气，而是一套逐渐形成的设计判断。