How we Claude Code

频道: Claude
视频: https://www.youtube.com/watch?v=IlqJqcl8ONE
原文语言: en
统计: 共 76 轮

[0:20]

Hello, hello, hello. Welcome all. Thank you for joining the workshop. We have a pretty pretty full house here today. I'm very pleased to see that. Um, quick show of hands. Who here loves cloud code? Okay. Yeah, you're in the right place. Yeah, lovely to meet you all. My name is Ara. I'm a member of the applied AI team. Uh, I'm an architect there. I'm here today to

大家好，欢迎各位。感谢你们来参加这个 workshop。今天来的人真不少，看到这场面我特别开心。先简单举个手，有谁特别喜欢 Claude Code？好，那你们来对地方了。很高兴见到大家。我叫 Ara，是 applied AI 团队的一员，担任架构师。今天我来这儿是想

[0:49]

tell you how we cloud code at Anthropic. do a workshop and uh you can code along. You'll get some credits. I think there'll be a QR code in just a moment. So, make sure to grab that. Uh there'll be people floating around that might support you. So, if you have technical difficulties, we can we can help you out. Um anybody here in this room who hasn't used cloud code before?

跟大家讲讲我们在 Anthropic 内部是怎么用 Claude Code 的。我们会做一个 workshop，你们可以跟着一起写代码。你们会拿到一些额度，等会儿应该会有个二维码出来，记得扫一下。现场也会有人四处走动帮忙，所以要是遇到技术问题，我们可以协助你们。在座有没有谁之前完全没用过 Claude Code 的？

[1:13]

Okay, great. Good. Good. Because this is uh there's more to do. There's more to more more to find out. I'm happy you're here. Let's get started. So, Let me get my flicker. Ah, yes. Excellent. Yes, please, please, please grab the QR code, set yourselves up. There'll be a repo here as well that you can clone. Uh, there are three phases in it. We're going to work through. There's an

好，太好了。挺好的。因为这里头还有很多可以挖的东西，还有更多可以探索的内容。很高兴你们能来，我们开始吧。让我先把翻页器拿出来。啊，好的，棒。对，麻烦大家扫一下二维码，把环境配置好。这里还会有个 repo，你们可以 clone 下来。里面一共有三个阶段，我们会一步步走完。其中有个

[1:38]

interesting verification setup that you can work through alongside me. Uh, and is quite detailed, so you probably will want to investigate it a bit later yourselves. What we're covering today is based on uh this version of the talk that Tar gave uh in San Francisco just about a week and a half ago. Who here follows Tar on uh on Twitter? Fantastic. Great. Yeah.

很有意思的验证（verification）流程，你可以跟着我一起做。这部分挺详细的，你们大概会想之后自己再深入研究一下。今天讲的内容是基于 Tar 大概一周半前在旧金山做的那个版本的演讲。在座有谁在 Twitter 上关注 Tar 的？太棒了，很好。

[2:01]

Yeah. So he published that as a blog post called the unreasonable effectiveness of HTML files. And um he's basically pitching that moving on from markdown files, we're going to be using HTML instead. And we're showing some of that today. Like I said, there's a repo to go along uh enjoy that along the way and later on uh in the in the week as well. Where are we now? Where is this

对。他把那个内容发成了一篇博客，标题叫《HTML 文件出人意料的有效性》（the unreasonable effectiveness of HTML files）。他的核心观点基本上是：我们要从 markdown 文件往前走一步，改用 HTML 了。今天我们就会展示其中的一部分。像我说的，有个配套的 repo，你们可以边做边用，这一周晚些时候也可以接着玩。我们现在走到哪一步了？这一切

[2:24]

all going? I think everybody probably notices that agents are becoming more and more capable. Why is that happening? That's happening because the models are becoming more and more capable. And so if the models become more capable, it means agents can run for longer and you can give them more and more complex tasks. But that also means that we have to change our way of working. We have to

都要往哪儿去？我想大家应该都注意到了，agent 的能力越来越强。为什么会这样？因为模型越来越强。模型一旦更强，就意味着 agent 可以跑更长的时间，你也可以交给它越来越复杂的任务。但这也意味着我们得改变工作方式，我们得

[2:45]

change our habits. That's part of what today is about. How can you change the way that you're working with cloud code to get more out of it? If you're going to let your agent run for a longer period of time, then you can burn through a lot of tokens if it does the wrong thing. And you want to avoid that ideally at the beginning. And so that's where the idea came from to to

改变我们的习惯。这正是今天要讲的一部分内容——你该怎么改变跟 Claude Code 协作的方式，从中榨出更多价值？如果你打算让 agent 跑很长一段时间，那它一旦做错方向，就可能烧掉大量的 token。理想情况下，你想在一开始就避免这种情况。这就是为什么我们会有这个想法：

[3:10]

to push more and frontload more of the verification that the human would do in the spec into an HTML file because it's a more rich and more um more human ergonomic way of engaging with the content that your agent is going to be building for you and we'll see how that works.

把更多本来由人来做的验证工作前置、塞进一个 HTML 文件里。因为相比之下，HTML 是一种更丰富、对人来说更符合直觉的方式，让你能去接触你的 agent 即将为你构建的东西。我们待会儿会看看这是怎么运作的。

[3:32]

