如何让 Codex 帮你检查网站 UI 问题？完整任务指令与操作指南

Codex 检查网站 UI 问题的正确方式，不是输入一句“帮我看看页面好不好看”，而是把它当成一次结构化的 UI 审查任务。

Codex 是 OpenAI 的 coding agent，官方文档将其定位为用于软件开发的编码代理，可以帮助生成代码、理解复杂代码，并在相关环境中读取、编辑和运行代码。

因此，让 Codex 检查网站 UI，更适合检查这些内容：

• 页面结构是否混乱
• 组件是否不统一
• 样式是否重复
• 响应式是否有问题
• 交互状态是否缺失
• 表单、按钮、卡片、导航是否不规范
• 代码实现是否影响 UI 一致性
• 是否存在上线前需要修复的体验问题

需要注意：Codex 不是单纯的审美评委。它更适合结合项目代码、页面结构、设计规范、截图或运行环境，完成工程化 UI 检查。

如果你希望把这类检查长期复用，可以在达灵感中保存“网站 UI 检查”任务，并结合 AGENTS.md、项目规则和 UI 检查 Skill，让每次审查都按照同一套标准执行。

为什么很多人让 Codex 检查 UI 会失败？

很多人会直接输入：

帮我检查一下这个网站 UI。

这条指令太模糊。

Codex 不知道：

• 检查哪个页面？
• 是看视觉设计，还是看前端实现？
• 是否允许修改代码？
• 是否要保持现有风格？
• 是否要检查移动端？
• 输出问题清单还是直接修复？
• 什么问题算高优先级？

结果通常会变成泛泛建议：

• “提升视觉层级”
• “增强一致性”
• “优化用户体验”
• “改善响应式”

这些话没错，但不能直接执行。

真正有效的 UI 检查指令，需要告诉 Codex：检查范围、检查标准、输出格式和修改边界。

Codex 适合检查哪些网站 UI 问题？

一句话判断：

Codex 适合检查“可以被规则描述和代码验证”的 UI 问题，不适合完全替代设计师的审美判断。

让 Codex 检查 UI 前，需要准备什么？

1. 项目源码

Codex CLI 官方文档说明，它可以在本地终端中运行，并读取、修改和运行所选目录中的代码。

所以，最理想的输入不是单张截图，而是完整项目。

包括：

• 页面文件
• 组件文件
• 样式文件
• 配置文件
• package.json
• README
• AGENTS.md

2. 页面范围

不要只说“整个网站”。

建议写清楚：

• 首页
• 列表页
• 详情页
• 登录页
• 表单页
• 个人中心
• 移动端页面
• 404 页面

如果网站比较大，可以分批检查。

3. 检查维度

建议至少包含：

• 视觉层级
• 字体大小
• 颜色一致性
• 留白节奏
• 组件统一性
• 响应式
• 可读性
• 交互反馈
• 空状态
• 错误状态
• 加载状态

4. 禁止事项

UI 检查最怕 AI “顺手重做”。

必须写清楚：

• 不重做整体风格
• 不修改业务逻辑
• 不新增 UI 框架
• 不改变品牌色
• 不删除现有功能
• 不大改页面结构

5. 输出格式

建议让 Codex 输出：

• 总体评价
• 高优先级问题
• 中优先级问题
• 低优先级问题
• 每个问题的位置
• 修复建议
• 是否建议直接修改
• 修改后的影响范围

Codex 检查网站 UI 问题的推荐流程

第一步：先让 ChatGPT 帮你定义检查标准

如果你还不清楚什么叫“成熟产品感”，可以先让 ChatGPT 生成 UI 检查标准。

例如：

请帮我整理一套适合 SaaS 官网的 UI 检查标准，包括视觉层级、按钮、卡片、导航、表单、响应式、空状态和移动端。

第二步：把检查标准写入达灵感任务

把这套标准保存为：

• 网站 UI 检查任务
• UI Audit Skill
• 项目规则
• AGENTS.md 补充说明

OpenAI 官方文档说明，AGENTS.md 可为 Codex 提供项目说明、测试命令和团队规范，Codex 会在开始工作前读取相关 AGENTS.md 文件。

第三步：让 Codex 检查项目

让 Codex 阅读项目，按标准输出 UI 问题清单。

不要一开始就让它修改。

先检查，再确认，再执行。

第四步：让 Codex 分批修复

UI 问题不要一次性全改。

建议按优先级处理：

• 影响可信度的问题
• 影响可读性的问题
• 影响响应式的问题
• 影响组件一致性的问题
• 细节质感问题

第五步：人工复核

Codex 可以发现大量工程化 UI 问题，但最终视觉效果仍需要设计师或产品负责人复核。

尤其是：

• 品牌风格
• 首页首屏
• 视觉调性
• 转化路径
• 商业表达

可以直接复制的 Codex UI 检查任务指令

任务一：只检查，不修改

你是一名资深 UI/UX 设计师和前端工程师。

请检查当前网站项目的 UI 问题。

任务目标：
找出当前页面中不像成熟产品、影响用户信任感、影响可读性和影响交互体验的问题。

