完整教程：40分钟用Claude Code从设计到代码实现 | Meaghan Choi

我现在在Cloud Code上花费的时间可能与在Figma上相当。我不再只是把Figma设计稿交给工程师，而是会直接给他们一个我写的草稿PR，里面附上我想实现的功能描述。这样我一眼就能看出，哦，这里看起来和我设计的应用效果不太一样对吧？总会有各种小细节需要调整。

I myself probably spend an equal amount of time now in Cloud Code as I do in Figma. Instead of handing off a Figma mock to an engineer, I'll hand them, like, a draft PR that I have with, like, a description of what I was trying to do. So right away, I say, like, from my eye, I can tell, oh, this doesn't look exactly how the app I designed it. Right? There's all these little details.

所以实际上我在Cloud Code里大部分时间都花在最后的10%润色阶段。在Anthropic，每个人都会编程，这种协作氛围让我觉得我们的规则限制根本不重要。

And so this is actually where I spend most of my time in Cloud Code, last 10% of Polish. At Anthropic, anyone can code, and it's such a collaborative environment that I feel like our rules don't matter.

你还有另一页幻灯片对吧，上面有完整的流程图。嘿，能把这个也讲解一下吗？

You have, like, another slide, where you have this, like, whole flow diagram. Hey. Can you walk through this one too?

没问题，当然可以。那么

Yeah. Definitely. So

好的。欢迎各位！今天的嘉宾是Megan。作为Cloud Code的设计主管，Megan不仅负责功能设计，还定期将代码推送到生产环境。我特别期待和她探讨AI如何帮助设计师提升效率，并请她演示从设计到原型的具体工作流程。

K. Welcome, everyone. My guest today is Megan. As a design lead for Cloud Code, Megan not only designs features, but also ships to prod on a regular basis. And I'm really excited to talk to her about how AI can help designers work faster and get her to demo her exact workflow to go from design to prototype.

欢迎你，Megan。

So welcome, Megan.

非常感谢。能来到这里我超级兴奋，真的非常期待和大家分享我使用Cloud Code的心得。

Thanks so much. I'm super excited to be here and, yeah, just really excited to talk about how I use Cloud Code myself.

好的。那么，我想我们就从这里开始吧。作为一名终于能定期将设计交付生产的设计师，感觉如何？

Yeah. Alright. So so I guess let's start with this. How does it feel to be finally a designer who ships to prod on a regular basis?

说实话，既有点害怕又觉得非常神奇。这些年来，我一直对开发很感兴趣，但在我刚入行时，感觉你必须专注于打磨设计或开发的单项技能。除非你是罕见的全能型人才，否则很难兼顾两者。

Honestly, it feels a little terrifying and simultaneously very magical. I think, you know, over the years, I've always really just been interested in development, but it felt like at the time, especially when I started my career, you really need to hone your craft in either design or either development. It was just hard to bridge the gap into between both unless you're a really special unicorn.

嗯。

Mhmm.

而过去五年里，编程变得容易多了。那些我以前不敢麻烦工程师的细节问题——因为可能优先级低或需要花很长时间调试——现在我可以直接实现。你理想中的精致产品就这样触手可及，这感觉很棒。

And then just in the past, I'd say, like, five years, it just became so much easier to code. And all those, like, little details that I always felt I couldn't really ask my engineers because it'd be a p two or it would take me a really long time to set up and fix, I can just ship them and have them. And so, like, that really polished product that you always want is just there and ready for you. It's pretty amazing.

没错。我总不好意思让工程师改五六处文案

Yeah. Exactly. I always feel bad asking my engineers, but, hey. Can you tweak, like, five different copies

就是啊。

Exactly.

或者调整几个像素之类？现在你都能自己搞定了对吧？

Or, like, make this pixel change or something? And and, yeah, now you can just do it yourself. Right?

嗯，确实。有时候，当你真正将设计或某个想法移植到生产环境，亲眼看到时，你会觉得，哦，这看起来和我想象的不太一样。然后你会更不好意思让他们改回去或再次修改。而这个工具让你能自己完成所有调整。

Mhmm. Exactly. And sometimes, you know, I think when you're actually porting designs or something that you have in this idea into prod, and then you actually see it, you're like, oh, that actually didn't look how I thought I would. And then you feel even worse asking them to change it back or changing it again. And this just gives you the power to do it all yourself.

太棒了，真是太棒了。或许你可以完整介绍一下设计流程，以及AI和Cloud Code能在哪些环节提供帮助。

That's awesome. That's awesome. So maybe you can walk through the entire design process and where AI and Cloud Code can help.

当然。我这里有一张相关的幻灯片可以分享，非常实用。我现在就共享屏幕。我的工作流程有几个显著变化，主要可以归纳为三个我现在特别依赖Cloud Code的核心工作场景。

Definitely. So I would say for me, I actually have a slide for this I can share, which is really useful. Let me share my screen right now. There's a few different ways my workflow has changed. I would say a big one that I have is kind of I would bucket it into three big workflows that I now use Cloud Code for specifically.

第一个场景可能是技术背景较弱的人最常使用的，甚至现在通过Cloud AI的工件功能就能实现，不一定需要代码工具。这是从零到一的探索阶段，你可以尝试新想法。但通常这属于独立操作，不一定与代码库关联。如果在Cloud Code中进行这种探索，其优势在于能直接在代码库中操作，理解你的代码及其适配位置，比单纯制作原型要真实得多。另外两个我最常用的工作场景是——我先说第三个——理解现有代码库。

This first one is one that I think folks who are maybe less technical reach for the most often, and it's one that you can do even in Cloud AI today with artifacts without needing necessarily the code tool on top of it. And this is zero to one exploration, so you can kind of explore new ideas. But very often, this is kind of in a silo, and it's not necessarily in your code base. I think the superpower of these zero to one explorations if you're doing it in Cloud Code is that it can actually be in the code base and understand your code and where it fits, and so it's a lot more real than doing just it on a side on a prototype. And then the other two workflows that I do most common now are to, I'll go to the third one here, actually, understand the code base.

当我开发新功能或项目时，通常会在前期头脑风暴阶段向Claude咨询当前实现方式，包括系统提示词设置、配置架构等细节，以真正理解用例。有时甚至会问Claude：如果是你会如何重新设计？之后我会进入Figma制作设计稿，待准备就绪再返回代码阶段。如果工程师已经搭建好必要基础设施，我就进行最终润色；有时我也会先用Cloud Code尝试自己能完成多少。

Often when I'm developing a new feature or I'm working on a new project, I'll actually spend my first pre brainstorm era, asking Claude about how it currently works, how it was implemented today, down to, like, even what the system prompt is and how it's configured, how it's architected, to really understand the use cases. Sometimes I'll even ask Claude, like, how would you design this differently? And then there's a phase where I'll go into Figma and then do the designs, and then I'll go back into code once it's ready, and I'll kind of do the final polished pieces if an engineer has built a lot of the infrastructure that needs to be there, or sometimes I'll try it myself at a first stab and see how far I can get with Cloud Code.

明白了。你应该更多是在理解代码库和编写代码阶段使用它对吧？比如开发主要功能时。

Got it. Okay. And you probably do with the understanding code base and building the code more. Right? Like, working on a, you know, major feature.

对吧？

Right?

确实如此。确实如此。我想说这第一个部分，实际上我在工作中很少做。这可能是我个人时间或个人项目里会做的事。但作为一名设计师与工程团队、产品团队合作时，我90%的时间都花在后两个应用场景上。

Definitely. Definitely. I would say this first bucket, actually all I, like, rarely do at work. It's something that I do maybe myself in my personal time and personal projects. But when it comes to working as a designer, like, with my engineering team, with a product team, I'd say 90% of my time is spent on the latter two use cases here.

太棒了。我记得你还有一张幻灯片展示了完整的流程图——就是那个探索环节的示意图。能带我们过一遍吗？

Awesome. And I think you have, like, you have, like, another slide where you have this, like, whole flow flow diagram, like explore. Yeah. That one. Can you walk us through?

好的，没问题。我认为从这里开始，我们可以更细致地感受这些环节的实际运作。我把典型的设计流程分解成了几个阶段。

Do. Yeah. Definitely. So I think, like, this is where you get a little bit more granular into what these actually feel. I kind of broke this out into what the typical kind of design process looks like.

