ai-design-skills 是一份给 AI 编程助手读的设计工作指南。它把“页面给谁看、希望读者做什么、内容怎么排、字号间距怎么选”写成规则，让 Codex 做网页时有一套方法可循。
这次我们让 Codex 做了两版同样的网页。一版直接按需求做，另一版额外读这份 Skill。两版都能用，也都不难看；差别主要出现在页面节奏、排版和取舍，并没有出现“加上以后全面胜出”的结果。
先弄懂 Skill 是什么
把 Codex 想成一位会动手的网页制作助手，Skill 就像交给它的一份工作说明。模型还是同一个，只是多读了一份“遇到这类任务，请按这些步骤和规则做”的文件。
它不需要下载一个新模型，也不是装上就能换皮的网站主题。你把指南放到助手能读取的位置，再给出产品需求，真正写代码的仍然是 Codex。
我们使用的 ai-design-skills 固定版本 只有 landing-page-design 这一项技能，主要管落地页。这里的“落地页”，就是围绕一个产品或活动，把读者引向某个明确行动的网页，例如试用、报名或下载。
这份指南既管内容顺序，也管视觉细节：先交代对象和目标，再组织介绍、收益、用法和常见问题，并约束字号、间距、圆角和动效。具体规则可以查看 SKILL.md 原文。
为什么只说“做得好看”容易得到常见的页面套路
“做一个好看的网页”留下了很多空白：第一眼该看标题还是图片？按钮写什么？哪些内容该靠近，哪些该分开？如果不交代，AI 就得一次补齐这些选择。
大标题、卡片、按钮本身都很有用。所谓“像模板”，往往是它们被反复组合，却没有围绕你的产品分出重点。Skill 的实用之处，是把一部分模糊要求写成明确的做法。它能帮助你检查遗漏，也可能让多次产出的规则更一致。
但一份指南里也有作者的偏好。比如这份 Skill 对字体、背景渐变和间距有自己的限制，这些不是放之四海皆准的审美标准。它最终适不适合你的网页，还是要看实际结果。
这次怎么比
我们选了一个没有隐私信息的虚构产品“拾页”：给大学生和自学者用的阅读摘记工具。网页只有一个主要目标，让读者点击“试写一条摘记”，进入页面里的演示区。
两版都收到完整事实：书名可以空着，摘记必填且最多 180 个字符；点击后显示摘记卡；清空或刷新就恢复初始状态。没有账户、后台、真实客户或付费服务，展示的 0 元也明确标为“虚构演示价格”。
| 固定项目 | 本次做法 |
|---|---|
| 模型与推理档 | 两个独立任务的启动参数均为 gpt-6.1-sol、max |
| 上下文 | 两个任务都从全新上下文开始，不继承这段教程对话 |
| 输入需求 | 同一份完整需求原文，文件 SHA256 完全相同 |
| 技术栈 | HTML、CSS、原生 JavaScript，无框架或构建工具 |
| 素材 | 都只用代码画形状和简单 SVG，不下载图片、字体或图标库 |
| 中文字体 | 两版统一使用同一套系统字体，未比较字体选择能力 |
| 生成次数 | 每组只生成一版，不挑选候选，不追加人工美化 |
| 唯一额外设计输入 | B 版读取固定版本的 SKILL.md，A 版不读取 |
两组都没有追加需求问答，也没有修改生成后的运行代码。A 做了静态检查，B 还自行做了无浏览器的逻辑检查；随后，我们用同一套浏览器流程检查两组。
这是一次控制主要输入的样例对比。平台启动参数和任务记录已保存，但没有独立读取服务器内部模型遥测，也没有锁定随机种子；因此不能把所有差异都归因于 Skill，更不能把一组结果推广成普遍结论。
第一眼看 两版其实很像
两边都是同一浏览器、1440 × 1000 视口的真实截图。对比图只加了标签并按相同比例缩小，网页内容没有后期美化。
A 已经做出了暖纸色背景、绿色按钮、书页卡片和明确的试用入口。B 也选择了相近的阅读氛围。单看这张图，很难说谁突然“高了一个档次”。
能看清的变化是：A 的导航铺在页头，B 把导航收进悬浮的小条；A 的标题是深绿色，B 按指南用了黑到灰的文字渐变。两版的主标题甚至只差一个动词：A 是“写成自己的”，B 是“留成自己的”。
这也说明，需求写清楚时，原本的模型已经能完成不少设计工作。 Skill 更像增加约束和提醒，不能保证每个部分都发生明显变化。
排版和间距 变化可以具体量出来
我们从浏览器读取了实际显示的尺寸，而不是凭感觉给“高级感”打分。
| 项目 | A 未读取 Skill | B 读取 Skill |
|---|---|---|
| 桌面主标题字号 | 64 px | 60 px |
| 桌面主标题行高 | 96 px | 60 px |
| 主要按钮字号 | 14 px | 16 px |
| 主要按钮内边距 | 上下 13、左右 25 px | 上下 8、左右 12 px |
| 主要按钮外部尺寸 | 184 × 52 px | 170 × 48 px |
| 手机主标题字号 | 约 40.56 px | 48 px |
“px”是像素，可以先把它理解成屏幕上的尺寸单位。“行高”是每行文字占的高度，“内边距”是文字到按钮边缘的空隙。
B 的标题行距更紧，按钮文字更大，但按钮本身略小，因为四周留的空隙减少了。按钮的 16 px 字号、8/12 px 内边距，能直接对应到 Skill 的规则。它让一些选择有据可查；至于哪种尺寸更顺眼，要结合整页看。
看完整页 B 更松 也更长
这是整页轮廓图，灰色区域表示较短的页面已经结束，没有把两版硬拉成同样高度。完整尺寸原图另行保留于复核材料。
B 多了一个独立的大字标语区：“不必写得完整，先把这一刻的理解留下。”这对应了 Skill 明确要求的标语展示段落。B 的常见问题采用右侧单列，A 则把问题排成两列；B 的结尾行动区也留了更多空间。
结果很直接：在 1440 px 宽度下，A 整页高 3672 px，B 是 4893 px，多了 1221 px。在 390 px 宽度下，A 是 4796 px，B 是 6147 px。
更松的排版给每一段更多展示空间，也带来更多滚动。想慢慢讲清产品的人，可能喜欢 B 的节奏；想把内容压紧一点的人，可能更偏好 A。两版都能通过主要按钮直接跳到体验区，页面更长并不等于用户一定花更多时间才能试用。
配色和文案 不是每处都更突出
A 把体验区放在深绿背景上，和前后内容拉开了明显差别；B 沿用浅色背景，表单与预览更融入整页。要快速寻找“在哪里开始操作”，A 的颜色分区更醒目；如果更喜欢统一的浅色页面，B 更接近这种方向。
文案也没有出现全面重写。两版都说明了无需注册、不上传、刷新清空，主行动都保持“试写一条摘记”。B 增加了几句围绕阅读体验的表达，但 A 原有说明已经清楚。我们没有真实访客数据，不能从截图推断哪版更能促成点击或注册。
这里的变化更像“按一份特定指南重新安排”，而不是自动补上所有设计短板。是否好用，要看这份安排能否解决你眼前的问题。
手机上 两版都能用
“响应式”可以理解成：屏幕变窄时，网页会重新排布。两版都把桌面左右并排的内容改成上下排列；B 的手机标题更大、行距更紧，A 的标题间隔更松。
统一浏览器检查中，A、B 都通过了 17/17 项。其中包括桌面及 390、320 px 宽度无横向溢出、主要按钮跳转、空白输入的行内提示、摘记预览、180 字符限制、清空与刷新、手机宽度下的表单操作、表单标签与首个键盘焦点的可见性、减少动态效果规则，以及无外部网络请求和脚本错误。
所以，不能把这次结果写成“没装 Skill 的页面在手机上不能用”。两版的基本功能都通过了。检查使用的是同一台桌面 Chrome 的不同窗口宽度，不是所有手机真机，也不是完整的无障碍认证。
它适合帮谁
如果你刚开始让 AI 做产品介绍页，不知道该补哪些信息，这份指南可以作为检查清单：产品给谁用、按钮让人做什么、有没有把使用步骤和疑问讲清楚。它把一部分设计经验变成了 AI 可以逐条执行的文字，这比反复说“再好看一点”更具体。
如果你已经有品牌字体、配色和组件规范，就先让自己的规范优先。这份 Skill 带有明显风格偏好，照搬可能增加不需要的段落，或者把你本来想要的紧凑页面拉长。追求独特艺术风格、复杂后台或完整商业上线，也需要额外设计和开发工作。
这组“拾页”样例更能说明：B 采用了更多可追溯的规则，A 的初稿也已完整。Skill 帮助明确做法，同时可能增加段落和页面长度。 这是对这组样例的判断，不是通用排名。
小白怎么开始用
在新示例项目里，把固定版本的技能文件放到 .agents/skills/landing-page-design/SKILL.md，保留随附许可，然后明确让 Codex 先读它。项目级目录的说明见 OpenAI 官方技能文档。你可以直接这样说：
请先读取当前项目 .agents/skills/landing-page-design/SKILL.md。
我要做一个产品介绍页。目标读者是……，产品实际提供……，
唯一主要行动是……，目前有哪些真实素材和证据……。
请先给出内容和布局方案，再写代码。
缺少的事实先问我，不要编造客户评价或效果数据。
先补清楚需求，再试一次，比只追求“装了一个很厉害的工具”更容易判断它有没有帮上忙。Skill 文件按 MIT 许可提供；Codex 本身的账户、额度和用量另算。
版本 来源和复核材料
AI 辅助制作与核查，2026-10-29 UTC（北京时间 2026-10-30）。产品、书名、摘记和价格均为明确标注的虚构演示素材。本次仅在本机运行，没有外部托管，未新增付费 API 或密钥。
完整提交为 ded7efc9d5c02761c41a03caf3b78f9259ab8828，提交时间为 2026-10-27 15:57:48 UTC。本次复核材料保留 Elaya 的 MIT LICENSE，以及 Skill 内 Leonxlnx 的 MIT 声明。
本次复核材料保留了两组相同需求、启动参数与任务提示、原始代码、生成记录、实际浏览器检查结果、桌面与手机整页及局部原图。本文暂未提供公开资料包下载链接。两组代码均未由对比文章作者修饰或修复；单次生成仍有随机性，欢迎用自己的需求复验。
