让 Codex 设计前端不丑：Skill、参考站点与重开发流程

整理了一个仓库：https://github.com/aihes/frontend-design-learning.git

这份手册整理这轮实验里所有关键原则：不同前端设计 Skill 的底层原理、Variant这类外部设计工具的价值、参考库如何用、以及最重要的一步：让 Codex 先找类似站点，抽象设计语言，再重新开发。

一句话结论：Codex 不应该被当成独立设计师，而应该被当成有浏览器和工程能力的前端实现者。设计方向要由 Skill、参考站点、设计系统和截图 QA 共同约束。

为什么 Codex 直接设计会丑

Codex 直接收到“做一个好看的页面”时，通常会走向平均值：

• 居中大标题。
• 三列卡片。
• 紫蓝渐变。
• 默认字体。
• 大面积圆角卡片。
• 文案像模板。
• 只做桌面成功态，不做移动端、空状态、加载态、错误态。

这不是单个模型的问题，而是 prompt 过于空泛。模型没有真实设计目标、参考图、品牌约束和验收标准，只能回到训练集中最常见的 UI 形态。

所以正确做法不是继续说“再高级一点”，而是把设计问题拆开。

前端设计的六层问题

只改 CSS，最多解决第三层的一部分。真正好看的前端，通常是六层都处理过。

1. Skill 的内部原理

interactive-portfolio

底层原理：作品集不是简历网页化，而是一次机会转化。

它最适合个人网站、作品集、简历站。核心是 30 秒测试：

• 你是谁？
• 你做什么？
• 你最强的证明是什么？
• 我怎么联系你？

它要求项目优先于经历堆叠。项目不是列表，而是证据：问题、角色、过程、关键决策、结果、链接。

对 Offer-Compass 来说，interactive-portfolio 应该放在最前面，用来把简历从时间顺序改成证明顺序。

frontend-design

底层原理：先决定视觉立场，再写代码。

它会逼 Codex 先选一个明确方向：编辑感、极简、工业风、奢华、玩具感、产品档案、战报、控制台。字体、颜色、背景、动效、空间都必须服务这个方向。

它解决的是“不要像普通 AI 模板”。

design-taste-frontend

底层原理：LLM 生成 UI 有统计偏差，要用规则反向校准。

它会禁止或限制常见 AI 味：

• 紫蓝渐变。
• Inter/Arial/system 默认字体。
• 三列等宽卡片。
• 每段都套 card。
• 过强阴影和荧光。
• 只做成功态。
• 移动端高度和滚动没处理。

它像前端审美和工程质量 gate。

design-shotgun

底层原理：早期不要在一个错误方向上微调，要先扩大搜索空间。

它适合一次生成多个真正不同的视觉方向。不是换按钮颜色，而是改信息结构、视觉密度、字体、页面节奏和情绪。

当用户说“不好看”“不是这个感觉”时，通常应该回到 design-shotgun，而不是继续局部调 CSS。

design-consultation

底层原理：设计不是单页，而是一套可复用选择。

它适合定义模板家族、品牌气质、颜色系统、字体系统、间距节奏、模块规则。对于“上传简历生成个人网站”这种产品，它比一次性页面更重要。

tailwind-design-system

底层原理：设计判断必须变成 token 和组件契约。

颜色、字体、间距、圆角、阴影、按钮、卡片、标签，都应该有单一事实源。否则每个生成页都会漂。

shadcn-layouts

底层原理：CSS 布局来自约束链。

它解决的是页面会不会坏：

• h-full 有没有父级高度。
• flex 滚动子元素有没有 min-h-0。
• grid 子项有没有 grid 父级。
• ScrollArea 有没有明确高度。
• 侧栏、顶部栏、主内容区的 shrink/overflow 是否正确。

frontend-css-patterns

底层原理：视觉语言由可复用 CSS 模式构成。

它补的是表达力：字体搭配、有限配色、错位构图、重叠、纹理、渐变、遮罩、动效节奏。它应该服务内容，不应该堆效果。

landing-page-design

底层原理：页面服务转化。

首屏 5 秒要说清楚价值、证据和行动。它适合 Offer-Compass 的获客页、报告页、咨询预约页，但不应该直接套到候选人主页上，否则容易像销售页。

claude-page-review

底层原理：Codex 控流程，Claude 做页面二次审查。

它适合上线前检查：

• 首屏是否清楚。
• 文案是否给用户看。
• 是否编造事实。
• 是否暴露隐私。
• 是否过度设计。

2. 外部站点怎么用

这次已经归档的截图包括：