There are a bunch of things around agents that are worth reading. We have a lot of engineering blogs on our web page. Um, we also have the the standard blogs. You should check all of those out. There'll be a lot of information there. There's a lot of interesting information about harnesses, about longunning agents. All of these things are important. Today, we'll focus on

围绕 agent 有一堆值得一读的资料。我们网站上有很多工程类博客，也有那些常规的博客，这些你们都该去看看，里面信息量很大。关于 harness、关于长时间运行的 agent，都有不少有意思的内容，这些都很重要。今天我们会聚焦在

[3:50]

three levels. Um, and there'll be some something a bit more basic, something a bit more next level, and then something that's quite interesting and that'll be a bit more in-depth. The first thing is the more capable the models get, the more you should try to resist constraining them. Who here, by the way, has heard of the bitter lesson by Richard Sutton? Great. Fantastic.

三个层次上。会有比较基础的，有进阶一点的，然后是相当有意思、也更深入的那部分。第一点是：模型越强，你就越应该克制住想去约束它的冲动。顺便问一下，在座有谁听说过 Richard Sutton 的「苦涩的教训」（the bitter lesson）？很好，太棒了。

[4:13]

This is this is great. So, I'll I'll I'll for those who haven't raised their hands, uh Richard Sutton is basically the the father of reinforcement learning. If you're reading a book about reinforcement learning, it's probably authored by him. And um his idea was basically that you know you could spend all your time trying to with your human capabilities hard code up front and

这太好了。我给没举手的人介绍一下，Richard Sutton 基本上算是强化学习之父。如果你读一本关于强化学习的书，作者很可能就是他。他的观点大致是：你可以花上所有时间，用你的人类智慧去提前把系统硬编码、

[4:33]

constrain the system but in end the end pouring more data and more compute at it ends up getting more capability than anything that you could have come up with. And there's a similar analogy here, right? The the models are becoming more and more capable. And so you should accept that the model is probably better at extracting requirements from you than you are at defining your requirements.

去约束它，但到头来，往里灌入更多的数据、更多的算力，最终得到的能力会超过你能想出来的任何方案。这里有个类似的类比，对吧？模型越来越强，所以你应该接受这个事实：模型从你身上提取需求的能力，很可能比你自己定义需求的能力还强。

[4:56]

The the requirements are latent within you. Just like when you talk to your users, your users, they have an idea of they know it when they see it, but they're often not very good at articulating what they need. And likewise, you probably know what you want when you see it, but Claude is likely better at extracting what you want and what you need from you than you

需求是潜藏在你脑子里的。就像你跟用户聊天时一样，用户心里有个想法，他们「一看就知道是不是这个」，但往往说不清自己到底要什么。同理，你大概也是一看就知道自己要什么，但 Claude 从你身上提取你想要、你需要的东西的本事，很可能比你向 Claude 把它说清楚

[5:14]

are in specifying it to Claude. That's another direction to take this in. So, we'll talk about that removing ambiguity, letting Claude prompt you and interview you in prompting. Then, how to then understand and plan. We used to do this all with with markdown files. We still do it with markdown files.

的本事更强。这是另一个可以发力的方向。所以我们会讲怎么消除歧义，在写 prompt 时让 Claude 来反过来追问你、采访你。然后讲怎么去理解和做计划。我们以前全靠 markdown 文件来做这件事，现在也还在用 markdown 文件。

[5:32]

colleague of mine once said the markdown file is the lingua frana of the AI native software development life cycle thought it was pretty poetic um but it seems like that format is a bit constrained it's getting too long a lot of lines of markdown file to read condense more information into HTML files and that's what we're going to do today and then how to verify

我的一位同事曾经说过，markdown 文件是 AI 原生软件开发生命周期里的「通用语」（lingua franca）。我觉得这话挺有诗意的。但这种格式好像有点受限了，它变得太长——要读的 markdown 行数太多了。我们想把更多信息压缩进 HTML 文件里，这就是今天要做的。然后是怎么验证——

[5:56]

not test actually but just to verify in this context um how to make verification native to the thing itself so that the agent can drive it alongside a human or eventually not headlessly as well. That's where this is all going as well, right? The agents are going to be doing more and more of this natively and how can you set the artifacts that you produce up to natively be testable and

这里不是说测试（test），而是单纯地验证（verify）——在这个语境下，怎么让验证成为这个东西本身自带的能力，这样 agent 就能跟人一起去驱动它，甚至最终在无人值守的情况下也能做。这一切也正是往这个方向走的，对吧？agent 会越来越多地原生承担这类工作，那你怎么把你产出的这些产物（artifacts）设计成天生就可测试、

[6:19]

verifiable in the way that you need. So, we'll do an example. By the way, has everybody had a chance to get grab that QR code and uh set themselves up? Very good. There'll be a link to the repo eventually as well. I think that comes in a bit. Uh let's say we want to do a build splitting app. Uh very simple. Um you know, uh you want to you go out with friends, you want to find out who owes

天生就可验证、并且符合你所需要的方式？所以我们来做个例子。顺便问一下，大家都来得及扫那个二维码、把环境配好了吗？很好。最终也会有个 repo 的链接，我想再过一会儿就出来了。比方说我们想做一个 AA 分账的 app（bill splitting app），很简单。你知道的，你跟朋友出去玩，想搞清楚谁该付

[6:44]

what. Yeah. Um let's let Claude interview us around doing this. So in this case, I'm actually going to Yeah. Before I do that, give you an example of how you would do this and how you could do this better. Yeah. What's good prompting? What's bad prompting?

