cwc-workshops运行时验证实践DOM契约AI Agent自动验证的React应用构建【免费下载链接】cwc-workshops项目地址: https://gitcode.com/GitHub_Trending/cw/cwc-workshopscwc-workshops 是 Anthropic「Code with Claude」系列工作坊的开源材料仓库其中how-we-claude-code的第三阶段完整演示了一套AI Agent 可自动验证的 React 应用构建实践每个组件通过data-verify-*属性输出机器可读的 DOM 契约让 AI Agent或 CI在运行时直接观察并验证 React 组件的真实行为而不是靠人读代码或离线测试猜结果。本文带你快速看懂这套运行时验证设计的核心思路与落地方法。为什么需要运行时验证AI 生成 React 代码的盲区 当 AI Agent 帮你写完一个 React 应用后最常见的验证方式只有两种人肉验收打开页面点点点看到哪里不对再说离线测试跑一遍单测和类型检查。两者都有盲区——单测验证的是逻辑意图而不是用户真实看到的界面。一个组件内部状态对了渲染到页面上照样可能错计数不对、按钮消失、无障碍标签缺失……。phase-3-verify的做法反过来验证发生在运行时表面rendered surface——真正把组件挂载出来、驱动它操作、读取它实际呈现的 DOM。测试和类型检查交给 CI 去做验证器verifier的职责是确认真实产物确实工作正常。这个理念直接写进了架构里详见 phase-3-verify/README.md。DOM 契约让 React 应用自带机器可读说明书整套设计的地基是一个极其简单的约定每个组件渲染时都输出data-verify-*属性把当前状态暴露到 DOM 上。section>window.__verify.manifest() // 发现所有 单元 × fixture × 验证器 window.__verify.current() // 读取当前挂载内容的结构化验证结果 window.__verify.runAll() // 无头跑完整验证矩阵返回全部结果实现见 handle.ts。结果不只存在window上还会写进页面上的 JSON 节点连只能读 DOM的 Agent 也能拿到。4️⃣ 隔离渲染路由/verify/:unit/:fixture每个单元 × fixture都有独立深链路由只挂载该单元本身、不带任何应用外壳处于已知初始状态。Agent 导航过去、观察、读结果即可互不干扰。5️⃣ 一套判定体系三个消费者统一使用PASS | FAIL | BLOCKED | SKIP判定分类检查项分为ok ✅ | fail ❌ | warn ⚠️ | probe 。其中BLOCKED观察不到刻意区别于 FAIL观察到了且错了。同一条runFixture()代码路径被三方复用仪表盘/verify页面的 Run all 按钮AI Agentwindow.__verify.runAll()CIbun run verify跑 vitest 矩阵Agent 和人看到的是同一份事实不存在两套口径。6️⃣ 用故意失败的探针证明框架能抓谎TodoStats/inconsistent-counts是一个设计上来就失败的 probe——它专门证明框架能抓住谎言而不只是确认正确的事。这是运行时验证自证有效性的聪明做法。快速上手3 步跑通验证仪表盘 # 1. 克隆仓库 git clone https://gitcode.com/GitHub_Trending/cw/cwc-workshops cd cwc-workshops/how-we-claude-code/phase-3-verify # 2. 安装依赖并启动开发服务 bun install bun run dev # 应用: http://localhost:5199 验证仪表盘: /verify # 3. 无头跑完整验证矩阵 类型检查 bun run verify bun run typecheck打开http://localhost:5199/verify你会看到每个单元 × fixture 的判定网格这就是 AI Agent 眼中的同一个世界。实战演练故意破坏看验证系统当场抓包工作坊推荐的体感体验三步bun run dev启动应用让 AI Agent 执行打开/verify调用window.__verify.manifest()挑一个单元导航到其路由确认window.__verify.current().verdict PASS动手破坏——比如从 TodoApp.tsx 对应的组件里删掉data-verify-total属性然后观察dom-contract与counts-add-up检查在仪表盘、bun run verify、window.__verify三处同时给出精确失败诊断。一次改动三端一致报红——这就是单一事实来源的威力。关键文件速查表 模块说明phase-3-verify/README.md完整设计文档六条核心理念core/contract.tsDOM 契约data-verify-*读写工具core/runner.ts挂载 → 操作 → 验证 → 判定 的执行器core/registry.ts单元与验证器的中央注册表verifiers/可插拔验证器schema / invariants / dom-contract / a11yspecs/每个单元一份.verify.ts规格声明harness/handle.tswindow.__verifyAgent 手柄matrix.test.tsCI 路径跑全部单元 × fixture 并断言判定docs/verification.html验证系统深度图解HTML 文档写在最后从写完就算到验证过才算这套设计给新手最大的启示不在于具体 API而在于一个思维转变AI 辅助开发的质量瓶颈正在从生成代码转移到验证代码。让 React 应用自带 DOM 契约、让验证逻辑可插拔、让 Agent/仪表盘/CI 共享同一条代码路径——你得到的不是一个测试框架而是一个AI Agent 可以自主验收你的应用的运行时基础设施。cwc-workshops 仓库中还有模型选型、多 Agent 系统、记忆 Agent 等更多工作坊材料本实践所在的 how-we-claude-code/ 目录完整覆盖从需求访谈到可验证 React 应用的三阶段工作流值得顺着读下去。【免费下载链接】cwc-workshops项目地址: https://gitcode.com/GitHub_Trending/cw/cwc-workshops创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考