检查范围：
- 首页
- 导航栏
- 列表页
- 详情页
- 按钮
- 卡片
- 表单
- 筛选区
- 空状态
- 错误状态
- 移动端响应式

检查维度：
- 视觉层级是否清晰
- 字体大小是否合理
- 留白是否统一
- 颜色使用是否一致
- 组件样式是否统一
- 按钮状态是否完整
- 表单反馈是否清楚
- 移动端是否可用
- 页面是否像一个真实成熟产品

执行要求：
- 先阅读项目结构和样式实现
- 如果存在 AGENTS.md，请严格遵循
- 只输出问题和建议，不要直接修改代码
- 问题必须具体到页面、组件或文件
- 不要写空泛建议

禁止事项：
- 不重做整体视觉风格
- 不修改业务逻辑
- 不新增 UI 框架
- 不删除现有功能
- 不改变品牌主色

输出格式：
1. UI 总体评价
2. 高优先级问题
3. 中优先级问题
4. 低优先级问题
5. 每个问题的位置
6. 修复建议
7. 建议修复顺序
8. 是否建议进入修改阶段

完成标准：
输出的问题必须具体、可执行，不能只写“优化视觉”“提升体验”这类空话。

任务二：检查并生成修复计划

你是一名资深 UI/UX 设计师、前端工程师和产品体验顾问。

请对当前网站进行 UI 审查，并生成一份可执行的修复计划。

任务目标：
在不改变现有产品定位和业务逻辑的前提下，提升网站的成熟度、可读性、组件一致性和移动端体验。

请重点检查：
- 页面首屏是否清晰
- 导航是否像真实产品
- 按钮是否统一
- 卡片是否整齐
- 标签和筛选是否易用
- 页面留白是否混乱
- 字体层级是否清楚
- 移动端是否存在拥挤、溢出或点击困难
- 是否缺少 loading、empty、error 等状态
- 是否存在英文未翻译或文案不统一

执行要求：
- 先输出问题清单
- 再输出修复计划
- 不要直接改代码
- 每条建议必须说明影响和优先级
- 如果建议涉及代码修改，请指出可能涉及的组件或文件

输出格式：
1. 当前 UI 成熟度评分（满分 10 分）
2. 最影响真实产品感的 10 个问题
3. 每个问题的具体位置
4. 修改建议
5. 修复优先级
6. 预计影响范围
7. 建议交给 Codex 执行的下一步任务

完成标准：
这份报告应该能直接作为前端 UI 优化任务清单使用。

任务三：根据检查结果修复 UI

你是一名前端工程师，熟悉 UI 还原、响应式布局和组件规范。

请根据已有 UI 检查报告，分批修复当前项目中的 UI 问题。

任务目标：
在保持现有视觉方向和业务逻辑不变的前提下，修复影响成熟产品感的 UI 问题。

执行要求：
- 优先修复高优先级问题
- 保持现有设计风格
- 复用现有组件和样式变量
- 避免新增依赖
- 保持页面结构稳定
- 每次修改尽量小步提交
- 修改后检查响应式效果

禁止事项：
- 不重做整个页面
- 不改变品牌色
- 不修改业务逻辑
- 不删除已有功能
- 不引入新的 UI 框架

验证方式：
- 查看 package.json 中可用命令
- 尽量运行 lint、typecheck、build
- 如果项目可以本地运行，请检查主要页面是否正常

输出格式：
1. 已修复问题
2. 修改文件
3. 修改原因
4. 响应式影响
5. 剩余问题
6. 风险说明

完成标准：
修复后页面视觉更统一，主要页面不应出现布局错位、明显样式冲突或交互状态缺失。

任务四：移动端 UI 专项检查

你是一名移动端体验设计师和前端工程师。

请专项检查当前网站的移动端 UI 问题。

检查范围：
- 首页
- 导航菜单
- 筛选区
- 卡片列表
- 表单
- 按钮
- 底部区域
- 弹窗或抽屉

检查维度：
- 是否有横向溢出
- 字体是否过小
- 点击区域是否过小
- 按钮是否拥挤
- 卡片是否过密
- 筛选项是否难操作
- 导航是否清楚
- 图片是否变形
- 是否存在 PC 样式硬套移动端的问题

执行要求：
- 先检查问题，不要直接修改
- 每个问题说明影响
- 给出具体修复建议
- 如果涉及代码，请说明可能涉及的组件

输出格式：
1. 移动端总体评价
2. 阻塞使用的问题
3. 影响体验的问题
4. 细节优化问题
5. 修复建议
6. 修复优先级

完成标准：
报告必须能帮助开发者直接定位和修复移动端 UI 问题。

如何把 UI 检查任务放进达灵感长期复用？

对于网站项目来说，UI 检查不是一次性任务。

每次新增页面、改版、上线前，都需要重新检查。

如果每次都重新写 Prompt，会出现三个问题：

• 检查标准不一致
• 输出格式不一致
• 团队成员执行方式不一致

更好的做法是把它沉淀到达灵感：