知道双钻模型吗？就是探索发现阶段，然后是设计原型阶段，接着打磨完善。很多人以为Claude代码仅适用于开发阶段，可能集中在第四、第五步。但我觉得前三步才是Claude代码对非技术人员最具价值的地方——因为它让你能完成许多技术相关或工程邻域的任务，毕竟你可以直接接触代码库。

You know? The double diamond of, like, explore and discover, then design, prototype, then you kind of polish and you finish. And so I think the way I look at it is Claude code, a lot of people will assume it's really only for development. And so maybe in, like, step four and five here. But I think step one, two, and three are actually where Cloud Code shines for nontechnical folks just because it lets you do a lot of, I would say, like, technical adjacent tasks or, like, engineering adjacent tasks because you have access to the code base.

事实上，即便是技术很强的客户也在Claude代码里做前三步的事，只是他们没意识到——因为上手实在太容易了。这包括探索可行方案、追溯功能实现的历史原因、规划功能拆分的实施顺序。虽然我经常在Claude代码和Claude AI之间切换，但作为设计师，我们的职责就是整合各方信息（用户/工程师/产品经理的反馈）并转化为可运行的产品体验。而这个体验最终是以代码形式存在的，所以越早理解代码实现方式，设计方案就越能真实反映最终产品效果。

I actually think one, two, and three here is something that even our very technical customers do in Cloud Code that they don't even realize they're doing because it's just so easy to get started. And that's really, you know, exploring different solutions that you could understand, exploring the history of why something was implemented the way it was, and then planning and, like, sequencing, how you can break out, building different features. The reason I like to do this more in Cloud Code actually than in Cloud AI, although I'll often go back and forth And between the two is that, as a designer, our job is really to kind of take all the information, all the feedback from all different parties, including our users, including engineers, including our product managers, and translate that to a working product experience. But that working product experience is in code. So the faster you can understand how it's gonna get implemented in code, the more realistic it's gonna be of representing what the actual product experience is.

没错，代码就是终极真相来源对吧？我明白。

Yeah. Like, I I think the code is a source of truth. Right? And, like Mhmm. I know.

我有十年产品构建经验，经常发现这种情况：写完需求文档后，等Figma设计稿完成时，就没人再看我的文档了——因为Figma的可视化程度更高。而最终大家又会聚焦到实际代码上。通过这个流程，你们可以直接切入代码层，立即开始原型制作和代码探索。

I I I spent, like, ten years building products, and I've always noticed that, you know, I I I write, a spec and a PRD. And then whenever the Figma is actually, you know, ready to go, like, don't people look at my spec anymore because Figma's a lot more higher profitability than the spec. And eventually they move into the actual code. With this process, can basically go into the code directly, right? You can start making prototypes, exploring the code directly.

确实如此。事实上，过去有时候，我不会直接给工程师一个Figma设计稿，而是会给他们一个我起草的PR（拉取请求），里面包含我正在尝试实现的内容描述，以及我自己未能完成的部分。因为说到底，如果你对编码不太熟悉，很多事情仍然相当困难。所以这实际上是一个很好的起点，让你能在开发流程中比通常更进一步地推进功能开发。

Exactly. Exactly. In fact, sometimes in the past, I've instead of handing off a Figma mock to an engineer, I'll hand them, like, a draft PR that I have with, like, a description of what I was trying to do and where I didn't necessarily I wasn't able to get to completion myself because, you know, at the end of the day, a lot of stuff is still quite difficult if you're not very coding knowledgeable. And so it just is really a great starting point to developing features a little bit further down the process than you typically would.

现在你已经是团队里值得信赖的成员了，对吧？但当你刚加入团队时，你是怎么让工程师们给你GitHub权限并开始做这些事的？你们进行了什么样的对话？

And now you're a trusted member of the team, right? But when you joined the team, how did you get engineers or get people to give you GitHub access and start doing this stuff? What kind of conversations do you have?

我认为在Anthropic，任何人都可以编码，而且这里协作氛围非常浓厚，感觉我们的角色界限并不重要。所以在这里其实很容易。事实上，当我说想做这件事时，团队超级兴奋。很多设计师自己也会编码。甚至在Cloud Code直接集成之前，你就能看到很多设计师自己提交PR并完成工作。

I think at Anthropic, anyone can code, and it's such a collaborative environment that I feel like our roles don't matter. So here, it was actually very easy. In fact, I'd the team was super excited when they said that I wanted to do this. A lot of the designers code even themselves. So even, you know, before we had Cloud Code directly integrated, you would see a lot of designers make PRs and kind of do it themselves.

明白了。

Okay.

在之前的公司，情况会困难些，可能有些障碍。我的方法之一就是和工程师坐下来，让他们和我结对编程一整天。因为说实话，不同代码仓库的设置差异太大了。我相信你也知道这点。我刚入行时对此不太了解。甚至如何启动预览应用、安装所有依赖项、配置本地开发环境，在新公司对我来说都非常困难。所以我觉得这有助于你与最终合作伙伴建立良好的合作关系。

At past companies, where it's a little bit harder, maybe a little bit torn down, part of my process is actually to sit down with an engineer and have them pair program with me for a day because, honestly, different repositories are set up so differently. I'm sure you know this. I was a little bit less familiar with this when I first started. Even, like, how to get a preview app running and get all the, like, dependencies installed and my local dev environment set up was really hard for me in a new company. And so I think it helps you build good partnership with your end partners.

同时也能帮助你理解那些不成文的规则，比如代码提交的潜规则、部署时间的预期、预览构建之类的事情。

And then it also helps you understand, like, the unspoken semantics of how, like, code gets pushed at your company and, like, expectations of deployment times and, like, preview builds and things like that.

再问个简单问题。你们会进行设计评审吗？比如需要向Mike汇报？还是直接展示代码？你们是怎么处理的？

Another quick question. Like, how do you do you guys do you guys have, like, design reviews or, like, you know, you have to go present to Mike or, like, do you just present a code or how guys do do that?

是的，你知道吗，这很有趣。我们确实有产品评审，也有设计评审，有时还会进行设计深入探讨或设计复查。形式多样。有时你会看到用Figma原型展示。

Yeah. You know, it's interesting. We do have product reviews, and we do have design crit, and sometimes we'll have design deep dives or design reviews. It's a mix. Sometimes you'll see Figma prototypes presented.

有时会展示完整可运行的应用程序，有时则是本地预览版本。这主要取决于当时功能的具体情况。我经常对现在共事的其他设计师说，如今很多非技术人员也能掌握编程这项技能。你应该把这视为展示作品的新方式或工作的新途径。

Sometimes you'll see fully working apps presented. Sometimes you'll see a local preview presented. It kind of depends on kind of what the feature is at the time. And I do say this a lot to kind of other designers I work with now that, this skill set of a code is available to a lot of nontechnical folks. You should just consider this as a new way you can present your work or new way you can work.

类似于早期关于设计或产品的提问——这应该是低保真还是高保真？我认为你应该将代码视为最高保真度的表现形式。因此，付出的努力和获得的反馈会因展示形式的不同而变化。

And similarly to the early questions for design or product, this be low fidelity? Should this be high fidelity? I think you should consider code the highest possible fidelity. So and the effort it takes and kind of what feedback you get will change depending on which one you show.

明白了。说到底，关键在于了解用户实际在产品中会看到和感受到什么，对吧？

Got it. Okay. Got it. I mean, ultimately, it's about, like, kinda getting a feel for what the user will actually see and feel in the product. Right?

所以，就像为所有东西都制作原型。我想核心用户体验也要做原型。嗯。

So, like, you just make prototypes for everything. Make prototypes for the core user experience, I guess. Mhmm.

嗯。我认为在某些情况下，我个人觉得使用Figma比制作原型更方便。这确实可能是我自身技术能力的局限。但对于那些在代码架构上难以实现的大改动，有时我会问Cloud，比如，这个改动有多难实现？

Mhmm. I think there are still some instances where I personally find it easier to be in Figma rather than in prototyping. This could be a limitation definitely of my own technical ability. But for bigger changes that are harder to do architecturally in code and sometimes I'll ask Cloud, like, hey. Like, how hard is this gonna be to change?

如果在Figma里花一分钟就能完成，而写代码可能要三十分钟，那用Figma是不是更合理。所以目前我们仍需权衡，根据要实现的目标选择最合适的方式。

If it takes me, like, a minute to do it in Figma and it might take thirty minutes to do it in code, does it make sense more to do it in Figma. So there's still that trade off I think we have today of where it makes most sense given what you're trying to accomplish.