多少钱。对吧。我们让 Claude 围绕这件事来采访我们。在这个例子里，我其实打算……对，在那之前，先给你们举个例子，看看你会怎么做、以及怎么能做得更好。对，什么是好的 prompting？什么是差的 prompting？

[7:07]

Bad prompting is when you say just make it better. And a lot of people that I watch uh using cloud code just type make it better. Um make no mistakes. Yeah. Yeah. Yeah. That's not good prompting. Um you want to encourage Claude to extract from you specific details. Give give the domains. Don't oversp specify the outcome but specify the areas that you are interested in.

差的 prompting 就是你直接说「把它弄得更好点」。我看到很多人用 Claude Code 时就直接打「make it better」、「别犯错」。对，对，对，那不是好的 prompting。你要做的是鼓励 Claude 从你这儿提取出具体的细节。给出领域范围，别把结果（outcome）过度指定死，而是指明你关心的那些方面。

[7:31]

Right? That's what makes this good pump on the side different and better. Um, you know, focusing on the audience, for example, or uh suggesting an open-ended way to answer the question as opposed to predefining it up front and then that will prompt Claude to iteratively interview.

对吧？这就是右边这个好 prompt 不一样、也更好的地方。比如说聚焦在受众上，或者用一种开放式的方式去引导回答，而不是一上来就把答案预先框死，这样就能促使 Claude 一轮一轮地来采访你。

[7:51]

All right. So, um, I've got a cloud open here. Two different clouds. Who here has used fast mode? Okay, not that many people use fast mode. That's why I set it up here. Um, and who here uses auto mode?

好。我这儿开了一个 Claude，其实是两个不同的 Claude。在座有谁用过 fast mode？好，用 fast mode 的人不多。这正是我在这儿把它配好的原因。那有谁用 auto mode 的？

[8:08]

Oh, I'm very happy that you all use auto mode. You need to be using auto mode. If you're not using auto mode, you need to be using auto mode. It makes it so much easier. Um, yeah, use auto mode. Good.

哦，看到你们都用 auto mode，我太开心了。你们就该用 auto mode。如果你还没在用 auto mode，那你真该用起来。它会让一切轻松太多了。对，用 auto mode，很好。

[8:18]

Who here is setting their effort parameter? Good, good. Our recommendation is X high, but you can also set max effort. I mean, in my case, I think I kept it at X high for this. Um, yeah, yeah, yeah. So, just to touch on how those look, right? Like we've got forward slasheffort, which is the effort parameter. Forward slashfast, which is the fast mode, which is I've I've turned

在座有谁会去设 effort 参数的？好，好。我们的建议是用 X-high，不过你也可以设成 max effort。我自己这次大概是保持在 X-high。对，对，对。简单说说这些怎么用，对吧。我们有 /effort，也就是 effort 参数；有 /fast，也就是 fast mode，我已经把它

[8:41]

it on, and then uh we have uh the auto mode, which we cycle into like this. Shift tab. Yeah, auto mode is the best. So, I'll copy paste my my you all when you have the repo will see um one of these prompters in there. So, I'll just copy paste the prompt in here on the the bill splitting app. So, okay, Claude's going to ask me uh you tab through these, right? Like you'll tab through

打开了；然后还有 auto mode，我们像这样切进去——Shift+Tab。对，auto mode 是最棒的。我把我的 prompt 复制粘贴过来，等你们拿到 repo，会在里面看到其中一个这样的 prompt。我就把这个关于 AA 分账 app 的 prompt 粘到这儿。好，Claude 会问我一些问题，你用 Tab 在这些选项之间切换，对吧。你会像这样 Tab 过去——

[9:05]

these like this. Uh, and in my case, I want to uh I want it just for friends. And I want it uh is there a secondary audience? No, no secondary audience. And we'll leave that as that. The key thing here in the prompt is that you want to use you want to prompt claw to use the ask user question tool that you saw me use in the prompt earlier before. Let me submit

像这样在它们之间切。在我这个例子里，我想要……我只想给朋友之间用。然后它问有没有次要受众？没有，没有次要受众，就这样吧。这里 prompt 的关键在于：你要让 Claude 去用 ask user question 这个 tool，就是你之前看到我在 prompt 里用的那个。我先把

[9:35]

those answers. and then it'll write that spec. Right? So you you saw me in my prompt explicitly referring to the ask user question tool. That's what triggers this workflow. And you know depending on how well you specify that prompt, you'll get better outcomes. So it'll generate a spec. We could then turn that into uh a bunch of different ways of of building the app.

这些答案提交上去，然后它就会把那份 spec 写出来。对吧？你看到我在 prompt 里明确提到了 ask user question 这个 tool，正是这个触发了整套流程。而且取决于你这个 prompt 写得多到位，你会得到更好的结果。所以它会生成一份 spec，之后我们可以把它转化成各种不同的方式来构建这个 app。

[9:59]

It's going to take a while. So we'll go back to my slides. Could I go back to the slides, please? Great. So, let's say we have a plan. Generates a plan. We've answered some questions. It It's getting better at extracting turn by turn from me what I actually want without me having to upfront verbalize everything myself.

这会花点时间。所以我们先回到我的幻灯片。能帮我切回幻灯片吗？很好。那么，假设我们现在有了一份计划，它生成了一份计划，我们回答了一些问题。它在一轮一轮地、越来越擅长从我这儿提取我真正想要的东西，而不需要我一上来就自己把所有事都说清楚。