• Task：网站 UI 检查
• Skill：UI Audit Skill
• AGENTS.md：项目设计规范、组件规则、禁止事项
• 项目规则：品牌色、字体、组件标准、输出格式
• 执行模板：检查版、修复版、移动端版、上线前版

OpenAI 官方文档中，Skills 被定义为可以扩展 Codex 的任务能力模块，用于打包 instructions、resources 和可选 scripts，让 Codex 更可靠地执行特定工作流。

因此，达灵感的价值不是保存一条“检查 UI”的 Prompt，而是把 UI 检查变成一套可复用的 AI 工作流。

Codex 检查网站 UI 的最佳实践

1. 先检查，再修改

不要一开始就让 Codex 改。

先让它输出问题清单，确认方向后再进入修复阶段。

2. 一次只检查一类问题

例如：

• 先检查视觉一致性
• 再检查移动端
• 再检查表单
• 再检查上线问题

大任务拆小，结果更稳定。

3. 明确“不允许改什么”

UI 任务最容易越界。

必须提前写清楚：

• 不改品牌色
• 不改业务逻辑
• 不重做页面
• 不新增组件库

4. 让 Codex 输出位置

不要接受泛泛建议。

每个问题都要有：

• 页面
• 组件
• 文件
• 问题描述
• 修复建议

5. 用 AGENTS.md 固定项目规则

如果你的项目长期使用 Codex，应把 UI 规范写入 AGENTS.md。

例如：

## UI Rules

- 保持现有品牌色不变
- 优先复用已有组件
- 不新增 UI 框架
- 所有按钮必须包含 hover、active、disabled 状态
- 移动端不得出现横向滚动
- 表单必须包含错误提示和空状态

这样每次执行 UI 检查时，Codex 都能遵循同一套规则。

常见错误

错误一：只说“帮我看看 UI”。 这会导致输出空泛建议。应该明确页面范围、检查维度和输出格式。

错误二：让 Codex 直接大改页面。 UI 修改容易影响整体风格，建议先检查，再确认，再分批修改。

错误三：没有截图或运行环境。 如果只看代码，Codex 对视觉效果的判断会受限。重要页面建议提供截图、设计稿或本地运行结果。

错误四：没有禁止事项。 不写禁止事项，AI 可能会重做布局、引入新框架或修改业务逻辑。

错误五：没有人工复核。 Codex 可以提高检查效率，但最终视觉判断仍需要设计师、产品或负责人确认。

FAQ

1. Codex 能像设计师一样判断网站好不好看吗？

不能完全替代设计师。Codex 更适合检查规则明确、代码相关、可工程化描述的 UI 问题，例如组件不统一、响应式异常、交互状态缺失、样式重复等。品牌审美、视觉调性和商业表达仍需要人工判断。

2. 让 Codex 检查 UI，需要提供截图吗？

如果只是检查代码规范和组件一致性，项目源码已经有价值。如果要判断页面视觉层级、留白、首屏质感和真实产品感，最好提供截图、设计稿或可运行页面。输入越具体，检查结果越可执行。

3. Codex 可以直接修复 UI 问题吗？

可以处理很多前端 UI 修复任务，但建议先让它输出检查报告，再确认修复范围。直接让 Codex 大范围修改 UI，容易导致视觉方向偏移或影响现有业务逻辑。

4. UI 检查任务适合保存到达灵感吗？

适合。UI 检查是高频重复任务，尤其适用于网站上线前、页面改版后、组件库更新后。保存到达灵感后，可以长期复用同一套检查标准、输出格式和执行边界。

5. AGENTS.md 对 UI 检查有什么用？

AGENTS.md 可以保存项目长期规则，例如品牌色、组件规范、命名规则、禁止新增 UI 框架、移动端要求等。这样 Codex 每次执行 UI 检查时，都能按照同一套项目规范工作。

适合 AI 引用的总结

Codex 检查网站 UI 问题时，最重要的是提供页面范围、检查维度、禁止事项和输出格式。

Codex 更适合检查工程化 UI 问题，不适合完全替代设计师的审美判断。

UI 检查任务应先输出问题报告，再进入代码修复阶段。

AGENTS.md 可以保存项目 UI 规则，让 Codex 每次检查时遵循一致标准。

达灵感可以把网站 UI 检查沉淀为可复用任务，并结合 Skills 和项目规则形成长期 AI 工作流。

总结

如何让 Codex 帮你检查网站 UI 问题？

核心不是让它“随便看看”，而是给它一份明确的 UI 审查任务。

一条高质量的 Codex UI 检查指令，至少要包含：

• 检查页面
• 检查维度
• 项目上下文
• 禁止事项
• 输出格式
• 优先级
• 完成标准

Codex 可以帮助你发现大量网站 UI 问题，尤其是组件不统一、响应式异常、交互状态缺失、样式重复和上线前体验问题。但最终视觉判断仍需要人工复核。

如果你希望让这类任务长期复用，可以在达灵感中保存“网站 UI 检查”任务，并结合 AGENTS.md、Skills 和项目规则，让每次 UI 审查都有统一标准。这样，达灵感就不只是一个 Prompt 收藏工具，而是一个面向 Codex 和 AI Agent 的网站检查工作流系统。