是啊。Figma让我很意外。我是说，我的设计师们会取笑我，但光是让自动布局功能正常工作就很难。比如，我就是搞不明白。所以它也没那么简单。

Yeah. Figma surprised me. I mean, my designers make fun of me, but, like like, just trying to get auto layout to work is hard. Like, I I can't figure out. So it's not that easy either.

没错。

Yeah.

对，对。我得说这绝对是个高级用户工具。

Yeah. Yeah. It's definitely a power user tool, I would say.

本节目由Linear赞助播出。说实话，大多数项目管理工具都很糟糕。这就是我喜欢用Linear的原因，因为他们和我一样痴迷于工艺与品质。Linear速度极快，设计精美，并内置了对Cursor等AI代理的支持。

This episode is brought to you by Linear. Let's be honest. Most project management tools suck. That's why I love working with Linear, because they share my obsession for craft and quality. Linear is incredibly fast, beautifully designed, and comes with built in support for AI agents like Cursor.

作为产品经理，我喜爱用Linear收集客户反馈、起草产品需求文档、管理开发进度以及跨部门沟通。OpenAI、Vercel、Brex和Cash App等公司的产品团队都在用Linear以闪电速度构建复杂产品。欢迎访问linear.app/behindthecraft亲自体验。重复一遍：linear.app/behindthecraft。好了，现在回到节目。

As a PM, I love using Linear to capture customer feedback, draft PRDs, manage development, and communicate across the organization. Product teams at OpenAI, Vercel, Brex, and Cash App all use Linear to build complex products at lightning speed. See for yourself by visiting linear.appbehindthe craft. That's linear.app/ behind the craft. Okay, now back to our episode.

好吧，那我们现在是不是该用真实演示来走一遍这个流程？比如，你有没有什么演示应用可以展示给我们看？

Alright, so let's kind of like maybe walk through some of this process with like a real demo, right? Like like, do you have like a little demo app you can show us?

当然可以。我来演示一下。虽然不能分享内部项目，但我可以展示一个叫Cloud Cafe的演示应用。你可以看到这里的界面设计稿，我已经在Claude代码里打开并运行它了。

Yeah, definitely. So let me walk through. Unfortunately, I can't share anything that I do internally, but I can show a little demo app we have called Cloud Cafe. And you can kinda see the mocks right here of what it looks like. And, I already have it open and running on Claude code right now.

我现在在Claude Cafe代码仓库里，已经打开并运行了Claude。我通常做的第一件事就是让Claude帮我预览这个应用。操作很简单，就像和工程师对话一样，我会直接说：帮我本地运行这个程序。

So I'm in the repository, Claude Cafe. I have kind of Claude open and running. So the first thing I tend to do is ask Claude to help me preview this app. And so it's pretty straightforward. I just talk to Claude like I would my engineer, and I say, help me, run this locally.

这对某些工程师来说可能更容易。他们可能会说，用bash命令就行。但对我来说，我总是不清楚需要安装哪些包或运行哪些命令，所以这种方式方便多了。我们最近发布的一个功能——后台bash（其实我内部已用了几个月，对外才开放约一个月）让这成为可能。你看这里提示按control b就能后台运行。

I do think this is easier for some engineers. Like, they might say, oh, I'll just do this in bash commands. But for me, don't I always know the packages that you need to install or the commands you need to run the app, and so I find this a lot easier. One feature I really like that we, recently released that makes this very possible, that I've been using for months and has now only been available, I think, for the past month externally is background bashes. And so you can kind of see here, it says control b to run-in background.

运行开发服务器（技术人员都知道，非技术人员可能不了解）是个持续进程。按control b后，它就在后台运行了。运行过程中会实时更新状态，同时你还能继续和Claude对话。

Running a dev server, as you probably know, but maybe not all the nontechnical folks don't know, is just an ongoing process. And so if you hit control b, you can kinda see it runs in the background now. And it'll update you as it's going, but you can kind of keep chatting with Claude even as it's still running.

不错啊，这相当于同时运行两个智能体吧？

Oh, nice. Is that like basically having two agents going kind

有点类似。你看这里显示运行成功了。我们确实能运行并行智能体，但这个功能主要是用来执行后台批处理命令的。

of? A little bit, I would say. I mean, like, right here you can see that it's been successful. We do have the ability to run parallel agents. This just lets you run background batch commands.

任何需要持续运行的命令都适用。

So anything that's like an ongoing command.

明白了。那我们要不要打开本地主机看看？

Got it. Okay. You wanna should we open a local host and see

这个啊，没错。现在我们可以看到它的样子了。哦抱歉，它在另一个浏览器打开了，但我可以把它拉进来。

how this Yeah. Definitely. So we can see what it looks like now. Oh, sorry. It opened in another browser, but I can pull it in.

这就是应用程序的样子。你可以看到它正在预览模式下运行，就是这个应用。

This is what the app looks like. So you can see it's running on preview, and it's the app.

看起来很棒。是的。

It looks great. Yeah.

所以一眼望去，我就能看出，这和我设计的应用效果不太一样对吧？比如这些图片，如果你能看到的话，并没有完全对齐。页眉应该是左对齐的。这些细节处理方式我能理解，但还有些地方我想调整，以达到那种，可以说最后10%的完善度。

So right away, say, like, from my eye, I can tell, oh, this doesn't look exactly how the app I designed it. Right? Like, the images, if you can see it, aren't necessarily properly aligned. The header is supposed to be left aligned. Like, there's all these little details that, I can see how it was implemented that way, and there's just, like, things that I would wanna change to get it to that, I'd say, like, last 10% of polish.

嗯嗯。

Mhmm. Mhmm.

实际上这就是我在Cloud Code里花费最多时间的环节。我们会让应用保持运行状态，有几种不同的处理方式。在之前的视频里我提到过使用Figma MCP服务器，如果追求精细效果我有时会那么做。但Cloud其实具备视觉识别能力，所以我通常会先把这个导出为PNG到桌面，而不是直接使用MCP服务器。

And so this is actually where I spend, most of my time in Cloud Code. And so we will have the app running, and I'll there's a few different ways you can do this. So in a previous video, I've referenced using the Figma MCP server. I would say sometimes I do that if it's very polished, but Cloud actually has vision capabilities. So I'll typically start instead of using the MCP server by exporting this as a PNG to my desktop.

现在让我先把它传到桌面。好了。然后我会把这个拖拽到Claude里，并说：你能更新页眉和图片对齐方式让它更接近这个效果吗？好的。

So let me send it to my desktop for now. It's there. And then I will drag and drop that into Claude. And I'll say, can you update the header and image alignment so it looks more like this look. Okay.

是的，是的。虽然画质稍微低一些，但对我来说，Figma MCP服务器有时并不需要我一直登录或完全设置好。切换开发模式对我来说，个人更喜欢通过图片操作。另一种稍微高级点的方法——这取决于你的技术水平——我会直接进入网页检查模式。

Yep. Yep. It's like a little bit lower fidelity, but I think the Figma MCP server for me, sometimes I actually don't have to all always logged in or set up properly. And switching between dev mode for me is just my personal preference of doing it through images. The other way I tend to do this, which is a little bit more advanced ish, I would say, depending on where you fall on the spectrum of technical ability, is I'll actually go in web inspect mode.

我会查看对齐方式或类的位置，然后明确指示Claude关注这个页面特性，并据此进行更新。所以其实有很多方法可以融入这个工作流程。

I'll see kind of where the alignment or class is, and then I'll direct Claude specifically to look at this page feature, and then make the updates that way. So there's a lot of different ways you can kind of get into this workflow.

所以你是直接把代码粘贴到这里查看吗？

So, like, you actually paste the code here to take a look look?

有时候会，我喜欢查看类或渲染方式，然后让Cloud搜索那行代码并更新成我认为需要的版本。

I will sometimes, I like to actually look at the classes or the way that it's rendered, and I'll tell Cloud to search for that code line and update it to the one that I think it needs to be.

好的。因为Cloud能访问所有这些内容对吧。

Okay. Because it's like, Cloud has access to all this. Yeah.

对，没错。

Yes. Yes.

嗯，有道理。确实。

Yeah. Makes sense. Yeah.

在这种情况下，我还要说，你看到这次直接进入了编码环节。这其实不是我的典型工作流程。通常，我会先进入规划模式，因为我认为这是最佳做法。我会说，实际上，能否先提供计划概览和你的方法？同时，把这个任务分解成易于理解的步骤和改动。