[10:21]

Then I want to be able to check is it what I want. Well, an HTML file is more dense, much more information dense, much more ergonomic for you to understand what the thing is going to look like. You can even use a screenshot with it.

接下来我想要能去核对一下：这是不是我想要的。而 HTML 文件信息更密集、密度高得多，也更符合直觉，让你更容易理解这东西最终会长成什么样。你甚至可以配上一张截图一起看。

[10:35]

You could use the playright MCP later on for that as well, right? You can interact with it much more richly than you could with a very long markdown file. And especially if the markdown files get, you know, if they get more than about 200 lines long, it's unlikely you're going to read it and certainly unlikely that your colleagues are going to read them. Before we

之后你还可以用 Playwright MCP 来做这件事，对吧。你能用比一份超长的 markdown 文件丰富得多的方式去跟它交互。尤其是当 markdown 文件长到——你懂的——超过差不多 200 行的时候，你大概率就不会去读它了，你的同事就更不可能去读了。在我们

[10:54]

started here, I had Claude with Opus 4.7 generate a few examples for me of what this could look like with my bill splitting app, and we'll look at those now. So we have them here. The prompt I used is in the repo that you'll have access to. I asked proud give me a few different directions, four different design directions, explore them, generate them as HTML and let me

开始之前，我让用 Opus 4.7 的 Claude 帮我生成了几个例子，看看我这个 AA 分账 app 可以长成什么样，我们现在就来看看。它们在这儿。我用的那个 prompt 也在你们能拿到的 repo 里。我让 Claude 给我几个不同的方向——四个不同的设计方向，去探索它们、把它们生成出来，做成 HTML，然后让我

[11:16]

explain explore them across each other. And they came up with these different ones. So one sort of brutalist one Tokyo fintech we'll click them all one by one. So this is what this one would look like.

让它们互相参照、各自探索一下。然后它给出了这几种不同的方案。比如有一个偏粗野主义风格的、一个东京金融科技风格的,我们一个一个点开看。这个点开就是长这样。

[11:29]

Uh, and then this one, this one might look like this. Completely different aesthetic, right? And I click around and and this is much better for me to give feedback to Claude on than it would be to just try to infer from a markdown file what the thing is going to look like. I could go in and like I said, take screenshots, feed them back into Claude. Who here regularly takes

然后这一个呢,可能就是长这样,审美风格完全不一样,对吧?我可以点来点去看。对我来说,拿这个去给 Claude 反馈,比起对着一个 markdown 文件去猜最终成品长啥样,要好太多了。我可以进去——就像我刚说的——截图,再把截图喂回给 Claude。在座有谁会经常截图

[11:49]

screenshots to give information to Claude? Very good. You should be doing that. That's very good. Um, especially when you're when you're doing front end, it's really hard to articulate like the thing is slightly off or there's a misalignment here and it's like you'll find that you run them into the limits of what you can express and it's actually easier for especially Office

把信息提供给 Claude 的?很好,你们就该这么做,非常好。尤其是做前端的时候,你很难用语言准确说清楚——比如这东西有点不对劲、这里有点没对齐,你会发现你很快就撞到语言表达能力的天花板了。这种情况下,反而更适合——特别是 Office

[12:07]

4.7 which has a much better vision model than before um to extract from you what the problem is and proactively. Great. So, a few examples. Tar has a lot more in his repo which you'll find in the repo as well online. So, so far we've covered letting Claude extract information from you interactively as an interviewer because the longer you let an agent run, the

4.7,它的视觉模型比以前强多了——让它主动从你这儿把问题抽取出来。很好。再举几个例子。Tar 的 repo 里还有很多内容,你们也能在线上的 repo 里找到。到目前为止,我们讲的是:让 Claude 像采访者一样、通过交互式地从你这里提取信息。因为你让一个 agent 跑得越久,

[12:39]

more important it is that the spec is comprehensive, the less likely it is that you will be able to upfront define everything and it's better for you to iterate with COD in that manner. Then what's a better and more efficient and ergonomic form factor? Um it would be the HTML file.

spec(规格说明)写得是否全面就越重要,而你越不可能在一开始就把所有东西都定义清楚,所以更好的做法是以这种方式跟 Claude Code 一起迭代。那么,什么是更好、更高效、更顺手的形态呢?那就是 HTML 文件。

[13:01]

And now the more important part from all of this is how to verify what cloud has done and how to make it agent native. That's what we're going to cover with the repo. I think we have uh I think there'll be one slide where you'll get to see the actual slides to to engage with uh the actual URL to engage with. So what you want to do is make it part of the artifact and that's

接下来更重要的一部分,是怎么去验证 Claude 做出来的东西,以及怎么让它变得 agent native(原生适配 agent)。这就是我们接下来要结合 repo 讲的内容。我想我们应该有——应该会有一张幻灯片,你们能看到真正的幻灯片、能拿到可以实际去操作的那个 URL。你要做的,就是把它做成 artifact 的一部分,而这就是

[13:30]

what we're going to cover today. In fact, there's part of what we're doing today is we're going to we're going to use um storybook fixtures, a testing library, sort of data emissions um and attributes and playright MCP for a React uh for a React app um with with components that you will have seen before, but remixed in a way to make it easy for Claude as an agent to

