Claude Code三层工作流优化：需求提取、HTML规格、嵌入式验证实战

Anthropic应用AI团队架构师Arno在最近的工作坊中，详细分享了Anthropic内部团队如何使用Claude Code进行日常开发。这不是一个入门教程，而是面向已有使用经验的开发者，展示如何通过三个层次的工作流优化——需求提取、HTML规格说明、嵌入式验证——来大幅提升AI辅助编码的效率和质量。

核心理念：模型越强，你越该放手

Arno开场就引用了强化学习之父Richard Sutton的经典论文《The Bitter Lesson》：与其花大量时间用人类能力去硬编码和约束系统，不如让更多的数据和算力去释放模型的能力。这个理念直接映射到Claude Code的使用哲学上。

Richard Sutton是强化学习领域的奠基人之一，他在2019年发表的这篇短文指出了AI研究70年来反复出现的一个规律：那些试图将人类知识硬编码进系统的方法，短期内看似有效，但长期来看总是被那些能充分利用计算规模的通用方法所超越。从国际象棋、围棋到语音识别、计算机视觉，每个领域都经历了从"专家系统"到"让数据和算力说话"的转变。这个教训之所以"苦涩"，是因为它意味着研究者精心设计的领域知识最终往往不如简单粗暴的规模扩展有效。映射到AI辅助编码领域，这意味着与其花大量时间写详尽的约束规则来限制Agent行为，不如给它更好的上下文和验证机制，让它自主发挥。

随着模型能力的持续提升，Agent可以运行更长时间、处理更复杂的任务。但这也意味着如果方向错了，Token消耗会非常惊人。在大语言模型的API调用中，Token是计费的基本单位，包括输入Token和输出Token。Claude Code作为Agent系统会在一次任务中进行多轮推理和工具调用，每一轮都会累积消耗。以Opus模型为例，其定价远高于较小模型，一次方向错误的长时间Agent运行可能消耗数十美元的API费用。因此，前置验证变得至关重要——你需要在Agent开始长时间运行之前，确保规格说明足够完善。

一个关键洞察是：Claude可能比你更擅长从你身上提取需求。就像你的用户往往"看到了才知道要什么"一样，你自己也很难一次性把所有需求说清楚。让Claude来采访你，反而能得到更全面的规格说明。

第一层：让Claude采访你，而非你写需求文档

好提示与坏提示的区别

Arno直言，他观察到很多人使用Claude Code时最常输入的就是"make it better"——这是典型的坏提示。好的提示应该具备以下特征：

• 指定领域而非结果：告诉Claude你关心哪些方面（受众、场景、约束），但不要预定义具体方案
• 使用开放式问题：鼓励Claude通过ask_user_question工具来逐步提取你的真实需求
• 触发迭代式采访：在提示中明确引用ask_user_question工具，让Claude主动向你提问

以一个账单分摊App为例，Arno输入了一个精心设计的提示，Claude随即开始逐步追问：目标用户是谁？有没有次要受众？使用场景是什么？通过这种交互式的需求提取，最终生成的规格说明远比你自己写的要全面。

必须开启的三个Claude Code设置

工作坊中Arno特别强调了三个Claude Code设置：

• Auto Mode（Shift+Tab切换）：这是Arno最推荐的模式，"如果你没在用Auto Mode，你必须开始用"。Claude Code默认在执行文件写入、命令运行等操作时会暂停并请求用户确认。Auto Mode开启后，Claude Code会自动执行大部分操作而无需逐步确认，只在涉及潜在破坏性操作时才会暂停。这大幅减少了开发者在Agent执行过程中的干预频率，使得Claude可以连续完成多步骤任务。对于已经建立了良好验证机制的项目，Auto Mode尤其有价值，因为即使Agent做了错误的修改，验证层也能及时捕获问题。
• Fast Mode（/fast）：虽然消耗更多Token，但在快速迭代规格说明时非常高效
• Effort参数（/effort）：官方推荐设为x-high，也可以设为max effort

第二层：用HTML取代Markdown做规格说明

Arno引用了同事的一句话："Markdown文件是AI原生软件开发生命周期的通用语言。"但这个时代正在过去。

为什么HTML规格说明更优？

当Markdown规格文件超过200行时，你大概率不会认真读完它——你的同事更不会。HTML文件的优势在于：

• 信息密度更高：同样的内容，HTML可以用更紧凑、更结构化的方式呈现
• 可交互：你可以直接在浏览器中点击、浏览，而不是盯着纯文本
• 视觉直观：可以直接展示设计方向，配合截图反馈给Claude

实战：四个设计方向一次生成

Arno用Opus 4.7让Claude一次性生成了四个完全不同的HTML设计方向——Brutalist风格、Tokyo Fintech风格等。每个方向都是一个可交互的HTML文件，直接在浏览器中打开就能看到完整的视觉效果。

这比从Markdown文件中"脑补"最终效果要高效得多。你可以直接截图反馈给Claude，告诉它"这里有点偏"或"这个对齐不对"。Arno特别提到，Opus 4.7的视觉模型有了显著提升，处理截图反馈的能力比之前好很多。