• assets/variant-home.png：Variant 首页，用来理解 AI 视觉探索工具的产品表达。
• assets/relume-generated-wireframe.png：Relume 生成的 sitemap/wireframe，用来理解信息架构和线框价值。
• assets/godly-home.png：Godly 首页，用来找高审美网站方向。
• assets/land-book-home.png：Land-book 首页，用来找 landing page 和 section 参考。
• assets/original-interactive-portfolio.png：interactive-portfolio 方向的简历站效果。
• assets/playbook-desktop.png、assets/playbook-mobile.png：本手册页面的桌面/移动端验证截图。

AI 设计/生成工具

这类工具的正确定位：不是生产依赖，而是参考输入和人工设计辅助。

参考库

参考库比 AI 生成器更稳定。对于 Codex，它们的价值是提供“真实世界的设计样本”，让 Codex 不要凭空想象。

3. Codex 先找类似站点，再重开发

这是最重要的工作流。

不要让 Codex 直接回答：

帮我做一个好看的简历网站。

应该让 Codex 先做参考研究：

先找 5 个同类高质量站点，截图首屏和关键 section，分析它们的信息架构、视觉语言、字体、颜色、组件、动效和移动端布局。不要抄袭，只抽象设计原则。然后基于这些原则重新设计并实现一个新页面。

具体步骤

1. 明确页面类型
   例如：候选人个人网站、SaaS landing page、报告页、AI copilot、dashboard、编辑器。

2. 找参考来源
   视觉方向用 Variant/Godly/Land-book/Awwwards。真实产品流程用 Mobbin/Page Flows/Refero。SaaS 产品页用 Saaspo/Land-book。

3. 截图并归档
   至少保存桌面首屏、关键 section、移动端首屏。没有截图，就没有设计参考。

4. 抽象而不是复制
   抽象这些信息：

• 信息顺序。
• 字体气质。
• 色彩关系。
• 留白密度。
• CTA 层级。
• 卡片/列表/时间线/作品展示模式。
• 移动端折叠方式。
• 动效节奏。

5. 生成设计 brief
   把参考站点的共性变成可执行 brief，不要说“像某某网站”，而是说：

• 左对齐 editorial hero。
• 单一强调色。
• 项目区用案例研究卡，不用普通三列 feature card。
• 首屏露出下一屏内容。
• 移动端 CTA 全宽。
• 不使用假 logo 和推荐语。

6. Codex 实现
   Codex 根据 brief、设计 token 和组件规则写代码。

7. Playwright QA
   打开真实页面，截桌面和移动端，检查：

• 文本是否溢出。
• CTA 是否可见。
• 图片是否加载。
• 滚动是否正确。
• 移动端是否一列且没有横向滚动。
• 动效是否影响性能。

8. 二次审查
   用 claude-page-review 或人工审查检查：文案、可信度、隐私、夸大、品牌一致性。

4. Codex 前端设计 Prompt 模板

参考研究 Prompt

我要做一个 [页面类型]，目标用户是 [用户]，核心目标是 [目标]。

请先不要写代码。先搜索/打开 5 个高质量同类站点作为参考，保存截图，并从这些维度分析：
1. 首屏信息结构
2. 导航和 CTA
3. 字体气质
4. 色彩系统
5. section 顺序
6. 卡片/列表/图像使用方式
7. 移动端布局
8. 哪些设计可以抽象，哪些不能复制

最后输出一个新的设计 brief，再基于 brief 重新设计，不要直接抄任何站点。

实现 Prompt

基于刚才的设计 brief 实现页面。

要求：
- 使用现有项目的真实源码入口，不改构建产物。
- 使用现有组件和 token；如果没有 token，先定义最小设计 token。
- 不使用默认 AI 风格：紫蓝渐变、三列卡片、Inter 默认、过多卡片。
- 所有内容来自给定事实，不编造客户、数据、推荐语、学校、公司、奖项。
- 桌面和移动端都要截图验证。
- 最终给出文件路径、测试结果、截图路径。

简历站 Prompt

把这份简历做成个人网站时，先使用 interactive-portfolio 方法重组叙事。

目标不是把简历字段排版，而是让 HR/内推人 30 秒内知道：
1. 这个人是谁
2. 适合什么岗位
3. 最强项目证明是什么
4. 有哪些真实结果
5. 如何联系

先输出候选人定位、项目证明排序、页面结构和隐私处理方案，再开始设计。

5. 对 Offer-Compass 的最终流程

对于“用户上传简历，立刻生成个人网站”，推荐产品链路是：

1. 简历解析
   抽取事实，不生成设计。

2. 叙事重组
   使用 interactive-portfolio：定位、强项目、结果、CTA。

3. 模板家族选择
   产品/运营、研发/算法、金融/咨询、设计/内容、创业/项目型。

4. 参考选择
   每个模板家族绑定 3-5 个参考截图和设计 brief。

5. 设计系统生成
   tailwind-design-system 固化 token 和组件。

6. 页面实现
   Codex 按参考和 token 实现。

7. 布局校验
   shadcn-layouts 检查高度、滚动、响应式。