我们今天要讲的内容。事实上,我们今天要做的事情里,有一部分是:我们会用到 Storybook fixtures、一个测试库、一些数据发射(data emissions)和属性,再加上 Playwright MCP,针对一个 React app——里面的组件你们之前应该都见过,只不过被重新组合了一下,目的是让 Claude 作为 agent 更容易

[13:58]

extract the data contracts in the DOM. and then run verification and then even record the verification which is how the cloud code team that t is on runs this and that's what the demo that he built refi refers to right like it'll be a generation of verification steps that get run through that get a recording and that's then put on S3 or shared somewhere else with colleagues and

从 DOM 里提取数据契约(data contracts),然后跑验证,甚至把验证过程录下来。这正是 Tar 所在的 Claude Code 团队的做法,也是他做的那个 demo 所指的东西——它会生成一连串验证步骤,跑一遍、录下来,然后放到 S3 上,或者用别的方式分享给同事。

[14:20]

that's how you turn these verification steps into something that is generated by the agents and then that you have fewer and fewer touch points with that's something that you can replicate especially from that rebuild the way to do that is to sort of sensibly modularize uh but that becomes really clear when we look at the actual the actual thing so I encourage you

你就是这样把这些验证步骤变成由 agent 生成的东西,然后你需要亲自介入的点就越来越少。这是一种你可以复用的模式,尤其是在那种重建场景里。实现的办法是合理地做模块化——但等我们看到真正的实物时,这一点会非常清楚。所以我建议你

[14:46]

to go to that link there'll be a repo this is the repo under CWC workshops cloud with code workshops and there's the one for today's session which is how we claw code. What's covered in there is phase one which we just covered, right? The simple prompt to say, "Hey, I'm writing a bill splitting app. Interrogate me on the requirements so that I don't have to miss any in my upfront description to

去访问那个链接,会有一个 repo,在 CWC workshops(Claude with Code workshops)下面,里面有今天这场的那个,叫 "how we Claude Code"。里面涵盖的内容,第一阶段就是我们刚讲过的,对吧?就是那个简单的 prompt:"嘿,我在写一个分账 app,就需求来盘问我,这样我一开始的描述里就不会有遗漏",

[15:16]

Claude. The second one is generating four different HTML design directions that we could explore uh for me to then feed back on or for me to decide. And then thirdly, we have a a verification framework here. Uh and it's in a different context. It's not to do with the bill splitting app. It's regarding a to-do app, a small to-do app uh uh written in React. And

免得让 Claude 漏掉什么。第二个是生成四种不同的 HTML 设计方向供我们探索,然后我可以基于这些给反馈、做决定。第三,我们这里有一个验证框架。它处在一个不同的上下文里,跟分账 app 没关系,它针对的是一个待办事项 app——一个用 React 写的小型 to-do app。然后

[15:42]

we're going to show how we built verification entirely into that along the way. That's described in detail in the readme for phase three and then also in the verification detail as well which is here. So if you want the deep dive on how this is set up, you can read this and it's all provided in the repo. It's pretty cool. What is it focused on?

我们会展示我们是怎么一路把验证完整地内建进去的。这在第三阶段的 readme 里有详细说明,在验证细节文档里也有,就是这儿。所以如果你想深入了解这套东西是怎么搭起来的,可以读这个,repo 里全都提供了,挺酷的。它到底聚焦在什么上?

[16:08]

We've written a a small to-do list uh app here. I can add an item test. It's hard to see. There we go. Very good. And then I could take it off and drop it as well. And I could clear the finished items. And so many things are happening here in terms of the state.

我们在这儿写了一个小小的待办清单 app。我可以加一个条目 "test"。有点看不清。好,出来了,很好。然后我可以把它划掉、再拖动它,还能清掉已完成的条目。从状态(state)的角度看,这里其实发生了非常多的事情。

[16:32]

And we'd like to verify that it's all working alongside the tests that are already defined. Uh but these verification steps, we'd like them to be driven by an agent. There are three ways that we're going to do this. So we're going to do this in a human readable way. Um but then that same way of doing it in a human readable dashboard we're going to verify uh in an agent first way

我们希望验证这一切都正常工作,跟那些已经定义好的测试一起跑。但这些验证步骤,我们希望由 agent 来驱动。我们会用三种方式来做。第一种是用人类可读的方式来做。但同样这种方式——用一个人类可读的 dashboard——我们还会换成 agent 优先的方式去验证,

[16:52]

uh and let claw do that separately and then there's a separate way in the in the repo as well. You can just run um run verify and then it'll just run the test matrix there. You'll get a slightly different result if you do it from the repo versus here but the the principle is the same. So human readable, agent driven if you're doing it from from plot code or somewhere else and then also

让 Claude 单独来跑这个。然后 repo 里还有另一种方式,你直接运行 "run verify",它就会跑那里的测试矩阵。从 repo 里跑跟在这儿跑,结果会略有不同,但原理是一样的。所以就是:人类可读的方式、agent 驱动的方式(如果你是从 Claude Code 或别的地方来跑的话),还有

[17:13]

just generally headless like you might do it in in CI. We'll have a look at it in a bit more depth. We'll go here into the app and we'll actually look at there we go. We'll look at elements we have here. the actual emitting. So the the emitting different data data aspects the data verify unit the total done and active. Um the component itself here is publishing its state to the DOM.