I'd also say, in this case, you saw that this kind of went directly to coding. This is actually not my typical workflow. Normally, I'll do is I'll actually go into planning mode first because I think this is the best way to do it. I'll be like, actually, can you provide an overview of the plan and your approach? Also, break down this task into easy to understand steps and changes.

我有时会加上最后那条，特别是当我要做较大改动时。因为Claude的设计初衷是能像对软件工程师那样与你对话。但我不是软件工程师，所以我经常要求额外解释。

I sometimes add that last one, especially if I'm trying to make bigger changes because Claude is kind of designed to be able to speak to you like you're a software engineer. I'm not a software engineer, so I often prompt for additional explanations.

对，我也是这么做的。我总是让它制定计划或待办清单，让我先审核方案。你们有时候太积极了。

Yeah, this is what I do too. I always get it to make a plan or make a to do list and let me review the plan. It's too over eager sometimes, you guys.

确实如此。特别是开启自动接受模式时，它肯定会自行其是。我认为这对学习编程也有帮助，能让你更好地理解软件工程师进行这些改动时的架构思维，这对我非常有用。我们马上就能看到改动了。当然，Cloud的表现非常配合。

Definitely, definitely. Especially if you're in auto accept mode, it'll definitely start going on its own way. This also helps you, I think, if you're learning to code, get a better understanding of the architecture of how a software engineer would think about making these changes, which is really helpful for me. So we'll see the changes coming in. Cloud, of course, is very complementary.

你会得到一个时尚的新页眉，非常漂亮。然后我会阅读这里的计划，你可以看到它会列出要修改的文件。它正在更新标题样式，改为左对齐。

You'll have a sleek new header. It's really nice. And then if this I'll read through the plan here so you can kind of see it'll list the file where it's making the changes. It's updating the pattern heading. It's moving to its left align.

这正是我想要的效果。我特别喜欢它实际展示CSS代码的时候，因为这能帮助我今后自己操作。嗯，整体看起来不错。然后我就会选择'是'并开启自动接受编辑模式。

That's what I wanted it to be. I really like when it actually shows the CSS for me, actually, because it helps me know how to do it in the future. Yep. And, you know, this generally looks good to me, let's say. And then so I'll go yes, and auto accept edits modes.

如果你不是完全理解每行代码的改动，这个模式就是你最好的朋友。自动接受编辑模式直接应用更改，之后你可以回来看最终效果。我特别喜欢的一个有趣功能是实时观察改动过程，虽然有时会中断重新渲染，但我喜欢看元素动态调整的效果。

This is also your best friend if you're not necessarily understanding every line of code that's changing. Auto accept edit modes just let's make the changes, and then can come back and see the final product. One really fun thing that I like to do is watch the changes live. I know it's, like, sometimes breaks in between and they'll rerender, but I like to see things move around.

对。对。对。太棒了。对。

Yeah. Yeah. Yeah. That's great. Yeah.

没错。这就是为什么先搭建本地主机环境很重要，这样才能看清它在做什么。

Yeah. This that's why it's very important to get a local host set up first so you can see what it's doing.

完全同意。设计是高度视觉化的工作，把所有元素整合起来会更有帮助。

Absolutely. Absolutely. I think design is such a visual job that it's, like, much more helpful to get it all together.

顺便问下，这东西是真的吗？你们真有个云咖啡厅？

Is this thing real, by way? You guys actually have a Cloud Cafe?

不，不是。我是说我也希望有。办公室确实有咖啡厅可以点饮料，但可惜没有这种主题装饰。这只是我们团队设计师做的演示应用。

No. No. I mean, I wish. We do have cafes at the office and you can order drinks. I wish they were themed this way, but unfortunately, this is just an app that one of the designers on our team made for a demo.

明白了。我也在做很多原型设计，但AI总生成这种千篇一律的Shazy Ann风格——Tailwind CSS的紫色背景之类。你们怎么避免这种问题？

Got it. Got it. I've been trying to do, like, a lot of, like, prototyping too. And oftentimes, AI tends to make this, like, very same look, like like this Shazy Ann, Tailwind CSS look with the purple backgrounds and stuff. Like, how how do you avoid this stuff?

真的特别烦人。是不是得多用图片，或者给更精确的指令？

It's, like, so super annoying. Yeah. Is it just using images and, like, giving more precise instructions?

是的，我也这么认为。我通常避免使用Claude或任何AI模型来进行完全没有基础的全新设计，因为这样确实会得到那种千篇一律的风格。老实说，你可以问任何模型，它都会给出非常相似的样式。我推荐的技巧是：第一，我经常会引用网站上已有的部分或我喜欢的灵感来源，把它们作为图片放进去，然后说，嘿。

Yeah. I think so. I I tend to avoid using Claude or any AI models in general for, like, net new designs without any basis to start off with because I think you do get that exact same style. And you could ask honestly any model, and it would give you a very similar styling. The tips that I would recommend are, one, I'll often reference parts of the site that exist already or inspiration that I have that I like the way it looks, and I'll drop it in as an image and say, hey.

让它看起来像这样。举个例子，几周前我在给我们的Cloud AI页面添加一个新设置。我没有直接让它生成一个设置，而是说，嘿，看看现有的设置页面，特别是这个设置，然后以这种方式重新实现。这就是我想要的样子。

Make it look like this. So an example was is, like, a few weeks ago, I was adding a new setting to our Cloud AI page. And instead of just asking it to generate a setting, I was like, hey. Look at the existing setting page, specifically this setting, and reimplement it this way. That's the way I like it to look.

或者有时候在Cloud AI聊天中，我会直接插入我真的很喜欢的网站的截图，或者类似Pinterest板的素材。我会插入一些东西然后说，让它看起来和这个差不多。

Or if I'm doing it sometimes in Cloud AI chat, I'll actually drop screenshots of sites that I really like or, like, almost like a Pinterest board. So I'll insert something. I'll say, like, make it look something similar to this.

好的，有点像情绪板，它能理解该怎么做。嗯嗯，明白了。

Okay. Kinda like a moo moo board, it kinda understands what it's doing. Yeah. Yeah. Got it.

好的，我们来聊聊——我注意到你输出内容里有很多关于低风险、高风险的内容。也许你可以打开你的cloud.md文件？我觉得你这个文件做得非常棒。

Okay. And let's talk about I I noticed that you have a bunch of stuff in the output around, like, low risk, high risk, And maybe you can pull up your cloud. Md file. I think you have a really great file.

当然，我马上找出来。这就是我的cloud.md文件的样子。

Absolutely. Me find it right now. This is what my cloud. Md look file looks like.

没错，这文件太棒了。我一直在用Cloudmd直接输入内容，然后它就会分析代码库。但这个要好得多——这简直就是Megan专属的Cloudmd。是的。

Yeah, this is a great file. I've been using Cloudmd just typing in it, and then it just like analyze the code base. But I think this is way way better. This is like this is like Megan's Cloudmd. Yes.

我们可以一步步梳理你添加这些内容的原因。

We we can walk through why why you added all this stuff.

当然可以。实际上Cloudmd作为生态系统异常强大。我刚开始使用时并未完全理解，但我们做了大量更新，现在你可以拥有多层级的Cloud.Md文件。所以存在一个共享的Cloud。

Yeah, definitely. So Cloudmd is actually extraordinarily powerful as an ecosystem. I didn't fully understand it when I first started using it, but we made a lot of updates so that you could have multiple hierarchical Cloud. M d's. And so there's a and Cloud.

Cloud.Md就像是Cloud能获取的关于你代码库的共享知识库。我们整个代码库中其实有很多团队共享的cloud.md文件，这些文件都提交在代码库中。它们通常包含类似代码结构的共享内容——就是你提到的斜杠命令能获取的那种信息。随着时间推移，我们还添加了个人cloud.md文件。

M d is kind of like shared knowledge that Cloud can have access to about your repository. For our entire code base, we actually have lots of cloud dot m d files shared across the team, and these are checked into the repository. They're kind of shared with things like the structure that's typically what you get when you get slash in its that you mentioned. It, like, understands your code base. Over time, we also added a personal cloud dot m d file.

这是我的云端运行实例。它与代码库无关，实际上是为我在任何代码库中使用Cloud时的全局体验而运行的，并且关联到我个人用户。最初我就是在这里向NCM提需求的，我说：嘿。