8. 截图 QA
   Playwright 桌面/移动端截图。

9. 内容真实性和隐私检查
   禁止假数据、假推荐语、假 logo、私密邮箱电话泄露。

10. 发布前审查
    claude-page-review 或人工二次审查。

6. 质量检查清单

设计前

• 页面类型明确了吗？
• 目标用户明确了吗？
• 首屏最重要信息明确了吗？
• 有 3-5 个参考站点截图吗？
• 参考站点只抽象原则，没有直接复制吗？

设计中

• 是否先处理叙事和结构，再处理视觉？
• 是否避免默认 AI 风？
• 是否有 token 和组件规则？
• 是否考虑移动端？
• 是否有 loading/empty/error/active 状态？

发布前

• 是否截图检查桌面和移动端？
• 是否没有横向滚动？
• 是否没有文本溢出？
• 是否没有假指标、假客户、假推荐语？
• 是否没有泄露隐私？
• 是否有明确 CTA？

7. 附录：可直接复用的内容

这一节放执行时最有价值、但不适合塞进正文的内容。后续让 Codex 做前端时，可以直接复制这些表格和模板。

A0. Skill 下载/复制地址索引

Codex Skill 的通用原则：一个 Skill 通常就是一个包含 SKILL.md 的目录。外部用户如果要安装，可以参考 OpenAI Codex Skills 官方文档：

• OpenAI Codex Skills 文档：https://developers.openai.com/codex/skills
• OpenAI Skills Catalog：https://github.com/openai/skills

这次用到的 Skill 地址如下：

如果要把这些本机 Skill 分享给外部用户，最稳妥的做法是：

# 复制某个 Skill 到对方 Codex 技能目录
mkdir -p ~/.codex/skills
cp -R /path/to/skill-folder ~/.codex/skills/<skill-name>

# 或者复制到通用 agent 技能目录
mkdir -p ~/.agents/skills
cp -R /path/to/skill-folder ~/.agents/skills/<skill-name>

发布给更多人时，建议把每个 Skill 放到公开 GitHub 仓库中，并保留 SKILL.md、依赖脚本、模板、示例和 license。不要只复制 prompt 文本，否则 Skill 的资源、脚本和例子会丢失。

A1. 外部设计工具和参考站点地址

A. Skill 选择矩阵

B. 参考站点用途速查

C. 截图研究表

每次让 Codex 参考外部站点时，至少填这张表。没有截图和抽象，就不算完成设计研究。

D. 设计 brief 模板

页面类型：
目标用户：
页面主目标：
首屏必须回答：
- 
- 
- 

参考来源：
- 参考 1：截图路径 / 可抽象原则
- 参考 2：截图路径 / 可抽象原则
- 参考 3：截图路径 / 可抽象原则

信息架构：
1. Hero：
2. Proof：
3. Case studies：
4. Background：
5. CTA：

视觉语言：
- 字体：
- 主色：
- 强调色：
- 背景：
- 图片/截图：
- 动效：

组件规则：
- Button：
- Card：
- Tag：
- Timeline：
- Mobile：

禁止项：
- 不编造数据、客户、推荐语、学校、公司和奖项。
- 不使用紫蓝渐变、默认三列卡片、过度圆角、过强阴影。
- 不复制参考站点的 logo、插画、摄影、专属文案。

验收：
- 桌面截图：
- 移动端截图：
- 无横向滚动：
- CTA 可点击：
- 隐私字段已处理：

E. 反 AI 味检查表

F. Offer-Compass 简历站模板家族

G. 一条完整的 Codex 指令

你现在要为 Offer-Compass 生成一个候选人个人网站。

先不要写代码。按下面顺序执行：
1. 用 interactive-portfolio 方法重组简历叙事，输出候选人定位、最强 3 个证明、隐私处理方案。
2. 找 5 个同类高质量参考站点或参考库页面，保存桌面和移动端截图。
3. 分析参考站点的信息架构、字体、颜色、CTA、section 顺序、移动端布局。
4. 把参考抽象成新的 design brief，不复制任何站点资产。
5. 选择模板家族，并定义 token、组件、响应式规则。
6. 只修改真实源码入口，不改构建产物。
7. 实现后用 Playwright 截桌面和移动端。
8. 检查是否有假数据、隐私泄露、横向滚动、图片加载失败、CTA 不可点击。
9. 最后给出文件路径、截图路径、验证结果和剩余风险。

8. 这次实验的直接结论

最值得保留的不是某一个外部工具，而是这个流程：

参考站点给方向，Skill 给原则，Codex 做实现，Playwright 做视觉验收，Claude/人工做发布审查。

Codex 不是不能设计前端。Codex 不能在没有方向、没有参考、没有设计系统、没有截图验收的情况下稳定设计好前端。

让 Codex 先找类似站点，再抽象设计语言，再重新开发，是目前最实际的解法。