就是那种完全无头(headless)的方式,比如你在 CI 里可能就会这么干。我们来稍微深入看一看。我们进到 app 里,实际看一下——好,出来了。我们看一下这里的元素,看它实际的发射(emitting)。也就是它发射出来的各种数据维度:data-verify 单元、total、done、active。这个组件本身在把它的状态发布到 DOM 上。

[17:45]

Uh and so if I change my if I change my state here if I might add test again. See that updates and I drop it. It updates again. So this is what the agent can read later as opposed to having to scrape the DOM.

所以如果我在这儿改一下我的状态——比如我再加一个 "test",看,它更新了;我再把它划掉,它又更新了。这就是 agent 之后可以读取的东西,而不用去爬(scrape)整个 DOM。

[18:02]

We can just if you publish the state here separately from the act internals, you'd be able to run the verification independently of what whatever the state of the app is. Um and that's how this is set up to work. Uh and then you can run this further down the line as well.

我们可以——如果你把状态在这里单独发布出来、跟 React 内部实现分开,你就能独立于 app 当前处于什么状态去跑验证。这就是这套东西被设计成这样工作的原因。然后你在后续流程里也可以继续这么跑。

[18:20]

Each one of them gets this, right? If you look at um if I if I pull up the That's a bit hard to read. Let's do that here. Um, every every component gets one of these, right? There'll be schemas, there'll be fixtures, um, the known states and then then the invariance. Uh, there are particular ones here that that always have to roll, always have to hold. You'll test them with probes and

每一个组件都有这套东西,对吧?如果你看——我把这个调出来,有点不好读,我们在这儿弄。每个组件都会有这样一份东西:会有 schema,会有 fixtures、已知状态(known states),然后是不变量(invariants)。这里有一些特定的不变量是任何时候都必须成立的。你会用探针(probes)去测它们,

[18:47]

we'll do one example which we've hardcoded. is we've hardcoded an example that will fail the verification and we'll let the human verified dashboard catch it but then we'll also let the agentic way of doing it cach it as well and we can let cloud code find it and diagnose it for us.

我们会做一个例子,这个例子是我们硬编码进去的。我们硬编码了一个一定会让验证失败的例子,先让那个人类验证的 dashboard 把它抓出来,然后我们也让 agentic(代理式)的方式同样把它抓出来,我们可以让 Claude Code 找到它并帮我们诊断。

[19:04]

So that same approach also works here. So I've got the dashboard defined here and what we see here is there we go. Um like I said we've got the different schemas the the invariants that we've defined and we can run these right individually. We can see how they would execute here. Got an example here or also I could run all of them. In fact I'm going to do that now. I run them

所以同样这套方法在这儿也能用。我在这里定义了 dashboard,我们看到的就是——好,出来了。就像我说的,我们有不同的 schema、我们定义好的那些不变量,我们可以单独地、一个个去跑,看它们在这儿是怎么执行的。这里有个例子,或者我也可以把它们全跑一遍。其实我现在就来跑一遍,我把它们全部

[19:31]

all. One of them triggers artificially because you planted it before. I'm going to scroll down and find out what that is. And it's here. Uh we will actually look at how we can replicate this for an agent as well. And we would do that like this. go here and we can run basically the manifest of all the different verification steps that are defined here at state in the DOM. We can

跑了。其中有一个会人为地触发失败,因为你之前埋了一个进去。我往下滚动,看看那是什么。就在这儿。我们接下来实际看一下,怎么把这同样的东西也复制到 agent 身上去。我们会这么做:到这儿来,然后基本上就能把在 DOM 里以状态形式定义的那一整份验证步骤清单(manifest)跑起来。我们能

[20:12]

get them in the same way that we have them here. We expand that. It's getting a little bit small. as an example like that and then like that as well. Great. If we do that then we can also actually run them. Uh just specifically here uh I'll do it manually first. Let me reply.

用跟这里一样的方式拿到它们。我们把它展开,字有点变小了。比如像那样一个例子,然后这样也行。很好。这么做了之后,我们其实也可以真的去跑它们。就具体在这儿,我先手动来一遍。让我回复一下。

[20:48]

Uh, we play them all. Close that. In this case, we're running this not to perform the verification, but to provide the evidence of the verification. Um, we can later on record this. Um, we can record these as clips which would just be videos that we capture and then we would uh store them, share them with colleague, put them on S3 or whatever it might be.

我们把它们全播一遍。关掉那个。在这种情况下,我们跑这个不是为了执行验证,而是为了提供验证的证据。我们之后可以把它录下来,把这些录成片段,也就是我们抓取的视频,然后存起来、分享给同事、放到 S3 上或者别的什么地方。

[21:26]

Let me pause that here. There we go. So, here's our summary. We have one that's deliberately failed. I'll explain that in a second. But in each case, you can also see the details of how this was done.

我在这儿先暂停一下。好。这就是我们的汇总结果。有一个是我们故意让它失败的,我等会儿解释。但每一个里面,你也都能看到它具体是怎么执行的细节。

[21:44]

The key thing here is that we want to um it's important to include the probes uh to to push off the happy path and then a lot of this will be generated by Claude for Claude, right? So there's there's a way of scaling this further.

这里的关键是,我们想要——很重要的一点是要把探针(probes)包含进来,去推它偏离 happy path(理想顺利路径)。然后这里面很多东西都会是由 Claude 生成、给 Claude 用的,对吧?所以这里有一条进一步扩展规模的路子。