So this is to my cloud running instance. It doesn't have to do with the code base. It actually runs for my global experience of cloud, code running in any repository, and it's attached to me as a user. This is where, initially, I had actually asked the NCM. I was like, hey.

能不能做个专门面向产品设计师的Cloud Code版本？作为工具会非常惊艳。他们回复说：你试过把它加到Cloud.Md里吗？Cloud很擅长遵循指令。

Could we make a version of Cloud Code that is directed specifically to product designers? Because it'd be really amazing as a tool to use. And they said, oh, like, have you tried adding it to your Cloud. Md? Like, Cloud is pretty good at following instructions.

我们认为这种方式能实现大部分需求。于是我配合Cloud最终生成了这个Cloud.Md文件，经过几次迭代后，形成了现在这个指导Cloud成为设计师专属Claude的方案。

We think that you might be able to get pretty far that way. And, so I worked with Cloud to actually drop this Cloud. Md. I iterated on it a bit, and this is where I've landed up as a way to direct Cloud to be a Claude for designers.

明白了。就像是声明'我是设计师，需要更详细的解释'。另外我喜欢里面的表情符号，比如那个'高风险修改'的标注。

Okay. So it's like, you know, I'm a designer. You gotta explain more stuff to me. And then I like the emojis, like, you know, there's a high risk modification.

是的。是的。是的。是的。我最近确实犯了个错，第一次因为推送代码到生产环境引发了一个事故。

Yes. Yes. Yes. Yes. I've definitely recently, I was guilty of causing an incident, my very first one, from pushing code to prod.

幸运的是问题很快被发现并解决了，这里的团队真的很棒。这种事难免发生。有人告诉我每个人都会遇到这种情况。只要你推送代码到生产环境，迟早会引发事故，不过后来我补充说明了这一点。

Fortunately, it was caught very quickly and resolved, everyone's really great here. It happens. Someone told me it happens to everyone. If you're pushing code to prod, you'll, like, cause an incident at one point, but I did add that in after.

但但你推送到生产环境的代码都是经过PR流程的吧？应该有工程师会重新审核？

But but all the stuff you push to prod is, like, in in PRs. Right? Like, some end does some engineer have to re review it?

对，大家都会全面审核，但我觉得有时候难免会有疏漏。总有些细节会被忽略。这种事确实会发生

Or Yeah. Everyone's fully reviewing it, but I think things get through a little bit sometimes. Things slip through the crack. It happens to Got

明白了。嗯，这很棒。那基本上...所以这个是在你项目的根目录下，还是全局目录？

it. Yeah, this is great. And basically so okay, so this is in your project's root directory or is this in your global

这是我的全局根目录。没错。

This is my global root directory. Yeah.

好的。那么基本上...我们来解释下Cloud.Empty的工作原理。简单来说，它每次开始新对话时都会让我们进入特定上下文？

Okay. And basically okay, let's kind explain how Cloud. Empty works. So basically, it puts us into context each time you start a new conversation?

确实如此。因此它将始终保持感知能力，并严格遵循我们为Cloud设定的提示，就像它会遵循你的Cloud.md文件一样。所以我的输出经常与Angi团队的大相径庭——我的内容更加详尽，细节也丰富得多。

Exactly. And so it will always have awareness, and it'll adhere to these quite like we prompted Cloud, so it'll adhere to your Cloud. Md files. So my outputs frequently look very different than what the Angi team would look like. They're a lot more verbose and a lot more detailed than anyone else.

我总觉得你在推出新的Outpost样式功能中发挥了重要作用。你确实在其中扮演了重要角色吗？还是说...

And I have a feeling that you played a pretty big role in shipping the new Outpost styles feature. Did you play a big role in that? Or

实际上并没有。我认为这是团队中多位成员的共同努力成果，特别是那些更偏向市场推广、营销和传播方面的同事，他们考虑如何将其进一步扩展到非技术用户群体。所以当这个功能发布时我非常兴奋，因为我觉得你依然可以配合Cloud.md使用。我个人觉得Cloud...

I did not, actually. I would say that was a combination of a bunch of folks across the team who were more on our go to market side and the marketing side and comm side thinking about, extending it even more into, like, a nontechnical audience. So I was really excited when it came out because you can still use it, I think, alongside of your Cloud. Md. I felt the Cloud.

md对我来说已经足够，我认为这正是Cloud Code的精妙之处——它具有极强的可塑性。

Md was enough for me, I think that's one of the beauty Yeah. Beautiful parts about Cloud Code. It's so permutable.

就像高度可定制一样，你可以打造属于自己的版本。

It's, like, very customizable. You can make your your verse.

没错，正是如此。不过...

Yeah. Exactly. Exactly. But

但你能回到那张流程图幻灯片吗？我想讨论一个你们实际发布功能的案例。或许你可以分享从构思阶段到产品上线的完整过程，以及你们如何与CAT团队和工程师协作的实例。

but can you, like, can you actually go back to that slide with the flow flow chart? Because I kinda wanna talk about a real example of a feature that you guys shipped. Maybe you can share an example of ideation stage all the way to launch and how you work with CAT and the engineers.

是的。有什么好例子吗？不如我们以代理为例，我觉得这是个很好的例子。好的。

Yeah. What's a good example of that? Why don't we take agents? Think that's a really good one. Okay.

Cloud Code最新发布的子代理或代理功能，这些是可编程代理，能让你——哦抱歉——并行运行Cloud代码。我认为这实际上是个非常棒的功能，因为它展示了AI工具如何为规则带来灵活性。

So Cloud Code recent release, sub agents, or agents. And what these are are programmable agents that let you oops. Sorry. Run Cloud codes in parallel. So this was actually, I think, a really great feature because it shows how, like, AI tooling in general allows for a lot of fluidities of rules.

代理这个概念最初是由工程团队的Sid提出的。他当时正在快速原型化这个想法。Kat在她的演讲中可能提到过，在Anthropic这里，所有人经常使用Cloud Code，所以我们是最忠实的产品使用者，经常使用并反馈意见。

So agents was originally conceived as an idea by an engineering team, Sid. And he was really rapidly prototyping the idea. And, I think Kat might have mentioned this in her session, but here at Anthropic, everyone uses Cloud Code very often, so we're, like, our best dog fooders. Like, we use the product all the time. We give feedback.

于是他构建了这个功能，内部发布了演示视频，然后将其推送到我们内部使用的QuadCode版本。之后我联系了他，说这个功能很酷。我开始使用后，提出了一系列设计改进建议。

And so he built the feature, he posted internally a demo of it working, and then he launched it to our internal working version of QuadCode. From there, I reached out to him. Was like, Hey, this is a really cool feature. I started using it. I was like, I have a bunch of design updates I would recommend.

我认为应该更突出这个功能，可以展示并行代理的运作方式。于是我们与团队的另一位设计师和Sid进行了快速迭代，直到功能达到令人满意的完善程度。确认效果后，又在团队中进行了更多原型测试，收集了其他使用者的反馈后才正式推出。

I think we should highlight this even more. I think there's a way we could show parallel agents. And so we did some rapid iteration cycles with myself, another designer on the team, and Sid to iterate on the feature and get it to a level of polish that we felt happy with. And then once it felt good, we prototyped it a little bit more with the team. A few other folks gave feedback who were using it, and then it was kind of ready to go.

所以我觉得很多反馈循环其实来自于我们自身的使用体验。

So I feel like a lot of the feedback cycle is actually using it ourselves.

哇。明白了。也就是说Sid可能花了一周或几天时间自己做原型，然后先发布给内部用户使用对吧？

Wow. Okay. So basically, like, Sid maybe spent a week or a couple days just, like, prototyping himself, and he just shipped it to internal users first. Right? That's

没错。差不多就是‘没错’那个意思。

Exactly. Kinda like Exactly.

没有规范文档，也没有设计稿啥的。直接发布就完事了。

There's no spec or anything or, like, design or anything. Just ship ship it.

对于那种小功能不需要。我觉得完全可以自然发展。

Not for smaller features like that. No. I think it can happen pretty organically.

懂了。然后你们来回讨论改进，最后怎么判断该发布了？比如内部同事说‘嘿，该推出这个了’的时候。

Okay. And then you guys went back and forth, then you made it better. And then when when how how do you know when it's ready to go? Like like, the internal people were like, hey. Let's let's get this out.