关于Token效率的疑问，Arno给出了明确回答：虽然单次生成HTML比Markdown消耗更多Token，但长期来看，因为HTML规格说明更精确，你需要的迭代次数更少，总Token消耗反而更低。

第三层：将验证嵌入到产物本身

这是整个工作坊最核心也最创新的部分。Arno展示了一个React待办事项应用，演示了如何让验证成为应用本身的一部分。

三种验证表面

验证框架设计了三个层次：

1. 人类可读的仪表板：在浏览器中直接运行验证步骤，查看通过/失败状态
2. Agent驱动验证：Claude通过Playwright MCP直接从浏览器读取状态并执行验证
3. 无头CI验证：通过run verify命令在CI环境中自动运行

Playwright是微软开发的端到端浏览器自动化框架，支持Chromium、Firefox和WebKit三大浏览器引擎。MCP（Model Context Protocol）是Anthropic推出的开放协议，允许AI模型与外部工具和数据源进行标准化交互。Playwright MCP将这两者结合，使Claude能够像人类测试员一样操作浏览器——导航页面、点击按钮、填写表单、读取DOM元素。在验证场景中，Claude通过Playwright MCP直接访问浏览器中运行的应用，读取组件发布到DOM的data-verify属性，从而判断应用状态是否符合预期，无需依赖截图或人工描述。

关键技术：将组件状态发布到DOM

核心思路是让每个React组件将自己的状态以data-verify属性的形式发布到DOM中。这样Agent就不需要"抓取"DOM来理解应用状态，而是可以直接读取结构化的数据契约。

HTML的data-*属性是W3C标准中专门为自定义数据设计的属性命名空间，不会影响页面渲染或语义。在传统前端测试中，data-testid属性常被用来为测试提供稳定的元素选择器。Arno展示的方法将这一理念大幅扩展：不仅用data属性标识元素，还将组件的完整运行时状态序列化后发布到DOM中。这本质上是在UI层建立了一个机器可读的"状态契约"——组件承诺在特定条件下暴露特定的数据结构。当这个契约被破坏时（即使视觉上看不出问题），验证就会失败。这种方法借鉴了契约测试（Contract Testing）的思想，将其从微服务间的API层面移植到了前端组件层面。

每个组件都包含：

• Schemas：数据结构定义
• Fixtures：已知状态的快照。Fixtures是测试领域的经典概念，指预定义的、已知的数据集合，用于将系统置于可预测的状态。在这个验证框架中，Fixtures的角色类似于Storybook的Stories——它们定义了组件在特定输入下应该呈现的确切状态。但与Storybook不同的是，这些Fixtures不是在独立的开发环境中运行，而是嵌入到生产应用本身中，使得验证可以在真实运行环境下进行。
• Invariants：必须始终成立的不变量。不变量是形式化验证和契约式设计中的核心概念，最早由Bertrand Meyer在Eiffel语言的Design by Contract方法论中系统化提出。一个不变量是在程序执行的特定点上必须始终为真的条件。例如，一个待办事项应用的不变量可能是"已完成任务数+未完成任务数=总任务数"。在Agent驱动的开发中，不变量为Claude提供了明确的正确性判断标准，使其能够自主验证修改是否引入了逻辑错误，而不仅仅依赖视觉检查或功能测试。
• Probes：用于推离"快乐路径"的探测测试

当你修改了组件的数据契约（比如删除data-verify-total-stats属性），即使应用本身没有崩溃，验证也会立即失败——因为你破坏的是契约，而非功能。

录制验证作为变更证据

Anthropic的Claude Code团队已经在日常工作中使用这套流程：每次前端变更都会录制验证过程的视频片段，存储到S3或内部系统中，作为变更的证据。在当前Anthropic极高的发布节奏下，这种自动化验证录制已经成为标准实践。

实践建议总结

基于Arno的分享，以下是可以立即应用的Claude Code优化建议：

• 使用Opus 4.7而非Sonnet来执行这套工作流，视觉模型的提升是关键
• 开启Auto Mode + Fast Mode，前者减少手动确认，后者加速规格迭代
• 让Claude采访你而非自己写需求文档，在提示中引用ask_user_question工具
• 用HTML替代Markdown做规格说明，尤其是涉及UI/UX的项目
• 将验证嵌入产物，通过data属性让组件状态对Agent可见，实现三层验证

这套方法论的核心并不是什么全新的技术，而是对已有原语（Storybook fixtures、testing-library、data attributes、Playwright MCP）的重新组合，使其成为Agent优先的工作流。Storybook是前端开发中广泛使用的组件开发和文档工具，testing-library是一套以用户行为为中心的测试工具集，data attributes提供了机器可读的DOM标注，而Playwright MCP则赋予了Agent直接操作浏览器的能力。这些工具单独来看都不新鲜，但当它们被重新组合为一个以Agent为第一公民的工作流时，产生了质的飞跃。随着模型能力的持续提升，这种"让Agent做更多"的趋势只会加速。