[22:00]

Um in the end, we'll go to the one that didn't work. It's the one where we hardcoded that the sums don't match. In this case, the the state doesn't match. Uh 3 plus uh uh 3 + 4 does not equal 10 in this case.

最后,我们去看那个没通过的。就是我们硬编码了"加总对不上"的那个。在这个例子里,状态对不上:3 加——呃,3 + 4 在这儿不等于 10。

[22:19]

And we'll get the same result if we run verify all from from the claw here as well. We'll let Claude do that in a moment as well. There we go. Then it's a little bit hard to see that there's pass and fill. So there we go. Okay, good.

如果我们在这儿从 Claude 这边运行 "verify all",也会得到同样的结果。我们待会儿也会让 Claude 来跑一下。好,出来了。然后这个有点不好看清哪些是 pass、哪些是 fail。好,出来了。OK,很好。

[23:03]

We can change this, right? I can The point here is that I'm I'm trying to show that the the idea is to let something agent native be read as the DOM contract here. Um that's what we established earlier that the state is managed here or well not managed but at least um viewable to an agent that it can then run the verification end to end itself. And we can let Claude do that

我们可以改这个,对吧?我可以——这里的重点是,我想说明:这个思路就是让某个 agent native 的东西在这儿被当作 DOM 契约来读取。这就是我们前面确立的——状态在这儿被管理起来,或者说不一定是"管理",但至少对 agent 来说是"可见"的,这样它就能自己端到端地跑完验证。之后我们也可以让 Claude 来做

[23:27]

afterwards as well. In this case, we can also make a change that will break more. Let me see if I can break the chain. I'll break the contract but not the app. And I'll do that here. So I could change for example here under is that under apps total stats.

这件事。在这个例子里,我们还可以做一个会破坏更多东西的改动。我看看能不能把这条链给搞断。我会破坏掉契约,但不破坏 app。我在这儿来做。比如说,我可以改这里——是在 apps 下面的 total stats 那块吗。

[23:53]

I'll delete that. I'll do undo that afterwards as well. And if we now we run, then all of these ones at the bottom here will fail. And we'll get the same when we run this again from here as well. Oops.

我把这个删掉,待会儿再撤销回来。现在我们跑一下,你会看到下面这些全都失败了。从这儿再跑一次也是一样的结果。哎呀。

[24:42]

There we go. All of these are failing. Not because we broke the app, but because we broke the contract. That clock can then natively verify Excellent. Great. I want Claude to tell me what's going on with these ones. At least, well, not the ones that I broke, but I'll undo the ones that I broke, but I'd like it to tell me what's going on with this one.

好了。这些全都失败了。不是因为我们把 app 弄坏了,而是因为我们破坏了那份契约。这样 Claude 就能原生地去验证。太棒了。我想让 Claude 告诉我这些到底是怎么回事——当然不是我故意弄坏的那些,那些我会撤销掉,我想让它告诉我这一个是什么情况。

[25:17]

And so let me correct the change that I made before. Control Z. Auto save. Rerun. And there we go. So we've done it manually and we've shown how we can match what the agent would see versus what we would do. But we can let Claude run this headlessly itself as well. So I'll do that and I'll pull that open.

那我先把刚才改的地方改回来。Ctrl+Z,自动保存,重新跑一遍。好了。所以我们刚才是手动做了一遍,展示了怎么让 agent 看到的东西和我们自己做的东西对上号。但其实我们也可以让 Claude 自己以 headless 的方式跑起来。我来演示一下,把它打开。

[25:52]

Let it run. This one's broken deliberately. And the rest works. Great. So we have cloud running here. I mentioned fast mode before. I mentioned auto mode which is great. I mentioned forward/goal. In this case, what we're going to do is let Opus 4.7 help us find out why that particular verification failed.

让它跑。这一个是故意弄坏的,其余的都能正常工作。很好。现在 Claude 在这儿跑起来了。我前面提到过 fast mode,提到过 auto mode,这个很好用,还提到过 forward/goal。这次我们要做的是,让 Opus 4.7 帮我们搞清楚那一项验证为什么会失败。

[26:32]

I've already connected the playright MCP for this uh and it's going to use that and it's going to run. Ska got rejected. 4 plus 3 does not equal 10. Uh yes, if you were to run bun verify uh run bun verify then you would actually pass the tests in this case. Uh because we've deliberately put the verification in wrong just to demonstrate that then the the test matrix itself will actually

我已经为此接好了 Playwright MCP,它会用这个去跑。结果被拒了——4 加 3 不等于 10。对,如果你去跑 bun verify,这次其实是能通过测试的。因为我们是故意把验证写错的,就为了演示这一点,这样整个测试矩阵本身其实是会通过的。

[27:00]

pass. Um, but the idea here is to separate out what you could do as a human versus then what you could do v agent directly from the browser using basically these the commands that you saw and then also what you could run headlessly directly from the CLI.

会通过。不过这里的核心思路是:把作为人类你能做的事,和你以 agent 身份直接从浏览器、用你刚才看到的那些命令能做的事,以及你能从 CLI 直接 headless 跑的事,这三者区分开来。

[27:19]

If you wanted to do it um like this as well then you could record the outcome that we talked about. >> Yes. So here I' in this in particular setup you've actually got the ability to to show how you would record these u the same delayed running that we've shown you could run and record as evidence basically to show that it would work um and you could store that uh and it could