新功能刚上线时通常会收到团队大量反馈。队友们既是最佳反馈源也最直言不讳。初期推出原型时反馈会很多，随着问题逐步解决，反馈自然减少，功能就融入产品了。我们还会分析功能使用数据，观察在Anthropic（我们戏称‘蚂蚁们’）中的接受度。

I think, like, when we initially launch new features, we'll often get a lot of feedback from the team. You know, our teammates are our best sources of feedback and our most honest. And so you'll kinda see initially when we launch a new prototype, we'll get a lot of feedback on it as people discover it. And then over time, it'll slowly taper off because we've addressed all the bugs and features, it just becomes a natural freaking part of the product. We do also look at analytics and adoption of features to see if they're being well received with, ants, as we call them, our folks at Anthropic.

当看到使用率稳定增长而负面反馈持续减少时，就会觉得‘可以了’。虽然早期发布让我有点紧张，但让社区参与反馈确实很棒——我们能持续迭代优化。

And if we see that steadily growing and we see the negative feedback steadily going down, there's just a moment where we feel like, yeah, this is good to go. I also think we are on the side, which is always a little bit nerve wracking for me, but it's been really beautiful to see on releasing early and letting our community also give feedback because we can continue to at least update and improve things as they go.

哦，是因为你们有早期预览计划之类的吗？

Oh, because you have, like, a early preview program or something? Like

甚至连早期预览版都没有。我们只会在产品达到一个我们认为能从社区获得更好反馈的成熟度时，提前发布它，因为我们已经从内部人员那里获取了所有可能的反馈。

Not even an early preview. We'll just release it early once it feels like it's reach a point of readiness where we'll get better feedback from our community because we've gotten all the feedback we can from internal folks.

然后当你准备发布时，市场推广就只是，你知道的，可能让传播和营销团队参与进来，发布一篇帖子之类的，就这样。是的。

And then when you get ready to release it, the go to market is just, you know, maybe be getting comms and per marketing involved and putting, like, a post out there, and they just Yeah.

没错。没错。是的。通常，会是构建这个功能的工程师自己，录制一段他们功能的屏幕演示，或者他们会与我们的开发者关系团队或传播团队合作，但整个过程都非常非常快。

Exactly. Exactly. Yep. Often, it'll be the engineer who built the feature themselves, making a little screen recording of them of their feature, or they'll work with our DevRel team or a comms team, but it's all very, very fast.

那太棒了。你知道吗？因为这不是典型公司发布这些东西的方式。对吧？就像，你知道的，典型公司是那种瀑布式流程，对吧？

That's great. You know? Like, because that's not how a typical company ships this stuff. Right? Like, you know, typical company is like, you know you know, this waterfall thing, right?

就是你先写一份规格说明书，内部进行辩论，然后做设计。接着你把它交给工程师，说，这是一份完美的设计规格，去实现它。也许你们对某些非常大的功能还是会这样做，比如企业级的功能之类的。但是，是的。我是说，你们的方式要有趣得多。

Where like you write a spec, you go debate about it internally, and then you go make a design. Then you hand it over to engineers, here, here's a perfect design spec and go build it. Maybe you guys still do that for like really big features, like, you know, enterprise or some or something. But like, yeah. I mean, it's way more fun the way that you guys do it.

我也这么认为。我经常思考的一点是，团队中角色的流动性，以及你们能多么迅速地改进产品，打造出你们想要的产品。

I think so. I think so. One thing that I often reflect upon is, like, how fluid the roles have become on the team and, like, how quickly you are to able to just, like, make the product better and make the product that you wanted.

是啊。

Yeah.

就像你几周前提到的斜杠解释斜杠学习模式，那其实是个自定义命令，因为我们有自定义斜杠命令，你可以自己动手调整。团队里有人开发了这个功能，觉得对其他人也会有用，于是就开始往这个方向推进，最终演变成了我们的产品功能。我觉得值得一提的是，我们始终坚持让团队成员发挥各自专长。

Like, the slash explanatory slash, like, learn mode that you mentioned that was released a few weeks ago, that was actually a custom command because we have custom slash commands, that you can kind of work on and customize yourself that someone on the team builds. And they're like, hey. I actually think this will be useful for a lot of other folks. And so they started to work on that in that direction, and that evolved into our product feature. I think one thing to note that, I always really like that we still do is there's still experts on the team on what they do.

所以每当有新功能要上线时，工程师们经常会联系我或团队里的另一位设计师Nate，问说：'能帮忙快速过一遍吗？感觉不错但想确认是否符合我们的系统规范。'我们通常会试用后盖章确认。同理，设计师开发功能时也会有代码审查确保质量。

So if a new feature is going out, the engineers will often reach out to myself or the other designer on our team, Nate, and say, like, hey. Can you give a quick pass on this? Like, it feels good, but we just wanna make sure that it aligns with our system, and we'll stamp it. Often, we'll just try it and use it. And similarly, if the designers are building a feature, we have code review for that to make sure that it's all kind of good and working.

Kat是不是有个跟踪所有进行中功能的电子表格？还是说...

Does Kat have, like, a spreadsheet that tracks all the features in progress or Oh,

有的有的！她有个总表记录所有项目进展。我们一直在努力保持更新，确实有些大型功能会更遵循传统产品开发流程。但即便遵循传统流程，起草和贡献者的角色在我们团队里是高度流动的。

yes. Oh, yes. She has a master spreadsheet of everything that's going on. She's, we're always constantly trying to keep it up to date, and there are a lot of kind of bigger features that do follow a little bit more of a traditional product development process. But I would say, while it follows that traditional process, the role of who drafts that and who's contributing to it is extremely fluid across our team.

这才是最理想的状态——大家既保持专业领域，又能跨职能协作，只为做出最好的产品。

I mean, that's the best way, where people don't have people still have their expertise, but people can just cross across functions and just do what's best for a product.

完全同意。

Absolutely. Absolutely.

或许你们该用个斜杠摄像头什么的？比如让Kat每天早晨扫描代码库，看看有哪些新功能。

Maybe you guys should just use, like, a slash camera or something. Like, cat can run it every morning, check the code base and see what kind of new features.

我是说，我觉得这对她来说会非常棒。但我不确定效果会如何，因为我们经常会有各种随机想法四处冒出来。

I mean, I think that sounds like it'd be incredible for her. I'm not sure how well that would work because we often have, like, random ideas spinning out everywhere.

明白了。我想你还有一张关于使用Cloud Code专业技巧的幻灯片？

Got it, okay. And I think you have one more slide on some pro tips of using Cloud Code?

没错，确实有。让我也分享一下这个。那么，专业技巧。这些是我使用Cloud Code的专业建议，特别推荐给刚入门的用户。

Yes, definitely. Let me share that as well. So, pro tips. These are my pro tips for Cloud Code. I recommend these for folks who are getting started.

首先要说的是，这些技巧的前提是你对终端或命令行界面比较熟悉。如果不熟悉的话，我最大的建议是直接找团队里的工程师聊聊。没有工程师会不愿意教你使用终端或解释终端命令的——毕竟即使是用了一辈子命令行的人，也不可能掌握所有命令。另一个学习方法是直接询问Cloud AI聊天助手。

One thing I will say is that these pro tips hinge initially on the idea that you're comfortable in terminal or CLI. If you're not, my biggest recommendation there is actually to just chat with an engineer on your team. No engineer is ever not gonna be happy to explain to you how to use terminal or what terminal commands are. Even people who've used CLIs their entire life might not know every single command out there. Another way to learn how to use CLIs is to just ask Cloud AI in chat.

比如我经常在打开Cloud Code终端前先问Cloud AI，确认自己位置正确、Git分支无误之类的。有时候我甚至会让Cloud Code里的Claude代码来帮我——有点像是代码套娃。但当你熟悉后，这些是我推荐的Claude代码专属快捷键和最佳实践。之所以强调终端熟练度，是因为这些功能主要是为开发者设计的。

Like, I'm frequently asking Cloud AI how to do a thing before I open Cloud Code in terminal just to make sure I'm in the right place, I have the right Git branch, things like that. Sometimes I ask Cloud Code in Claude code to help me. Kind of a little inception. But once you get there, these are the Claude code specific key bindings and or best practices I would recommend. The reason I call it being comfortable with terminal is that a lot of these are designed for developers.

