1. 给 Codex 串 Skill 链之前先把 TaoToken 的 Base URL 接上如果你在 Codex 里配置了 frontend-design、ui-ux-pro-max、composition-patterns、react-best-practices、web-design-guidelines 这五个 Skill却卡在config.toml的401 Unauthorized、model provider not found或流式响应中断先别急着改 Skill。多数时候Skill 本身只是说明书真正让 Codex 跑起来的是模型供应商配置。到 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_intro 创建 KeyBase URL 填https://taotoken.net/apiKey 用YOUR_API_KEY占位替换。本文只做一件事把 Codex 的五个界面 Skill 串成可复现流水线并说明生成页面和终审 Agent 的 Token 怎么控。很多人第一次给 Codex 配自定义供应商时会把 Claude Code 的ANTHROPIC_*环境变量直接塞进 Codex结果当然是模型列表对不上、协议也对不上。Codex 走的是config.tomlClaude Code 走的是settings.json或ANTHROPIC_*两者不要混。TaoToken 在这里只补一个 Base URLhttps://taotoken.net/api。Skill 怎么装、怎么触发、怎么把设计简报和终审清单落盘仍然由 Codex 侧的目录和提示词决定。这篇的路线是定方向 → 查参数 → 写页 → 理结构 → 顺体感 → 终审。对应五个 Skill但写页本身由 Codex 完成。整套跑完后你会得到一份DESIGN.md、一份组件拆分清单、一份体感问题列表、一份终审报告。Codex 生成和终审 Agent 的 Token 消耗也会因为中间产物落盘而变得可控。2. Codex 接 TaoToken只改 config.toml不要套 ANTHROPIC_*TaoToken 的入口可以按 OpenAI 兼容方式接进 Codex。先到官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_config 创建 Key然后在本地开发机配置环境变量。下面命令都在你自己的终端本地执行不要让 Agent 直连生产环境。# macOS / Linux export TAOTOKEN_API_KEYYOUR_API_KEY # Windows PowerShell $env:TAOTOKEN_API_KEYYOUR_API_KEYCodex 的配置文件通常放在~/.codex/config.toml。一个可复制的配置骨架如下# ~/.codex/config.toml model gpt-5-codex # 换成你在 TaoToken 控制台实际可用的模型名 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat这里的关键点只有三个base_url填https://taotoken.net/api不要在后面加 UTM 参数。UTM 是给网页入口统计用的不是给 API 请求用的。env_key指向你本机环境变量名例如TAOTOKEN_API_KEY。model以控制台可见模型名为准。Codex 如果提示模型不存在先回控制台核对名称。配置完后本地验证codex --version codex 只回复 ok不要展开如果返回401优先检查TAOTOKEN_API_KEY是否在同一个终端会话里生效。如果返回model not found检查model和model_provider是否对应。如果一直转圈检查wire_api是否与当前 Codex 版本兼容必要时先切回chat再试。再次强调不要把 Claude Code 的ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN写进 Codex 的config.toml。Codex 用 Codex 的配置Claude Code 用 Claude Code 的配置。TaoToken 只提供 Base URL不改变两个工具各自的配置格式。3. 五个 Skill 放进 Codex目录、触发词和 Token 边界Codex 的 Skill 可以理解为按需加载的说明书。你不需要把五本说明书一次性塞进系统提示而是让 Codex 在对应阶段读取对应SKILL.md。一个本地目录可以这样组织~/.codex/skills/ ├── frontend-design/ │ └── SKILL.md ├── ui-ux-pro-max/ │ └── SKILL.md ├── composition-patterns/ │ └── SKILL.md ├── react-best-practices/ │ └── SKILL.md └── web-design-guidelines/ └── SKILL.md这五个 Skill 的分工不要重叠frontend-design开写前定方向产出设计简报。ui-ux-pro-max查具体视觉参数补配色、字体、字号、密度。composition-patterns页面写完后理结构拆组件、划数据归属。react-best-practices顺体感查重渲染、请求瀑布、列表性能。web-design-guidelines终审按可读性、触控、信息层级出报告。Token 消耗的大头通常不在 Skill 文件本身而在两个阶段Codex 生成页面时会反复读设计简报、组件清单、已有代码和报错信息。终审 Agent 如果回头读全量源码很容易把上下文撑满。所以每一步都要有中间产物。DESIGN.md给生成阶段复用组件拆分清单给重构阶段复用终审只读设计规范、变更 diff 和页面关键状态而不是整仓源码。4. 第一段链frontend-design 定方向先出设计简报再写页面这一步解决“出来就像模板脸”。不要让 Codex 直接写页面先让它输出一份可确认的设计简报。网站和微信小程序要分开写因为竖屏和 Web 的默认审美完全不同。网站场景可以这样触发用 frontend-design 处理这个任务为个人工具型产品做官网首页平台是 Web不是小程序。 先输出 8 行设计简报气质、字体方向、主色、辅助色、页面节奏、禁用元素、参考氛围、成功标准。 我确认后才进入页面实现。 不要紫渐变、不要 Inter、不要三列图标开场。微信小程序场景可以这样触发用 frontend-design 处理这个任务为工具类微信小程序做首页个人开发竖屏优先。 先输出 8 行设计简报竖屏气质、字体层级、主色、底部 Tab 意图、首页信息密度、禁用元素、扫视路径、成功标准。 我确认后再写页面。 不要紫渐变不要三列均等大卡片堆满首屏。收到简报后不要让它在对话里飘着。让它写入项目根目录的DESIGN.md# DESIGN.md ## 项目 个人工具型产品官网首页 ## 气质 编辑杂志感、实验室手记、克制、信息优先 ## 字体 标题衬线或半衬线 正文高可读无衬线 代码/数据等宽字体 ## 主色 低饱和深色文字 单一强调色 ## 禁止 紫渐变、Inter 默认标题、三列图标开场、满屏圆角卡片 ## 成功标准 首屏能说明产品是什么、给谁用、下一步点哪里这一步的 Token 价值在于后面每次写页面、改结构、终审都可以只读DESIGN.md而不是重新描述一遍“高级一点”。Codex 生成 Agent 有了明确约束返工次数会下降。5. 第二段链ui-ux-pro-max 查参数把 DESIGN.md 补成可执行规范方向有了但“编辑杂志感”仍然太虚。这时用ui-ux-pro-max查参数。提示词里必须带平台否则返回的配色和字号可能同时混 Web 和移动端。网站 Web 查询用 ui-ux-pro-max 给这个 Web 官网查一套视觉方案。 项目类型个人工具型产品官网。 输出风格关键词、主色与辅助色、字体建议、3 条 UX 注意、2 条不要做。 结果写成 Markdown准备追加到 DESIGN.md。微信小程序查询用 ui-ux-pro-max 给这个微信小程序查一套视觉方案。 项目类型个人工具类小程序竖屏。 输出风格关键词、主色与辅助色、字号层级、首页密度注意、2 条不要做。 结果写成 Markdown准备追加到 DESIGN.md。拿到结果后人工扫一遍把可执行的部分追加进去## 视觉参数 ### 主色 #1F2937 作为主文字色 #2563EB 作为唯一强调色 #F9FAFB 作为页面底色 ### 字体 标题 28/36字重 600 正文 16/26字重 400 辅助 13/20字重 400 ### 组件 卡片圆角 12px 按钮最小高度 44px 列表行高不低于 56px ### 不要做 不要用大面积紫色渐变 不要同时出现三种以上强调色这一步之后Codex 写页面时不再靠“互联网平均审美”填空而是读DESIGN.md里的硬参数。生成阶段仍然会消耗 Token但返工和来回确认会少很多。6. 第三段链写页之后用 composition-patterns 理结构页面能看之后下一步不是继续加样式而是理结构。composition-patterns只动结构不动视觉。网站侧可以用 React 组合模式拆组件小程序侧可以用同一思路拆自定义组件、理清数据归属。网站设置页示例用 composition-patterns 审当前网站的设置页。 先输出重构清单哪些区块要拆组件、哪些状态要上提、哪些 props 过于臃肿。 我确认后再改。 不要顺手改视觉样式不要换 UI 框架。微信小程序设置页示例用 composition 思路审这个微信小程序设置页。 指出该拆哪些自定义组件、哪些数据不该堆在页面里、哪些 setData 可以合并。 先给清单我确认后再改。重构清单建议落成文件例如COMPOSITION.md# COMPOSITION.md ## 必须拆 - HeaderBar标题、返回、右侧操作 - SettingGroup分组标题 子项列表 - SettingItem图标、文案、右侧状态 - SwitchRow受控开关不直接改页面 data ## 数据归属 - 用户偏好放在页面级 store - 单项开关状态由 SettingItem 内部维护 - 远程配置只在页面 onLoad 拉一次 ## 不要动 - 颜色、字号、圆角 - 路由结构 - 接口协议这一步对 Token 的影响也很直接结构清晰后后续体感检查和终审只需要读组件树和 diff不必让 Agent 重新理解整页源码。7. 第四段链react-best-practices 顺体感卡顿也是丑页面丑不只指视觉。卡、抖、慢、滚动掉帧同样是体验问题。react-best-practices适合网站侧重点看重渲染、请求瀑布、列表性能。原生小程序没有 React但可以用同一套自查思路多余setData、列表卡顿、首屏请求瀑布、图片过大。网站检查提示词按 react-best-practices 检查这个网站页面。 优先找重渲染、请求瀑布、列表性能。 输出格式问题 → 依据 → 小改法。 先给清单不要直接大改。小程序检查提示词检查这个微信小程序页面的体感问题。 优先找多余 setData、列表卡顿、首屏瀑布、图片过大。 输出格式问题 → 小改法。 先给清单我确认后再改。拿到清单后把高优先级项改掉并本地跑构建和测试# 在项目根目录本地执行 npm run lint npm run build npm run test如果项目没有测试至少跑一次本地预览手动滚动列表、切 Tab、打开弹窗。体感问题很多时候不需要复杂工具肉眼和手指就能发现。8. 第五段链web-design-guidelines 终审终审 Agent 少读全量源码上线前用web-design-guidelines做终审。网站多看键盘焦点、对比度、信息层级小程序多看竖屏热区、字号、底部安全区。终审结果按“必须改 / 建议改”分开每条带现象、原因、改法。网站终审用 web-design-guidelines 审这个网站页面。 按必须改、建议改列出。 每条包含现象、原因、改法。 只读 DESIGN.md、变更 diff 和关键页面状态不要读全量源码。小程序终审对照可读性、触控、信息层级审这个微信小程序页面。 按必须改、建议改列出。 关注对比度、按钮热区、字号是否好扫、底部安全区。 只读 DESIGN.md 和页面关键文件。终审阶段最容易浪费 Token 的做法是让 Agent 把整个仓库读一遍然后输出一堆泛泛而谈的意见。更好的做法是给它三样东西DESIGN.md设计规范。git diff本次改了什么。页面关键截图或页面结构描述现在长什么样。本地先执行git diff --stat git diff -- src/pages然后把 diff 摘要交给终审 Agent。这样终审报告会更聚焦Token 消耗也更稳。如果你还没有 TaoToken Key可以在这一步回到官网创建https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_audit 。Key 只放本地环境变量不要写进仓库。9. 完整跑一遍网站与微信小程序两条流水线网站流水线frontend-design 出设计简报 → ui-ux-pro-max 查 Web 参数 → Codex 写页面 → composition-patterns 理 React 组件结构 → react-best-practices 查重渲染、瀑布请求、列表性能 → web-design-guidelines 终审微信小程序流水线frontend-design 出竖屏设计简报 → ui-ux-pro-max 查微信小程序参数 → Codex 写首页 → composition 思路拆自定义组件 → 体感自检查 setData、列表卡顿、首屏瀑布、图片体积 → web-design-guidelines 终审触控、可读性、安全区一个最小可复现流程可以写成脚本注释放在项目 README 里# 本地执行不连生产环境 # 1. 准备 TaoToken Key export TAOTOKEN_API_KEYYOUR_API_KEY # 2. 确认 Codex 配置 codex --version # 3. 触发第一阶段 codex 按 frontend-design 先出 8 行设计简报确认后再写页面 # 4. 写页面后分别触发结构、体感、终审 # codex 用 composition-patterns 审设置页先给清单 # codex 按 react-best-practices 查重渲染和请求瀑布 # codex 用 web-design-guidelines 按必须改/建议改出终审报告跑完一遍后你应该得到这些文件DESIGN.md方向 参数 禁止项。COMPOSITION.md组件拆分和数据归属。PERF.md体感问题与小改法。AUDIT.md终审必须改 / 建议改。Codex 生成和终审 Agent 的 Token 消耗主要取决于上下文复用程度。中间产物越清晰重复描述越少Token 越省。10. 常见排障401、模型名、Skill 不触发、终审重复读上下文问题一Codex 返回 401。检查TAOTOKEN_API_KEY是否在当前终端生效。重新打开终端后环境变量可能丢失需要重新 export。不要把 Key 写进仓库。问题二模型不存在。回 TaoToken 控制台核对模型名把config.toml里的model改成实际可用名称。不同 Codex 版本对wire_api兼容性不同必要时切换chat或responses再试。问题三Skill 不触发。检查~/.codex/skills/下是否有对应目录和SKILL.md。提示词里直接写 Skill 名称例如“用 frontend-design 先出设计简报”。不要在同一个提示里让五个 Skill 同时工作容易上下文打架。问题四终审 Agent 读太多。不要让终审读全量源码。只给它DESIGN.md、git diff、页面关键状态。终审输出必须按“必须改 / 建议改”分组否则意见会散。问题五Claude Code 和 Codex 配置混用。Codex 用~/.codex/config.tomlClaude Code 用settings.json或ANTHROPIC_*。不要把ANTHROPIC_*套到 Codex也不要把 Codex 的config.toml套到 Claude Code。TaoToken 的 Base URL 都是https://taotoken.net/api但两个工具的配置位置不同。11. 文末 CTA模型对话 → Coding Plan → 创建 Key → Claude Code 文档如果你想把这条 Skill 链先跑通可以按下面顺序走先开模型对话确认模型可用https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chat如果你准备长期用 Codex / Claude Code 跑生成和终审看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_coding创建 API Key拿到后填到本地环境变量TAOTOKEN_API_KEYhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_keys如果你后面还要接 Claude Code再看这份文档。注意 Claude Code 用settings.json/ANTHROPIC_*不要套到 Codexhttps://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_claude_codeClaude Code 侧的三件套可以这样填Base URL 用https://taotoken.net/apiKey 用YOUR_API_KEY模型名按控制台可用模型填写。示例只用于 Claude Code不用于 Codex{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5-20250929, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5-20251001 } }Codex 侧仍然只认config.toml和TAOTOKEN_API_KEY。把五个 Skill 放进~/.codex/skills/Base URL 填https://taotoken.net/api然后按“定方向、查参数、写页、理结构、顺体感、终审”跑一遍。卡住哪一步就单独抽哪一本说明书不要让一个 Agent 同时做五件事。
1. 给 Codex 串 Skill 链之前先把 TaoToken 的 Base URL 接上如果你在 Codex 里配置了 frontend-design、ui-ux-pro-max、composition-patterns、react-best-practices、web-design-guidelines 这五个 Skill却卡在config.toml的401 Unauthorized、model provider not found或流式响应中断先别急着改 Skill。多数时候Skill 本身只是说明书真正让 Codex 跑起来的是模型供应商配置。到 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_intro 创建 KeyBase URL 填https://taotoken.net/apiKey 用YOUR_API_KEY占位替换。本文只做一件事把 Codex 的五个界面 Skill 串成可复现流水线并说明生成页面和终审 Agent 的 Token 怎么控。很多人第一次给 Codex 配自定义供应商时会把 Claude Code 的ANTHROPIC_*环境变量直接塞进 Codex结果当然是模型列表对不上、协议也对不上。Codex 走的是config.tomlClaude Code 走的是settings.json或ANTHROPIC_*两者不要混。TaoToken 在这里只补一个 Base URLhttps://taotoken.net/api。Skill 怎么装、怎么触发、怎么把设计简报和终审清单落盘仍然由 Codex 侧的目录和提示词决定。这篇的路线是定方向 → 查参数 → 写页 → 理结构 → 顺体感 → 终审。对应五个 Skill但写页本身由 Codex 完成。整套跑完后你会得到一份DESIGN.md、一份组件拆分清单、一份体感问题列表、一份终审报告。Codex 生成和终审 Agent 的 Token 消耗也会因为中间产物落盘而变得可控。2. Codex 接 TaoToken只改 config.toml不要套 ANTHROPIC_*TaoToken 的入口可以按 OpenAI 兼容方式接进 Codex。先到官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_config 创建 Key然后在本地开发机配置环境变量。下面命令都在你自己的终端本地执行不要让 Agent 直连生产环境。# macOS / Linux export TAOTOKEN_API_KEYYOUR_API_KEY # Windows PowerShell $env:TAOTOKEN_API_KEYYOUR_API_KEYCodex 的配置文件通常放在~/.codex/config.toml。一个可复制的配置骨架如下# ~/.codex/config.toml model gpt-5-codex # 换成你在 TaoToken 控制台实际可用的模型名 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat这里的关键点只有三个base_url填https://taotoken.net/api不要在后面加 UTM 参数。UTM 是给网页入口统计用的不是给 API 请求用的。env_key指向你本机环境变量名例如TAOTOKEN_API_KEY。model以控制台可见模型名为准。Codex 如果提示模型不存在先回控制台核对名称。配置完后本地验证codex --version codex 只回复 ok不要展开如果返回401优先检查TAOTOKEN_API_KEY是否在同一个终端会话里生效。如果返回model not found检查model和model_provider是否对应。如果一直转圈检查wire_api是否与当前 Codex 版本兼容必要时先切回chat再试。再次强调不要把 Claude Code 的ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN写进 Codex 的config.toml。Codex 用 Codex 的配置Claude Code 用 Claude Code 的配置。TaoToken 只提供 Base URL不改变两个工具各自的配置格式。3. 五个 Skill 放进 Codex目录、触发词和 Token 边界Codex 的 Skill 可以理解为按需加载的说明书。你不需要把五本说明书一次性塞进系统提示而是让 Codex 在对应阶段读取对应SKILL.md。一个本地目录可以这样组织~/.codex/skills/ ├── frontend-design/ │ └── SKILL.md ├── ui-ux-pro-max/ │ └── SKILL.md ├── composition-patterns/ │ └── SKILL.md ├── react-best-practices/ │ └── SKILL.md └── web-design-guidelines/ └── SKILL.md这五个 Skill 的分工不要重叠frontend-design开写前定方向产出设计简报。ui-ux-pro-max查具体视觉参数补配色、字体、字号、密度。composition-patterns页面写完后理结构拆组件、划数据归属。react-best-practices顺体感查重渲染、请求瀑布、列表性能。web-design-guidelines终审按可读性、触控、信息层级出报告。Token 消耗的大头通常不在 Skill 文件本身而在两个阶段Codex 生成页面时会反复读设计简报、组件清单、已有代码和报错信息。终审 Agent 如果回头读全量源码很容易把上下文撑满。所以每一步都要有中间产物。DESIGN.md给生成阶段复用组件拆分清单给重构阶段复用终审只读设计规范、变更 diff 和页面关键状态而不是整仓源码。4. 第一段链frontend-design 定方向先出设计简报再写页面这一步解决“出来就像模板脸”。不要让 Codex 直接写页面先让它输出一份可确认的设计简报。网站和微信小程序要分开写因为竖屏和 Web 的默认审美完全不同。网站场景可以这样触发用 frontend-design 处理这个任务为个人工具型产品做官网首页平台是 Web不是小程序。 先输出 8 行设计简报气质、字体方向、主色、辅助色、页面节奏、禁用元素、参考氛围、成功标准。 我确认后才进入页面实现。 不要紫渐变、不要 Inter、不要三列图标开场。微信小程序场景可以这样触发用 frontend-design 处理这个任务为工具类微信小程序做首页个人开发竖屏优先。 先输出 8 行设计简报竖屏气质、字体层级、主色、底部 Tab 意图、首页信息密度、禁用元素、扫视路径、成功标准。 我确认后再写页面。 不要紫渐变不要三列均等大卡片堆满首屏。收到简报后不要让它在对话里飘着。让它写入项目根目录的DESIGN.md# DESIGN.md ## 项目 个人工具型产品官网首页 ## 气质 编辑杂志感、实验室手记、克制、信息优先 ## 字体 标题衬线或半衬线 正文高可读无衬线 代码/数据等宽字体 ## 主色 低饱和深色文字 单一强调色 ## 禁止 紫渐变、Inter 默认标题、三列图标开场、满屏圆角卡片 ## 成功标准 首屏能说明产品是什么、给谁用、下一步点哪里这一步的 Token 价值在于后面每次写页面、改结构、终审都可以只读DESIGN.md而不是重新描述一遍“高级一点”。Codex 生成 Agent 有了明确约束返工次数会下降。5. 第二段链ui-ux-pro-max 查参数把 DESIGN.md 补成可执行规范方向有了但“编辑杂志感”仍然太虚。这时用ui-ux-pro-max查参数。提示词里必须带平台否则返回的配色和字号可能同时混 Web 和移动端。网站 Web 查询用 ui-ux-pro-max 给这个 Web 官网查一套视觉方案。 项目类型个人工具型产品官网。 输出风格关键词、主色与辅助色、字体建议、3 条 UX 注意、2 条不要做。 结果写成 Markdown准备追加到 DESIGN.md。微信小程序查询用 ui-ux-pro-max 给这个微信小程序查一套视觉方案。 项目类型个人工具类小程序竖屏。 输出风格关键词、主色与辅助色、字号层级、首页密度注意、2 条不要做。 结果写成 Markdown准备追加到 DESIGN.md。拿到结果后人工扫一遍把可执行的部分追加进去## 视觉参数 ### 主色 #1F2937 作为主文字色 #2563EB 作为唯一强调色 #F9FAFB 作为页面底色 ### 字体 标题 28/36字重 600 正文 16/26字重 400 辅助 13/20字重 400 ### 组件 卡片圆角 12px 按钮最小高度 44px 列表行高不低于 56px ### 不要做 不要用大面积紫色渐变 不要同时出现三种以上强调色这一步之后Codex 写页面时不再靠“互联网平均审美”填空而是读DESIGN.md里的硬参数。生成阶段仍然会消耗 Token但返工和来回确认会少很多。6. 第三段链写页之后用 composition-patterns 理结构页面能看之后下一步不是继续加样式而是理结构。composition-patterns只动结构不动视觉。网站侧可以用 React 组合模式拆组件小程序侧可以用同一思路拆自定义组件、理清数据归属。网站设置页示例用 composition-patterns 审当前网站的设置页。 先输出重构清单哪些区块要拆组件、哪些状态要上提、哪些 props 过于臃肿。 我确认后再改。 不要顺手改视觉样式不要换 UI 框架。微信小程序设置页示例用 composition 思路审这个微信小程序设置页。 指出该拆哪些自定义组件、哪些数据不该堆在页面里、哪些 setData 可以合并。 先给清单我确认后再改。重构清单建议落成文件例如COMPOSITION.md# COMPOSITION.md ## 必须拆 - HeaderBar标题、返回、右侧操作 - SettingGroup分组标题 子项列表 - SettingItem图标、文案、右侧状态 - SwitchRow受控开关不直接改页面 data ## 数据归属 - 用户偏好放在页面级 store - 单项开关状态由 SettingItem 内部维护 - 远程配置只在页面 onLoad 拉一次 ## 不要动 - 颜色、字号、圆角 - 路由结构 - 接口协议这一步对 Token 的影响也很直接结构清晰后后续体感检查和终审只需要读组件树和 diff不必让 Agent 重新理解整页源码。7. 第四段链react-best-practices 顺体感卡顿也是丑页面丑不只指视觉。卡、抖、慢、滚动掉帧同样是体验问题。react-best-practices适合网站侧重点看重渲染、请求瀑布、列表性能。原生小程序没有 React但可以用同一套自查思路多余setData、列表卡顿、首屏请求瀑布、图片过大。网站检查提示词按 react-best-practices 检查这个网站页面。 优先找重渲染、请求瀑布、列表性能。 输出格式问题 → 依据 → 小改法。 先给清单不要直接大改。小程序检查提示词检查这个微信小程序页面的体感问题。 优先找多余 setData、列表卡顿、首屏瀑布、图片过大。 输出格式问题 → 小改法。 先给清单我确认后再改。拿到清单后把高优先级项改掉并本地跑构建和测试# 在项目根目录本地执行 npm run lint npm run build npm run test如果项目没有测试至少跑一次本地预览手动滚动列表、切 Tab、打开弹窗。体感问题很多时候不需要复杂工具肉眼和手指就能发现。8. 第五段链web-design-guidelines 终审终审 Agent 少读全量源码上线前用web-design-guidelines做终审。网站多看键盘焦点、对比度、信息层级小程序多看竖屏热区、字号、底部安全区。终审结果按“必须改 / 建议改”分开每条带现象、原因、改法。网站终审用 web-design-guidelines 审这个网站页面。 按必须改、建议改列出。 每条包含现象、原因、改法。 只读 DESIGN.md、变更 diff 和关键页面状态不要读全量源码。小程序终审对照可读性、触控、信息层级审这个微信小程序页面。 按必须改、建议改列出。 关注对比度、按钮热区、字号是否好扫、底部安全区。 只读 DESIGN.md 和页面关键文件。终审阶段最容易浪费 Token 的做法是让 Agent 把整个仓库读一遍然后输出一堆泛泛而谈的意见。更好的做法是给它三样东西DESIGN.md设计规范。git diff本次改了什么。页面关键截图或页面结构描述现在长什么样。本地先执行git diff --stat git diff -- src/pages然后把 diff 摘要交给终审 Agent。这样终审报告会更聚焦Token 消耗也更稳。如果你还没有 TaoToken Key可以在这一步回到官网创建https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chain_audit 。Key 只放本地环境变量不要写进仓库。9. 完整跑一遍网站与微信小程序两条流水线网站流水线frontend-design 出设计简报 → ui-ux-pro-max 查 Web 参数 → Codex 写页面 → composition-patterns 理 React 组件结构 → react-best-practices 查重渲染、瀑布请求、列表性能 → web-design-guidelines 终审微信小程序流水线frontend-design 出竖屏设计简报 → ui-ux-pro-max 查微信小程序参数 → Codex 写首页 → composition 思路拆自定义组件 → 体感自检查 setData、列表卡顿、首屏瀑布、图片体积 → web-design-guidelines 终审触控、可读性、安全区一个最小可复现流程可以写成脚本注释放在项目 README 里# 本地执行不连生产环境 # 1. 准备 TaoToken Key export TAOTOKEN_API_KEYYOUR_API_KEY # 2. 确认 Codex 配置 codex --version # 3. 触发第一阶段 codex 按 frontend-design 先出 8 行设计简报确认后再写页面 # 4. 写页面后分别触发结构、体感、终审 # codex 用 composition-patterns 审设置页先给清单 # codex 按 react-best-practices 查重渲染和请求瀑布 # codex 用 web-design-guidelines 按必须改/建议改出终审报告跑完一遍后你应该得到这些文件DESIGN.md方向 参数 禁止项。COMPOSITION.md组件拆分和数据归属。PERF.md体感问题与小改法。AUDIT.md终审必须改 / 建议改。Codex 生成和终审 Agent 的 Token 消耗主要取决于上下文复用程度。中间产物越清晰重复描述越少Token 越省。10. 常见排障401、模型名、Skill 不触发、终审重复读上下文问题一Codex 返回 401。检查TAOTOKEN_API_KEY是否在当前终端生效。重新打开终端后环境变量可能丢失需要重新 export。不要把 Key 写进仓库。问题二模型不存在。回 TaoToken 控制台核对模型名把config.toml里的model改成实际可用名称。不同 Codex 版本对wire_api兼容性不同必要时切换chat或responses再试。问题三Skill 不触发。检查~/.codex/skills/下是否有对应目录和SKILL.md。提示词里直接写 Skill 名称例如“用 frontend-design 先出设计简报”。不要在同一个提示里让五个 Skill 同时工作容易上下文打架。问题四终审 Agent 读太多。不要让终审读全量源码。只给它DESIGN.md、git diff、页面关键状态。终审输出必须按“必须改 / 建议改”分组否则意见会散。问题五Claude Code 和 Codex 配置混用。Codex 用~/.codex/config.tomlClaude Code 用settings.json或ANTHROPIC_*。不要把ANTHROPIC_*套到 Codex也不要把 Codex 的config.toml套到 Claude Code。TaoToken 的 Base URL 都是https://taotoken.net/api但两个工具的配置位置不同。11. 文末 CTA模型对话 → Coding Plan → 创建 Key → Claude Code 文档如果你想把这条 Skill 链先跑通可以按下面顺序走先开模型对话确认模型可用https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_chat如果你准备长期用 Codex / Claude Code 跑生成和终审看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_coding创建 API Key拿到后填到本地环境变量TAOTOKEN_API_KEYhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_keys如果你后面还要接 Claude Code再看这份文档。注意 Claude Code 用settings.json/ANTHROPIC_*不要套到 Codexhttps://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_skill_claude_codeClaude Code 侧的三件套可以这样填Base URL 用https://taotoken.net/apiKey 用YOUR_API_KEY模型名按控制台可用模型填写。示例只用于 Claude Code不用于 Codex{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5-20250929, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5-20251001 } }Codex 侧仍然只认config.toml和TAOTOKEN_API_KEY。把五个 Skill 放进~/.codex/skills/Base URL 填https://taotoken.net/api然后按“定方向、查参数、写页、理结构、顺体感、终审”跑一遍。卡住哪一步就单独抽哪一本说明书不要让一个 Agent 同时做五件事。