如果你想这么做的话,你还可以把我们刚才说的那个结果记录下来。>> 对。在这个特定的搭建里,你其实可以演示怎么记录——就是我们给你看过的那种延迟运行的方式,你可以一边跑一边录下来,基本上就是作为证据,来证明它确实能工作,你可以把它存起来,然后它就能

[27:49]

run like that this is very common right now. Um the the cloud code team uh records basically all the code changes that they do like this um all the front end changes at least uh especially on the around the at the pace of the shipping that we have at the moment.

像那样跑起来。这种做法现在非常普遍。Claude Code 团队基本上就是这么把他们做的所有代码改动都记录下来的,至少所有前端的改动都是,尤其是在我们现在这种发布节奏下。

[28:16]

Are people able to pull up the the repo and get the verification setup working? Yeah, very good. Very good. >> Yes, you can store them. I mean like you can just put them in S3 or whatever or short share them with colleagues or um in our case we have a version we have a we have a internal this is more automated than what I'm showing here. Uh in our case we do record them. Um not

大家能不能把 repo 拉下来,把这套验证环境跑起来?嗯,很好,很好。>> 对,你可以把它们存起来。我是说,你可以直接扔到 S3 之类的地方,或者跟同事分享,或者——拿我们来说,我们有个版本,我们内部有一套,比我这儿演示的要更自动化。我们这边确实会把它们录下来。不过

[28:43]

certain for how long or in what context but it's part of a regular cadence. And then you get the in fact you get the I should have triggered that. Did I see that? There we go. So you can you have each clip you could download all of them or download them ind them individually and then that's basically the bundle that that that proves the verification worked. Um,

存多久、在什么场景下用我不太确定,但它是我们一个常规节奏的一部分。然后你会得到——其实我刚才应该触发一下的。我看到了吗?好了。所以每一段录像你都可以全部下载,也可以单独下载,这基本上就是那个证明验证确实通过了的成果包。嗯,

[29:10]

so I guess to bring it around to what we've covered so far and then and where it's going, three different surfaces, the the human surface, right? the um and then the the agent first from the browser um mapping on the same way and then you could also run it in CI with just run bun verify.

那我来把目前讲到的内容串一下,再说说它的发展方向。一共三个不同的界面:人类的界面;然后是 agent 优先、从浏览器出发、用同样的方式映射过来的界面;然后你还可以直接在 CI 里用 run bun verify 跑。

[29:37]

The objective here at the end is to figure out how do you embed the verification into the artifact itself. There's more detail. I encourage you to check out the repo itself um and actually run a few examples yourself and run a few tests, right? You can change the code, see what breaks, rerun it yourselves. Um it's quite detailed and it's what Tar and and team use in the

这里最终的目标是搞清楚:怎么把验证嵌入到产物本身里面去。还有更多细节,我建议你们去看一看这个 repo,自己实际跑几个例子、跑几个测试。你可以改代码,看看哪里会坏掉,再自己重新跑一遍。它写得相当详细,这也正是 Tar 和团队在

[30:05]

cloud code team uh for their work already. This is a this is this came uh pretty quickly um just a week and a half ago into this demo. Um so encourage you to check this out. What's new really is the remixing and the the new arrangement of of of of primitives that you're already familiar with that you're already using just to make it available to the agent first.

Claude Code 团队已经在用的东西。这套东西出现得相当快,大概一周半之前才进到这个 demo 里。所以我建议你们去看看。真正新的地方在于这种重新组合、重新编排——把那些你已经熟悉、已经在用的基本元素,重新排布一下,让它们能优先服务于 agent。

[30:30]

That concludes really what I wanted to cover. Um I encourage you to spend more time on the repo. There's great documentation there and you can actually um get a lot out of it with Opus 4.7. Opus 4.7 works really well because it has a better vision model. That's where this really excels. Um if you use Sonnet, I I wouldn't recommend that. So try using Opus 4.7 for it. Um try using fast mode

我想讲的基本就到这儿了。我鼓励你们多花点时间在这个 repo 上,那里有很棒的文档,配合 Opus 4.7 你能从里面挖出很多东西。Opus 4.7 之所以特别好用,是因为它的视觉模型更强,这正是它真正出彩的地方。如果你用 Sonnet,我不太推荐。所以这件事还是试试用 Opus 4.7 吧。也试试 fast mode,

[30:59]

for it. Fast mode is great, costs more, but it's great for iterating quickly on specs. People will sometimes ask, well, isn't a HTML spec um more token inefficient? And the answer tends to be no. Uh and the reason is that in the long term you iterate less if you have a good and rich HTML spec even if on oneoff instances you spend more tokens to generate it. So um you

用 fast mode 来做这个。Fast mode 很棒,虽然更贵,但用来快速迭代 spec 非常合适。有人有时会问:HTML 形式的 spec 不是更费 token、更不划算吗?答案往往是否定的。原因在于,从长远看,如果你有一份好的、内容丰富的 HTML spec,你迭代的次数会更少,哪怕单次生成它会多花一些 token。所以

[31:28]

can even try it with fast mode. So that would be it. Uh that's my recommendation to you. I enjoyed uh speaking to you and thank you for your attention.

你甚至可以试着配 fast mode 一起用。那就到这儿吧。这就是我给你们的建议。很高兴跟大家聊这些,谢谢大家的关注。