开发者对这些快捷键非常得心应手。所以你用得越多就会越熟悉。当然，如果是新手可能会有点陌生。第一个技巧：用Shift+Tab在自动接受模式和计划模式间切换。

So a developer is very comfortable and very familiar with these key bindings. So as you use terminal more, you'll be more familiar with them. Yeah. But it might be a little bit new if you're not. So the first one here, shift tab to go between auto accept mode and plan mode.

这是我最常用的模式。做任何事时我都先进入计划模式，这样可以和Cloud制定计划，理解它要做的修改。而自动接受模式让Cloud自主接受代码变更，我会等最终修改完成再审查。嗯，MCP功能可以连接MCP服务器。

This is, like, my most used mode. I think I always start in planning mode whenever I'm doing something just so I can make a plan with Cloud and understand the changes that it's making. And then auto accept mode lets Cloud kind of autonomously accept the code changes, and I'll wait till the final code changes are done before review. Mhmm. MCP lets you connect to MCP servers.

这些功能提供了访问云端更多工具的途径。Figma MCP是许多设计师常用的工具，也有不少人使用Playwright MCP来预览他们的应用程序，这同样非常实用。你可以咨询工程团队了解他们已配置了哪些MCP。

These give access to more tools that cloud can have. So the Figma MCP is one that a lot of designer use. A lot of folks also use a Playwright MCP to preview their app. That can also be really helpful. You can talk to your engineering team about which MCPs they have set up.

我认为分享这个技巧确实很有价值。用Control+v粘贴图片——我今天演示过如何使用它，主要是向Cloud展示我的工作内容。而Escape取消操作则是个重要功能。

I think it's a thing that's actually very valuable to share. Control v to paste images. I think I showed how I use that today. It's really just to show Cloud what I'm working on. Escape to cancel is a big one.

当Cloud正在执行某项任务让你感到不安，或你不确定其走向时，只需按下escape键即可立即中止进程。双击escape还能回溯历史记录——我非常喜欢这个功能。如果你对某个提示词的执行结果不满意，可以快速双击escape返回原提示，修改指令或查看之前发送给Claude的历史指令。

Just, if Cloud is doing something and it makes you nervous or you're not sure where it's going, you just stop Cloud's progress right away by hitting escape, and it'll stop it. Double escape lets you go back in history, which I also really like. So if you've sent a prompt and you didn't like where it went, you can hit double escape twice and, like, go back to that prompt and then see, and then update the instructions, or you can see past instructions that you've sent to Claude.

明白了。

Got it.

--resume或/resume命令能让你重新进入旧会话。比如当你关闭了Cloud Code会话后想继续之前任务时可以使用。而/memory则用于更新你的Cloud.md文件。

Dash dash resume or slash resume lets you, reaccess an old session. So if you, like, opened a Cloud Code session, closed it, and then you wanna get back into that task, you can use resume. And then slash memory to update your Cloud. M d file.

当你使用最后一个命令/memory时，比如我们有新技巧要分享？是的。

When you use the last one, slash memory, like, we have a new tip that you wanna share? Or, Yes.

没错。我经常在以下场景使用：当发现某个操作需要与Cloud重复执行时，我会希望它能自动完成。比如我曾短暂地添加过'启动前预览应用'或'每次变更都预览应用'的指令，但后来觉得太繁琐就去掉了。现在我持续调整这个功能来优化工作流——最近一次更新记忆时，我要求Cloud在最终确定实施方案前先检查现有组件库，以确保符合设计系统的最佳实践。

Yes. I use it a lot when I end up in this place where, I wish, I do a thing repetitively with Cloud and I want Cloud to just do it automatically. And so for a little bit, I did add preview my app before I start or preview my app for every change, but that became a little bit too hectic, so I did remove that. And I'm constantly playing around with it to optimize Cloud for my workflows. So, in my most recent memory update, I actually asked Cloud to look at the existing component library before it finalizes any implementation decisions to make sure that we're following design systems best practices.

好的，明白了。确实，很多其他工具都在尝试添加设计系统支持。

Okay. Got it. Okay. Yeah. Like, actually, lot of, some some of these other tools are, like, trying to add design system support.

那么Cloud Code是原生支持这种功能吗？就是直接访问并理解这些文件？

So so does Cloud Code just, like, support that natively? Just, like, access the files and understand the files?

我认为这正是设计系统发挥关键作用的地方，它完美衔接了设计与工程。如果设计系统团队在设计时就将组件库与编码工具或AI协作者纳入考量，相比让Cloud Code阅读文档实现功能，这种方式会容易得多。

I think this is where, like, you can like, design systems is the role that really beautifully covers design and engineering. And if the design system team actually starts to design a system and a component library in mind with a coding tool or an AI collaborator reading through it, it actually is a lot easier than for Cloud Code to be able to read through our documentation and implement features.

有道理。明白了。那我再问些忘记问Kat的零散问题——显然这些功能很大程度上取决于模型质量及其团队的研发方向。

That makes sense. Makes sense. Okay. Let me ask you some other random questions that I forgot to ask Kat. So obviously a lot of this stuff depends on the quality of the model and what the model team is doing.

你们是如何与AI研究团队协作的？

So how do you guys work with that team, like the AI researchers?

我们有几个专门的工作流来处理Cloud Code的重大功能改进，这些要么来自社区反馈，要么是我们主动规划的。研究产品团队会成立专项小组持续迭代，这是常规合作模式。第二种方式是我们正在探索如何让Claude代码更好地辅助研究人员，这是更深度的协作。

So I would say there are a few kind of dedicated work streams around Cloud Code for bigger features that we know we wanna work on or bigger improvements that we see, feedback from the community, and those have kind of dedicated pods within the research product team, and there's partnerships to continue iterating on them. That's one way. It's, like, the very standard way of just, like, we got feedback from the community or we noticed a thing, and we wanna kind of train the model to get better at this. The second way is something, that we are kind of looking into around how we can help Claude code help researchers better. That's a second way that we partner really closely.

软件开发流程非常广泛，但我们认为可以训练Claude不仅擅长生产代码，还要精通研究代码。这是我们另一个专项小组的方向。第三，Anthropic采用自下而上的创新机制，产品团队或研究团队随时可能提出新想法，立即组建临时小组进行孵化。

The software development flow is so wide and widespread, but one thing we think we can do is to train Claude to be really good, not just at production code, but also at researching. So that's another pod that we have. And then a third one is we're very bottoms up at Anthropic as a process perspective. So sometimes with the product team, sometimes with the research team, someone will have an idea of a thing that they want Claude to do. It'll spin up, they'll just start a mini pod of working together on a brand new thing.

太棒了。是的。嗯。这很有趣。嗯。

That's great. Yeah. Mhmm. That's fun. Mhmm.

明白了。好的。而且你可能已经接触过所有早期模型之类的，所以，是的。

Got it. Okay. And and you probably have access to all, like, the early models and stuff, so, Yes.

是的。是的。是的。我们一开始肯定会在内部亲自试用所有模型，如果模型表现不佳，我们会立即收到很多非常强烈的反馈，因为人们会转而使用其他模型。

Yes. Yes. Yes. We definitely try out all the models ourselves internally at first, and we get a lot of very strong feedback immediately if the model's not performing as well because people will switch.

明白了。好的。明白了。好吧，明。嗯，这真是太棒了。

Got it. Okay. Got it. Alright, Ming. Well, this is super awesome.

是的。那么你认为设计，或者说产品经理的角色会如何演变，或者说已经在演变了？我的意思是，我想每个人现在都更像是一个有自己专长的建设者，对吧？

Yeah. So how do you think the design, maybe like the PM role evolve like, you know, or is already evolving? I mean, I I guess everyone is just kinda like a builder with their own specialty or?

是的。我觉得这是个很好的问题。我认为在整个科技行业，特别是如果你的工作与编码相关，我们的职责实际上变得越来越灵活，不知道你是否能理解。以前，我经常谈到设计与产品经理之间的流动性，比如，取决于你的产品经理是否更偏向设计，或者你的设计师是否更偏向产品。

Yeah. I think that's a great question. I feel like across tech, especially specifically if you're in a coding adjacent role, we're actually becoming more and more fluid in our responsibilities, if that makes sense. Know? Historically, I used to talk a lot about the design PM fluidity, like, depending on if your product manager is a lot more design oriented or your designer is a lot more product oriented.

