1. 为什么 AI 写的功能能跑却总在验收前返工用 Codex 这类 AI 编码工具生成一个前端功能通常几分钟就能跑起来点击编辑、弹窗打开、字段能改、保存有请求、列表会刷新。主路径顺得让人想直接提测。但真正让人返工的往往不是主路径而是主路径旁边那些没人写进需求的条件分支。我试过让 Codex 生成一个用户编辑功能正常流程一次通过结果测试同学连续点了三次保存发了三个请求列表里出现了三条重复数据。代码没有语法错误功能能跑但它漏掉了提交中禁止再次点击这个边界。这类返工的根源在于需求通常以功能名组织代码却以状态变化运行。产品写新增编辑功能设计稿展示弹窗静态页面接口文档描述请求和响应真正把它们连起来的状态转换往往落到前端开发阶段才暴露。AI 如果只按功能名生成实现会优先补齐最显眼的正常路径边界则被默认成框架会处理。这篇把前端最容易漏的 7 类边界拆开每类给出可复制的检查清单和验证动作再结合 TaoToken 统一 Key/API 通道的配置示例让你在接入 AI 工具时提前拦截返工风险。适合正在用 Codex、Cursor 等工具做前端功能、又不想反复返工的开发者。2. 前置准备用 TaoToken 统一 Key 与 API 通道在开始写边界检查之前先把 AI 工具的接入通道理顺。如果你同时用 Codex、Cursor、Claude Code 等多个工具每个工具单独配 Key、单独记额度排查问题时很难判断是模型行为还是配置问题。TaoToken 提供统一的 Key 和 API 通道把模型调用收敛到一个入口配置一次就能在多个工具间复用。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注册后在控制台创建 API Key就能拿到形如sk-xxxx的凭证。对于长期做编码和 Agent 任务的场景Coding Plan 比按量计费更划算适合每天都要跑 Codex 生成、补全、重构的开发者。如果你只是想先验证模型对话效果可以直接用模型对话页面测试要管理多个 Key 或查看用量进控制台要新建或轮换 Key进 API Keys 页面。这一步的意义不只是能调用而是把模型行为固定下来。当边界检查清单里的结论需要 AI 辅助验证时你调用的是同一个模型、同一套参数排查结果才可复现。3. 可复制配置settings.json 骨架与 7 类边界检查清单3.1 settings.json 骨架不同工具的配置文件位置不同但结构类似。下面是一份通用骨架把 TaoToken 的 API 通道和模型参数集中管理避免散落在多个文件里。{ provider: { name: taotoken, baseUrl: https://taotoken.net/api, apiKey: sk-你的Key, timeoutMs: 60000 }, model: { default: claude-sonnet, temperature: 0.2, maxTokens: 8192 }, coding: { enableBoundaryCheck: true, requireConfirmBeforeRefactor: true, scopeGuard: current-module } }几个参数值得说明。temperature设成 0.2 是为了让生成结果更稳定边界判断这种需要确定性的任务不适合高随机性。scopeGuard设成current-module是防止 AI 顺手改公共组件这一点在第七类边界里会展开。requireConfirmBeforeRefactor打开后涉及重构的动作会先报告再执行。3.2 七类边界检查清单把下面这份清单直接贴给 Codex作为修改代码前的约束。它覆盖了输入、顺序、异步、失败恢复、权限、生命周期、作用范围七个维度。## 当前任务边界检查 在修改代码前先根据项目现状和需求检查以下内容。 ### 输入和值 - null、undefined、空字符串、0、false 分别怎样处理 - 长度、范围、空格、未知枚举怎样处理 ### 操作顺序 - 查询、翻页、重置连续执行时哪些状态改变 - 新增、编辑、关闭再打开时哪些状态清理 ### 异步和时间 - 是否可能重复提交、请求乱序或卸载后回写 - Loading、禁用、取消和恢复分别由谁负责 ### 失败恢复 - 失败发生在哪一步 - 用户输入、旧数据、弹窗和按钮状态分别保留什么 ### 权限和数据变化 - 权限变化、记录不存在、状态已改变时怎样处理 - 删除后页码和列表怎样恢复 ### 生命周期 - 再次进入、返回、缓存激活时哪些状态保留或刷新 ### 作用范围 - 公共组件、类型、工具或样式有哪些调用方 - 哪些行为必须向后兼容 ### 输出要求 - 将结论分为已确认、需要从代码验证、需要业务决定。 - 没有依据的边界不要自行补成确定规则。 - 关键边界未确认时先报告不要开始扩大修改。这份清单的关键在最后三条输出要求。它逼着 AI 把我猜的和代码里确认的分开避免它把不确定的边界直接写成确定规则。3.3 输入边界的值映射表第一类边界最容易踩坑的是把没有值当成同一种情况。下面这张表可以直接作为字段级约定。输入预期行为null 或 undefined显示占位符空字符串根据字段规则决定占位或保留0正常显示 0false显示对应业务文案未知枚举显示原值、未知状态或告警需业务决定如果 AI 用value || --这种简单判断数字 0 和布尔 false 会被当成空值页面看起来更整齐业务含义却已经变了。4. 验证请求用真实操作路径确认边界是否生效配置和清单准备好之后不能只看代码要用真实操作路径验证。下面给出几个可执行的验证动作每个都对应一类边界。4.1 验证异步乱序先查询已启用马上再查询已禁用。如果第二个请求先返回、第一个请求后返回页面最终显示的是已启用数据说明存在响应乱序。验证方法是打开浏览器网络面板把请求延迟调成不同值观察列表最终状态。// 在请求层加一个请求序号只接受最新序号的结果 let latestSeq 0; async function fetchList(params) { const seq latestSeq; const res await api.getList(params); if (seq ! latestSeq) { return null; // 过期结果直接丢弃 } return res; }这段代码解决的是每一次请求都成功但最终页面是错的问题。Loading 只能解决反馈和部分重复操作不一定解决响应乱序。4.2 验证重复提交连续点击保存按钮三次观察网络面板是否发出三个请求。如果发了三个说明缺少提交中状态保护。const [submitting, setSubmitting] useState(false); async function handleSave() { if (submitting) return; setSubmitting(true); try { await api.save(form); } finally { setSubmitting(false); } }按钮的disabled属性要绑定submitting而不是只改样式。只改样式的话用户仍能通过键盘回车触发提交。4.3 验证状态污染打开编辑弹窗触发表单校验不保存直接关闭再打开新增弹窗。检查字段值、校验信息、临时状态是否残留。这类问题只有连续操作才会出现单独测试每个动作都正常。4.4 验证失败恢复把保存接口改成返回业务失败观察弹窗是否关闭、用户输入是否保留、按钮何时恢复。再把保存成功但刷新列表失败这个组合场景跑一遍确认提示文案和重试入口是否合理。5. 本篇常见错排查5.1 报错请求成功但列表数据被覆盖现象是列表偶尔显示旧数据。原因通常是响应乱序旧请求后返回覆盖了新结果。排查时在网络面板看请求返回顺序确认是否有请求序号或取消机制。修复方式参考 4.1 的请求序号方案或在组件卸载时取消未完成请求。5.2 报错保存按钮点击多次发出多个请求原因是提交中状态没有真正禁用按钮。检查disabled是否绑定状态以及是否在finally里恢复。如果用了防抖注意防抖只减少触发频率不保证只发一次请求两者要配合使用。5.3 报错编辑弹窗关闭后再次打开校验信息还在原因是表单实例或校验状态没有在关闭时重置。检查弹窗关闭回调里是否调用了表单重置方法以及新增和编辑是否共用同一个表单实例。共用实例时打开前要先清空再赋值。5.4 报错删除当前页最后一条后列表空白这是第五类边界。删除后页码处理有三种合理方案保留当前页显示空列表、回到上一页、回到第一页。AI 无法从增加删除功能这句话里知道答案需要你提前确认。排查时先看产品预期再改代码。5.5 报错修改公共组件后其他页面样式错乱这是第七类边界。AI 只读了目标组件没查调用方。排查时全局搜索组件引用确认默认值改变影响了哪些页面。修复前先加scopeGuard约束让 AI 在扩大修改前先报告。5.6 报错权限不足时按钮隐藏了但仍能提交前端权限不能替代后端鉴权。按钮隐藏只是展示层用户仍可能通过旧链接或接口直接提交。排查时确认服务端是否独立校验权限以及前端在服务端拒绝后如何恢复页面状态。6. 把边界变成可执行的验收动作边界不是越多越好。把所有理论上的异常都列进任务需求会失去重点。我会按三个维度排序发生概率、影响程度、修复成本。高概率、高影响或高返工成本的边界必须在实现前确定低概率、低影响且没有事实依据的记录成未覆盖项即可。Codex 适合帮我做三件事从代码中找出状态、调用方和现有异常处理根据已确认边界补充实现和测试把用户路径转成检查步骤并执行可运行的验证。但它不能替我决定业务上唯一正确的结果。失败后是否保留旧数据删除后回到上一页还是第一页权限不足时隐藏还是禁用这些都可能有多个合理答案。人的工作不是把每行代码写出来而是在关键分岔点给出可承担的决定。如果你还在用多个工具各自配 Key建议先把通道收敛到 TaoToken用统一的 API 入口和 Coding Plan 跑编码任务这样边界验证的结论才可复现。需要管理 Key 或查看用量时进控制台新建或轮换 Key 时进 API Keys 页面接入细节参考接入文档。把上面那份边界检查清单存成项目里的固定文件每次让 AI 改代码前先跑一遍返工次数会明显下降。