Codex 设计指南 · 颜值笔记

CuteNote.app 颜值笔记

OpenAI Codex 正式面向设计师全面开放。目前设计师已成为该平台增长最快的用户群体，占比约 五分之一，且增长速度是工程师的3倍。这款最初为开发者打造的 AI 编程代理，如今正试图成为设计师的高效搭档。

1/5

设计师占 Codex 用户

3×

增长速度超工程师

什么是 Codex

Codex 是 OpenAI 推出的编程代理，能够在终端或桌面应用中自主运行。它可以接收任务、阅读项目、编写代码、自检成果。背后由 GPT-5.5 调优支持，提供快速版 + 深度版两种推理模式，并已推出针对设计师体验的桌面应用。

设计出精致 UI 的 3 步设置

① Agent.md 文件 —— 用系统简报代替漫无目的

在项目目录放置 agent.md，内含你的视觉规范、色彩系统、组件模式、字体选择、设计 tokens 等。每次 Codex 读取任务都会自动参考此文件，相当于一个常驻的项目简报。

② 安装插件 / MCP 服务器 —— 让 AI 连接外部世界

MCP 服务器让 AI 能调用外部工具。OpenAI 官方已推出「产品设计」插件，内置 11 项技能，包含URL 转实时代码、用户流程审查、产品方向探索等。Figma 插件可完成从设计稿到真实代码的转换。还推荐 MCP（设计灵感平台），可分析 Uber、Netflix、Apple 等品牌的成功设计模式，并应用到你的项目中。

③ 配置技能 —— 预设设计师专属的工作方式

「技能」是一组可重复使用的指令，通过 skill.md 文件规范化 Codex 的设计流程。你可以在技能库中搜索「前端设计」「设计工程」等高质量技能，也可以利用「技能创建器」根据自身设计规则定制专属技能。

    关键结论：Codex 产出的结果「平庸」还是「惊艳」，决定性因素往往不在模型，而是你投入的上下文设置。没有明确简报，它给出的 UI 就会和其他 AI 生成的结果一样千篇一律。
  

从零构建一个投资仪表盘

提示词示例：

“创建桌面尺寸的暗色模式投资仪表盘，包含仪表盘、交易、预算和目标、分析与报告、设置等页面。参考 agent.md 文件及附加的灵感图片。”

在输入起始处使用 /product 斜杠命令调用「产品设计」技能，Codex 会自动寻找 agent.md 并引用参考图，在构建过程中还会主动进行可视化 QC 检查，在浏览器中打开页面并修正明显偏离参考的地方。

批注模式 —— 最值得推荐的迭代工具

点击批注按钮，你可以直接在画面上选中任何一个元素（例如图表），并针对它输入修改指令。无需解释你要说的是哪个按钮，也无需复杂描述。

重要发现：移动端响应式不会自动发生

演示中桌面端完成度很高，切换至移动端时内容全部挤在一起，导航栏没有折叠。这提示我们，若需移动端适配，必须在 agent.md 或首个提示词中明确声明，并要求 Codex 可视化检查各个屏幕尺寸。

实时分享链接

Codex 现在可生成交互式网站/应用的实时 URL 用于直接分享。不再需要解释文件，直接发送可点击访问的链接即可。该功能目前仅面向企业用户开放预览。

Codex vs Claude Code · 设计师视角

基于大量真实项目测试的结果。

视觉 UI

Claude Code 优势明显：首次输出更接近可直接发布的品质，转换 Figma 设计时保留更多原始结构；适合需要高质感初稿的场景。

功能实现

Codex 更胜任：开箱即用更具交互性和美观度，编码更精准，适合复杂逻辑与完整功能开发。

Token 消耗

当有清晰 agent.md 简报时，Codex 的 token 消耗明显更少，不会出现 10 万 token 只在一轮提示中耗尽的窘境。

设计师趋势

Claude Code 因视觉优势，当前累计设计师用户更多；Codex 正通过官方更新快速弥补。

      真实建议：最终选择取决于你的工作流。探索性视觉设计 → 用 Claude Code；复杂代码库的技术性设计工作 → 用 Codex；几乎所有人都倾向于两者组合使用。
    

“Codex 产生『垃圾内容』与产生『可用内容』之间最大的区别，在于你是否构建了足够的上下文。” —— 本视频总结

落地行动清单

☐ 掌握新项目基础设置：在 Codex 中新建项目并选择现有文件夹，限定搜索上下文
☐ 写好你的 agent.md 文件：定义视觉风格、色彩、字体、排版与「不要做什么」
☐ 安装 OpenAI 官方「产品设计」插件和 Figma 插件，连接 MCP 视觉灵感平台
☐ 在第一个提示中附加一张参考灵感图，给 AI 一个明确的视觉目标
☐ 使用「批注」功能逐元素迭代图表、间距、卡片等细节
☐ 明确要求移动端响应式设计：要求 Codex 在桌面和移动尺寸下视觉检查自己的输出
☐ 灵活采用双工具：探索视觉用 Claude Code + 技术实现用 Codex