随着你变得越来越资深，或者在小团队中，你会看到职责真的变得很灵活。工程经理也是如此。比如，谁负责产品策略之类的事情会变得有点模糊。我认为这是因为随着时间的推移，具备更多产品思维的技能在增长，但产品经理仍然是这方面的专家和决策者。对于这些编码工具，我也看到了类似的情况，现在我们都有一定的编码技能和能力。

As you get more and more senior or even in, like, smaller teams, you'll see the responsibility, like, really kinda become fluid. You'll see that with EMs as well. Like, it'll become a little bit fluid around who does product strategy or things like that. And I think that's because the skill set of being more product minded grew over time, but the product manager was still the expert and the expertise and the decision maker in that. When it comes to these coding tools, I kind of see it very similarly, where now we all have kind of a skill set and ability to code.

因此这种责任划分更具流动性。我们可以互相借鉴规则、彼此协助并进行更多协作。但最终决策者仍应是工程师，评审者也仍应是工程师。所以，这更像是流动性的增强以及我们技能范围的扩展。

So that responsibility is a little bit more fluid. We can kind of lean into each other's rules and help each other out and collaborate a lot more. But the ultimate decision maker should still be the engineer, and the reviewer should still be the engineer. So Yeah. It's more like fluidity and then an expansion of our skill set now.

我们工具箱里只是多了一种可调用的工具——代码。

We just have another tool in our toolkit that we can reach for, which is code.

是的。我还注意到一个很好的趋势，像你这样资深的设计师选择继续担任构建者角色。因为以往你可能必须转型为管理者之类的角色，得处理管理事务。但现在越来越多专注于产品和工艺的人正受到重视。

Yeah. And I also think there's also a very good trend around more senior designers like yourself choosing to stay in kind of like a builder role. Because previously, you kind of have to become like a manager or something. Like, you gotta work on like some management stuff. But I feel like more and more now people who care about the product and the craft are more valued.

可能我有偏见，但

Maybe I'm biased, but

确实。你观察到这个现象了吗？我个人不确定是否亲眼所见，但我完全相信这种情况存在。

yeah. Have you seen that? I don't know. I can't say if I've seen that personally. I would definitely believe it, though.

比如我现在花在编写代码和Figma上的时间几乎对等。我有时会和Anthropic的同事聊到这个——在这里构建实在太有趣了，速度之快让你很难想象会有人不想当构建者。不过我们Anthropic的很多管理者也亲自参与构建，我认为管理角色同样能获得更多接触机会，因为你能更快熟悉工具。

Like, I myself probably spend an equal amount of time now in quad code as I do in Figma. And, you know, I talk about this sometimes with folks at Anthropic. It's just so fun to build here because you can build so quickly that it's hard to imagine not wanting to be a builder. A lot of our managers at Anthropic are building themselves too, though. Like, I think the manager role also has more access as well because you can't get into the tools so much quicker.

好的。假设我是个设计师，想要成为像Megan那样的AI原生设计师，或者想在Anthropic获得职位，我该如何准备？

Okay. So, like, let let's say, like, I'm a designer and, like, you know, I wanna become, like, an AI native designer, Megan, like, or, like, maybe get a job at Anthropic. Like, how how do I get ready?

是的。好吧。所以我想说，如果你对编程完全陌生，但又有兴趣入门，我的建议其实就是直接开始。直接动手用起来，因为未知的事物很难预判。你可以先从cloud.ai和artifacts入手。

Yeah. Okay. So I would say if you're, like, totally new to coding and it's something that you wanna get into, my recommendation is honestly to just start. Just start using it because it's hard to know the unknown. So you can first start with cloud.ai and artifacts.

这能让你很好地理解一个能生成代码的模型是什么样子。你可以先从这里起步。之后我建议你直接进入Cloud Code。如果能找到工程师搭档与我们协作会非常好，因为你的技术伙伴总会对你愿意编程感到兴奋——这能帮他们提速，你也能学到更多。

That will actually give you a good understanding of what it looks like to have a model that produces code. You can start. And then from there, I would recommend you go into Cloud Code directly. It's a really great partnership if you have an eng partner to actually collaborate with us on because your engineering partners will always be excited that you're you're wanting to code because it'll help them get faster. You'll learn a lot more.

我觉得这是建立合作关系和桥梁的好时机。我自己上过React和Tailwind的入门课。我做的改动大多是前端相关，这些课程让我更深入理解了这些库的工作原理和直接渲染机制。虽然不是必须的，但确实有助于理解正在实现的代码。

I think it's, like, a nice moment to build that partnership and that bridge. Yeah. Few things that I did is I did take an intro to React and an intro to Tailwind class. Most of the changes I make are front end, and it helped me get a little bit deeper in the understanding of how these libraries work and how they're rendered directly. Not a requirement, but I do think it helps to understand the code that's being implemented.

至于真正进入氛围编程和AI相关领域，我认为当前社区非常开放协作。我们正处于新技术的美好阶段，人们充满热情并乐于分享。X（推特）和GitHub都是很好的学习平台。Anthropic实际上还提供几门教授vodecode的课程。

And then to get into the actual vibe coding and the actual AI side of things, I would say the community is very open and collaborative right now. We're in that nice spot of new tech where people are just excited and sharing what they do. X is a really good place. I would say GitHub is a really good place to learn. We have a few courses actually that we offer at Anthropic that teach you how to vodecode.

这些课程非常棒，因为学习vodecode需要一些不同于普通编程的技巧，就像打开了一扇新门。

Those are really great because there is a little bit of a skill to learning how to vodcode that's even different from just coding. It's like a separate open.

对。我给大家的首要建议就是先做好计划。没错。另外还有个我不常做的小技巧——

Yeah. Probably number one tip I have for people is just to get to plan first. Yeah. Absolutely. And also like another tip I have, I don't do this a lot.

就是在完成某个功能后，让它解释是怎么实现的。这样你才能真正理解代码的实际运作原理。

It's just like after I make something, you just kind of ask it to explain how you did it, you know? Because then you can actually learn like what the code is actually doing.

嗯。嗯。绝对是的。我认为真正深入代码本身是非常非常有帮助的。它还能让你在未来做更复杂的事情，并且你能发现云端出错的时候，因为有时云端会朝着某个方向走，你需要稍微纠正一下它的路线。

Mhmm. Mhmm. Absolutely. I think it's really, really helpful to actually get into the code itself. It also lets you do more complicated things in the future, and you can detect when cloud is wrong because sometimes cloud will go in a, like, a direction that you need to course correct it a little bit.

对。对。当我开始说你完全正确时，那确实是... 对。完全正确。酷。

Yeah. Yeah. When I start saying you're absolutely right, that that's something that's Yeah. Going Exactly. Cool.

好的。那么，梅根，人们在哪里可以找到你或从你那里学到更多？

Alright. Well, Megan, where can people find you or learn more from you?

是的。你可以在X上关注我。我的用户名有点复杂，因为我的名字拼写比较复杂，是m e a g下划线Han，h a n下划线c。我经常在那里分享一些技巧和窍门，关于我是如何为非技术人员使用云端代码的，我也会分享一些即将发布的内容，以及我如何使用它们，这些方式可能不一定直接面向技术开发者。我也收到反馈说这对开发者学习很有帮助，因为他们可以看到他们的非技术同行是如何使用云端代码的。

Yeah. So you can follow me on X. My handle's a little bit complicated because my name is spelled complicated, but it's m e a g underscore Han, h a n underscore c. I will often share tips and tricks there on how I use Cloud Code for nontechnical folks, and I'll also share some of the launches that are upcoming and how I use them in a way that's maybe not necessarily geared directly towards technical developers. I also have gotten feedback that it's helpful for devs to learn there because then they can see how their nontechnical peers are using Cloud Code as well.

是的。我很喜欢你的帖子。它们非常实用。对，我我发过这个，云端代码有点像... 它确实是一个非常棒的代理。现在它主要用于编码，但它可以

Yeah. I love your posts. They're very practical. Yeah, I I posted that this thing, Cloud Code is kind of It's really just a really good agent. Can Right now, it's mostly used for coding, but it can

用于设计，用于

be used for design, for

产品相关的事情。

product stuff.

各种各样的事情。确实如此。

All kinds of stuff. Absolutely.

是啊。好吧。继续努力吧。继续钻研，我可是个高级用户。没错。

Yeah. Alright. Well, keep working on it. Keep working on I'm I'm a power user. Yeah.

好的，梅根。非常感谢。

Alright, Megan. Thanks so much.