Reddit 设计师如何用 Figma 与 Cursor 构建贴近真实产品的原型

简要说明Brief Description

Blair Metcalf 演示了 Reddit Proto，这是一套基于 Reddit 生产环境设计系统构建的原型开发工具。讨论内容涵盖真实的登录用户数据、针对性的 Cursor 编辑、内部共享、通过自定义 MCP 映射设计系统，以及用于工程交接的功能胶囊。Blair Metcalf demonstrates Reddit Proto, a prototyping harness built around Reddit’s production design system. The discussion covers real signed-in data, targeted Cursor edits, internal sharing, design-system mapping through a custom MCP, and feature capsules for engineering handoff.

目录Table of Contents

• 布莱尔简介
  Introduction to Blair
• Reddit Proto 演示
  Reddit Proto demo
• 给 Cursor 的注释：定向编辑工作流
  Annotations to Cursor: the targeted edit workflow
• 内部部署与采用
  Internal deployment and adoption
• 领导层如何进行评审并提供反馈
  How leadership reviews and gives feedback
• 工程交接与功能概览包
  Engineering handoff and the feature capsule
• 自定义 MCP 的构建方式
  How the custom MCP was built
• 快速回顾
  Quick recap
• 闪电问答与最后感想
  Lightning round and final thoughts

布莱尔简介Introduction to Blair

现在，设计与产品之间的距离还很大。如果让每个人都能动手构建，他们就能轻松地通过氛围编程创建新功能和新产品。因此，我们打造了一个工具框架，整合了我们的设计系统、所有组件和 UX 模式，让设计师和产品经理的工作始终不偏离轨道。这样一来，你就可以提出无数想法，逐一评审，然后挑选一个；我们再把时间投入到这个想法上，并最终将其投入生产。Now, the distance between design and product is wide. If we made everyone a builder, they could vibe code new features and products easily. And so, we made a harness that uses our design system and all of our components, UX patterns, and it keeps all the designers and product managers on rails. And so, this way that you can make a million ideas, they can be reviewed, and then you can pick one, and then that's where we spend our time, and that's what goes into prod.

我没听过有人说：“好吧，去吧，让你进入生产数据并把它渲染出来。”I have not heard anybody say, "Okay, go ahead and let you off into your production data and render that."

我们之所以这么做，是因为 Reddit 有个性化数据。但如果设计师在 Figma 里把所有东西都做成样板，然后拿给管理层看，管理层看了就会说：“这跟我有什么关系？”而且你不必花 9 个月把它部署到生产环境，再看看效果如何。这样能节省很多时间，大家也都能去做其他事情。所以，如果你用真实数据做出一个这样的真实场景原型，他们就会像测试某个新功能一样，全面地测试它。why that we do this is because Reddit has personalized data. But if designers are mocking everything in Figma, and then they show that to leadership, leadership's going to look at that and be like, "This isn't relevant to me." And you don't have to take 9 months to get that into prod, see if that works. It saves so much time, and everybody can work on other things. And so, if you make one of these real-world prototypes with real data, they'll put it through the paces of like some new feature.

搜索就是一个很好的例子，能说明我是怎么用 AI 的。它还知道那个播客。它会调取真实数据，把数据发送给 LLM，由 LLM 对数据进行排序，然后你就可以测试这个设计了。Search is like a is a great example to like how I AI. And it knew the podcast. Like, it's pulling that real data, it sends it to an LLM, ranks it, and then you can test out that design.

是设计师做原型最多，还是产品经理做原型最多？也就是说，到底谁做原型最多？Are designers prototyping the most, or product managers prototyping the most? Like, who is prototyping the most?

欢迎回到《How I AI》。我是 Claire Vell，产品负责人，也是个 AI 痴迷者。我来到这里，是为了帮助你借助这些新工具打造更好的产品。今天，我邀请到了 Reddit 的首席 UX 工程师 Blair Metcalf。他将向我们介绍 Reddit Proto——他们为产品经理、设计师以及其他任何人定制的工具，让大家能把想法变成近似生产环境的原型，并与公司里的任何人分享。对于关注设计系统、原型制作，以及如何在不开放 GitHub 的情况下打造高质量产品的人来说，这期内容非常值得一看。Welcome back to How I AI. I'm Claire Vell, product leader and AI obsessive, here on a mission to help you build better with these new tools. Today, I Blair Metcalf, principal UX engineer at Reddit, and he's going to show us Reddit Proto, their custom harness for product managers, designers, and anyone else to get their ideas into a production-like prototype they can share with anybody in the company. This is an awesome one for anybody interested in design systems, prototyping, and how to make high-quality things without exposing GitHub.

那就开始吧。Let's get to it.

Reddit Proto 演示Reddit Proto demo

主持人：布莱尔，欢迎来到《How I AI》。感谢你参加节目。Host: Blair, welcome to How I AI. Thanks for joining.

谢谢。我很高兴来到这里。Thanks. I'm glad to be here.

主持人：嗯，我之所以这么兴奋地邀请你上节目，原因之一是，我觉得最优秀的团队面对“我们要如何在产品设计工程流程中使用原型设计”这个问题时，最终都会决定：你知道，我们干脆就在这里自己搭一套。我们要构建自己的原型设计框架，让它完全契合我们团队的运作方式，提供我们所需的一切。而那些这么做的团队——这并非做不到——会激发团队的某种魔力。那么，给我讲讲这是什么，以及你为什么要构建它。Host: Well, one of the reasons why I was so excited to have you on the show is I feel like the best teams, their answer to what are we how are we going to use prototyping in our product design engineering flow is eventually to decide, you know, we're just going to build our own our own rig here. We're going to build our own prototyping harness and it's going to give us exactly what we need for exactly how our team operates. And the folks that do that and it is not impossible to do, unlock some magic in the team. So, walk me through what this is and why you built it.

Blair Metcalf：我们想要创新、加快速度，并让用户尽快用上新功能。因此，我们搭建了一套基于设计系统的工具框架，整合了所有组件和 UX 模式，让设计师和产品经理都能按既定流程推进。这样一来，你就可以提出一百万个想法，让大家评审，再从中挑选一个。然后我们就把时间投入到这个想法上，并将它发布到生产环境。Blair Metcalf: We wanted to innovate, go faster, and get new features into users' hands. And so, we made a harness that uses our design system and all of our components, UX patterns, and it keeps all the designers and product managers on rails. And so, this way that you can make a million ideas, they can be reviewed, and then you can pick one, and then that's where we spend our time, and that's what goes into prod.

所以，我现在看到的是 Reddit 移动应用或移动网站的一个小型渲染图。那么，你能说说，在你们团队里，有人会怎样接手这个项目并实际设计出这样的东西吗？你觉得它有什么独特之处？我是说，它有设计系统，但除此之外呢？你们为什么要做这个？你们搭建的这个工作框架，在设计思路上有什么特别独到的地方？So, what I'm looking at right now is a little render of the mobile app or the mobile site um for for Reddit. So, tell me how how would somebody come to this inside your team and actually design something? What do you think is is unique? I mean, it has the design system, but what else, you know, why did you build this and what is super unique about how you approached the harness that you built?

布莱尔·梅特卡夫：当我们开始和设计师合作时，我们希望一开始就带你浏览整个 Git 仓库，了解文件结构。所以，我们实际上在你的桌面上开发了一个应用，让你可以直接进入一个新项目，加载样板代码并为项目命名，然后就会进入一个氛围编程环境。你可以使用任何喜欢的 IDE，它会为应用搭建好一个起点。我们觉得这个应用就像是——你知道——整个世界。随着大家添加新功能，它就像一座山，而我们会把这座山纳入其中，成为所有人的起点。Blair Metcalf: When we started working with designers, we wanted to start off you skating all of Git, what the file structure is. And so, we actually made an app on your desktop that just gets you right into a new project and you would load the boilerplate and name it and then you would end up here in a vibe coded environment. You can work in any IDE you like and it sets up like what the app's a starting point. And we think of that app is like, you know, this is the whole world and as people add new features, it's kind of like a mountain and we absorb that mountain and it's everyone's starting point.

所以，第一，如果我是设计师或产品经理，就不用去想我是不是要克隆代码仓库、是不是在某个分支上、是不是要在本地运行。你们做了一个小型定制应用，用来启动项目。皆大欢喜。嗯，你给项目命名，然后你们负责完成搭建基础脚手架这些繁重工作。So, one, if I'm a designer or product manager, I don't have to think about like am I cloning the repo, am I on a branch, am I running locally? You've created a little custom app that says to start a project. Happy happy. Um you name that project and then you all do the hard work of like a baseline scaffold.

那么，这个脚手架会让应用处于某种特定状态吗？作为设计师或产品经理，使用这个脚手架后，能获得哪些便利功能？And then does that scaffold put the app in a specific state? Like what are the kind of convenience things that you get when you land with this scaffold as a designer or product manager?

没错。对，所以我刚才只是演示了如何创建一个新项目。就是克隆 get。你不需要了解这些。That's right. Yeah, so I just showed like how you create a new project. It's cloning the get. You don't need to know any of that.

我们会回到那个界面，然后你就可以开始编写代码。一开始你得到的那些东西，就是一些功能示例。每个产品开发团队都会这么做：他们会为产品添加新功能，并进行各种探索。We'll go back to that screen and you'll just start coding. And the things that you get right out of the bat are examples of like features. And this is what every product development team does. They're going to add new features to the product and they're explorations.

下面还有一些类似导航的小工具。嗯，你可以更改导航。你也可以阻止导航，因为有些利益相关者点得太多了，而你不希望他们点击。There's other doodads under here of like navigation. Um you can change the navigation. You can prevent navigation because some stakeholders click too much and you don't want them to click.

我们有，比如说……We have like

是的，然后这样一来，所有东西都可以控制。你可以更换设备、主题，也可以切换到深色模式，还可以测试你能进入的每一种状态。比如谁是版主之类的。Reddit 的用户生态系统很复杂。Yeah, and then so everything is controllable. You can change the device, the theme and so you can switch to dark and you can test out every every um every state that you can get in. Even like who is a moderator. And so Reddit has complex user ecosystem.

然后这里最棒、最棒的小功能就是，你可以使用登录后的数据，这样就能知道你的设计是否有效。这对各种实时数据流都很有帮助。比如说，如果你想实现搜索，就可以直接在这里搜索。在开始之前，我还随便试了试，心想能不能用这些注释来添加搜索功能？And then the nice the nicest doodad here is that you can then use signed in data and so you'll know if your design works. This this helps with all kinds of real-time data feed. So, like if you wanted to do search, you can actually do search right here. And before we started this, I was just playing around and I was wondering could I add search with these annotations?

而且令人惊讶的是，我居然可以……我在这里评论说：“添加相关的输入联想、热门的近期社区等。”然后在下面，我说整体方向是使用已登录用户的 Reddit 数据，并在用户于搜索框中输入时提供真正的输入联想。And surprisingly, I was able to I commented here, "Make relevant type aheads, trending recent communities, etc." And then down here, I said overall direction using the signed-in Reddit data and real type aheads as user types in the search box.

然后我把它发给 Cursor，它当场就凭感觉把代码写出来了。这本来只是随便玩玩，我都惊呆了。它居然真的能用。And then I sent that to Cursor and it vibe coded it on the spot. And this was just playing around. I was stunned. It worked.

好吧，我只是想给正在听的人，或者可能漏听了一些内容的人，大致梳理一下。首先，你可以把功能作为配置项。基本上，就是能够在这个约束原型中开启或关闭某些功能。嗯，你还可以配置原型本身，比如关闭导航这类功能的交互性。Okay, so I just want to kind of like walk this through for folks that that are listening or maybe miss some of this. So, first of all, you have like features as configuration. Basically, like the ability to toggle on or off features inside this constraint prototype. Um you have the ability to configure the prototype itself in terms of like turning off the interactivity of features like navigation.

我喜欢这一点，因为如果它是一个功能相当完整的原型，你基本上可以用它做任何事情。I love this because if it is a fully like featured sort of prototype, you can kind of go anywhere with it.

嗯。Mhm.

嗯，不过这让产品经理或设计师能够做一些限制，比如告诉你：“这是我希望你关注的部分。”嗯，显然你可以在不同设备之间切换，但也可以在不同用户画像视图之间切换，我觉得这很有意思。还有一点我想确保大家没有忽略：看起来你们其中一项操作是先用模拟数据搭建原型，但之后也可以用自己的账号登录，在原型中渲染生产环境的数据。如果我说得不对，请纠正我。Um but this is letting a product manager designer sort of constrain and say like this is the piece that I want you to pay attention to. Um you can obviously switch between devices, but you can also switch between persona views, which I thought was very interesting. And then I want to make sure people did not miss that this. One of the things that looks like you do, and correct me if I'm wrong, is you scaffold it with mocked data, but then you can log in with your account and render production data in the prototype as well.

所以，这种策略我以前没听说过有人用，我觉得真的非常巧妙。我听说过很多关于模拟数据的内容。嗯，我们有一期很棒的节目，讲的是如何用 JSON 作为原型的数据支撑，以及更新 JSON，而不是去更新原型里那种硬编码的数据。And so, this is not a tactic that I've heard people use before, which I think is really really clever. I've heard a lot about mocked data. Um we have a great episode about using JSON as the backing for your prototypes and updating the JSON instead of updating kind of like hard-coded data in your prototype.

但我还没听任何人说过：“好吧，你尽管用生产数据把它渲染出来吧。”这样一来，你在测试新功能时就能使用灵活得多的数据。But I have not heard anybody say, "Okay, go ahead and let you off into your production data and render that," which gives you a much more flexible set of data to work with when you're testing new features.

没错。是的，这确实是个巧妙的技巧。我们团队就像一群魔术师。我们这么做的原因是，你知道，Reddit 有个性化数据。Right. Yeah, it's it's a clever trick. Our our team is like a bunch of magicians. And the reason why that we do this is because, you know, Reddit has personalized data.

但如果设计师只是在 Figma 里把所有东西都做成模型，然后拿给管理层看，管理层看了肯定会说：“什么？这跟我有什么关系？”所以，如果你用真实数据做出一个这样的现实原型，他们就会拿它来充分测试某个新功能。搜索就是一个很好的例子，因为他们会想看搜索结果。我想我已经做过了。But if designers are mocking everything in Figma and then they show that to leadership, leadership's going to look at that and be like, "What? This isn't relevant to me." So if you make one of these real-world prototypes with real data, they'll put it through the paces of like some new feature. Search is like a is a great example because they're going to want the search results. I think I already did it.

我说，比如我怎么用 AI。它知道播客，就像是在调取真实数据。它把数据发送给 LLM，让它进行排序，然后你就可以测试那个设计。I said like how I A I. And it knew podcast. Like it's pulling that real data. It sends it to an LLM, ranks it, and then you can test out that design.

这个设计我完全没花时间。嗯，不过设计师之后可以完善落地页、自动补全提示和结果页面。This design, I didn't spend any time on it. Um but a designer could then populate the landing, the type-aheads, and the results.

而且你不必花 9 个月才把它部署到生产环境，看看效果如何。这样能节省大量时间，大家也都能去做其他事情。And you don't have to take 9 months to get that into prod, see if that works. It saves so much time, and everybody can work on other things.

给 Cursor 的注释：定向编辑工作流Annotations to Cursor: the targeted edit workflow

然后要修改它的话，我只是根据你给我们展示的内容推测，你们有点像是在用一种基于提示词的方式，但最终其实只是把提示词发给 Cursor。是这样吗？And then to make modifications to it, just because I'm I'm kind of inferring based on what you've showed us, you have sort of like a prompt-based thing, but that's ultimately just kicking prompts over to Cursor. Is that right?

布莱尔·梅特卡夫：没错。是的，这个流程的启动方式很出人意料。我展示了这些注释——写好注释后，我只要说“发送到 Cursor”，它就会写入一个文件；然后我只需告诉 Cursor 应用这些注释，它就会读取代码中的位置、注释，以及启动整个流程所需的信息。有了这么明确的指示，你就可以针对任何界面、任何组合体、任何组件，给它添加真实数据，而且几乎不需要培训。Blair Metcalf: That's right. Yeah, so the way that this kicked off was I this is a surprising workflow. But once I showed these annotate Once I wrote the annotations, I just said send a cursor, and it writes a file, and then I just tell Cursor apply annotations, and it takes the location in the code, the annotation, and the overall to kick it off. And you can with that specificity, you can target any surface, any composite, any component, and add real data to it with very little training.

明白了。所以，如果我在这个原型中点击某个东西并为它添加注释，那么这个原型就已经补充了这些信息：代码大致位于哪里、这个组件大致是什么，以及用户提出了什么请求。Got it. So if I click something in this prototype and write an annotation on it, the prototype has already been enriched with This is like roughly where the code is. This is roughly what this component is. This is what the request is from the user.

所以，这就像是针对这个代码库提出的一项非常具体的编辑请求。那么，这是真正的代码库，还是仅供原型开发使用的近似版本？And so, it's like a very targeted um edit request in this repo. Is this the real repo or is this like a an approximate repo that's just for prototypes?

所以，没错，你问到的所有内容，我都可以在批注中进行处理。我可以清除这些批注，也可以说“把这个设为斜体”。这样，你就能精准定位非常具体的内容。它会使用我们设计系统中的所有令牌、组件等。So, yeah, everything that you asked, I can go into the annotations. I can clear these and I can say make this italics. And so, you can target very specific things. It'll use all of our design system tokens, components, etc.

然后这就是真正的东西了。嗯，我之前展示的那个 launchpad，会把它部署到我们的基础设施上。所以，它基本上……它使用……它使用 Kubernetes。它基本上就像一个内部版的 Vercel。And then this is the real thing. Um that launchpad that I showed earlier, it deploys it on our infra. And so, it basic It uses in It uses Kubernetes. It's basically like an internal Vercel.

嗯，这样你就不用担心部署的问题，可以分享它。你可以在内部分享，它会复制 URL。或者你也可以对外分享，然后扫描它。Um and so, then you don't have to worry about any deployment and you can share it. You can share it internally. It'll copy the URL. Or you can share it externally and you can like scan that.

经过一些安全检查后，它现在就在你的手机上了。所以，这就是一个 PWA。这些都是我已经安装的应用，你可以像在桌面端上一样点击浏览，也可以进行检查。You go through some security and then now it's on your phone. And so, then that is a PWA. And these are these are apps that I've already installed and you can click around them as if you were on desktop and you can check.

内部部署与采用Internal deployment and adoption

明白了。所以，我想问的是……我很好奇，你们在内部是怎么分享这些原型的？可以直接把链接或二维码发给别人，然后他们就能打开并体验你的原型吗？Got it. So, that's the way that you I was I was curious. So, how do you share these prototypes internally? Are you just able to give links to people or QR codes and then they can pull up and play with your prototype?

是这样运作的吗？Is that how it works?

这是我们目前正在做的一个项目，而且它很有发展前景。内部可以像在 Slack 上那样快速分享这个 URL。我们有一个仪表板，集中存放所有人的原型。目前大约有 700 个。This is a piece that we're working on right now and it's it's going into great places. Internally, you can share this URL quickly like on Slack. And we have we have a dashboard that just keeps everyone's prototypes. Right now, there's about 700.

问题在于它无法扩展。那个列表无法扩展。所以我们现在正在开发一个非常便于搜索的控制台。这样你就能找到人们的原型、他们从事的领域，嗯，还有人员和标签——如果那个功能被标记为“搜索”或“增长”之类的，嗯，你懂的。The problem with this is it doesn't scale. That list doesn't scale. And so, what we're working on now is a very searchable console. So, you can find people's prototypes, what areas they work in, um people, tags if that if that feature was like labeled, um you know, search or growth.

接下来可以进入原型类型。我们会介绍 iOS 和 Android。之后，你还可以查看自己的原型，以及你参与的团队。And then you can go into prototype types. We're going to go into iOS, Android. And then you can also go through your prototypes. And so, what teams you work on.

这样一来，大家就能快速了解谁在负责什么，也能让领导层掌握相关情况。This would be the way that everybody can just discover quickly who's working on what and like gives a visibility to leadership.

这些原型都是公开的吗？我们的原型默认是公开还是私密？我只是有点好奇。And are all of these prototypes public? Are our prototypes public by default or private by default? I'm just curious.

对。嗯，是的，所以在内部它们都是公开的。不过，就像……Right. Yeah, so internally they're all public. Um but then like

是的。我们我们需要把那个加上。我们应该添加一些内容，这样你就可以在……以及秘密研发团队下工作。Yeah. We we need to add that. We should add some so you can work under the and skunk works.

对，悄悄地，不引人注意。我不知道，我还挺喜欢一切都公开这种想法。你多少能看到大家都在折腾些什么。Yeah, under under the radar. I don't know. I kind of like this idea of like everything's public. You can kind of see what people are are messing around with.

我我很好奇，到底谁做原型最多？比如是设计师做原型最多，还是产品经理做原型最多？到底谁做原型最多？I'm I'm curious who is prototyping the most. Like are designers prototyping the most or product managers prototyping the most? Like who is prototyping the most?

是的，所以参与者既有设计师，也有产品人员。嗯，我们的 UX 和产品团队已经 100% 采用了这套做法。不过也会有一些意想不到的人脱颖而出。比如，有位视觉设计师后来成了我们最出色的原型设计师之一。Yeah, so it's a mix of designers and product. Um we have 100% adoption in UX and product. But there are like some surprising folks that show up. Like a visual designer turned out to be one of our best prototypers.

结果发现，一位动画师竟是我们最优秀的原型制作人员之一。看起来，这些人就像优秀的导演，掌握着大量背景信息，能够把所有事情都描述出来。An animator turned out to be one of our best prototypers. And what it seems like is these people are like great directors. They have huge context. They can describe all of the things.

嗯，他们愿意展现脆弱的一面，也会尝试各种事情，不太担心失败。嗯，不过确实是多种因素的结合。设计和产品团队总共有150多人，人员构成几乎堪称完美。Um they they are vulnerable and they try things without like worry of failing. Um but yeah, it's it's a mix. It's almost a perfect mix over design and product over 150 people.

我可以想象这……I can imagine how this

领导层如何审阅并提供反馈How leadership reviews and gives feedback

这改变了创意产生的方式。嗯，我还看到很多团队正在转向一种更偏原型风格的设计需求。我很好奇，这对设计评审的方式有什么影响？比如，你们怎么给反馈？大家又是怎么迭代的？changes how ideas are generated um and I and I see a lot of teams moving to this more like prototype style um requirements for designs. What I'm curious is how has this changed how designs are reviewed? Like how do you give feedback? How do people make iterations?

他们如何协作？How do they collaborate?

对。是的，这也是我们正在做的一部分。长话短说，这些内容会用于领导层评审。领导们会使用它们、逐一查看，你知道，你会实时收到反馈，也会在 Slack 上收到反馈，但我们希望再加上实时在原型上发表评论的功能。Right. Yeah, and so this is a part that we're working on also, but long story short, these go into like leadership reviews. Leadership uses them, clicks through them, and you know, you're getting feedback live. You're getting feedback in Slack, but we want to add, you know, you can comment live on the prototype.

这样你就有了这些注释。这些注释可以触发某些操作，可以是评论，也可以触发另一次构建。And so you have those annotations. Those annotations can be kicked off, they could be comments, they could kick off another build.

嗯。Mhm.

如果负责人只是想说“做这个更改”，那它可能会很快上线。嗯，不过你知道，那个控制台也有评论功能。这些都是即将推出的功能。If a leader just wants to say like make this change, it could it could be live momentarily. Um but then um you know, like that console, it also has a place for commenting. These are all things that are coming.

明白。那么你觉得这带来了哪些变化？你知道，是速度吗？是质量吗？比如说，制作水平？Got it. And so do you feel like this has What does this changed in terms of you know, is it velocity? Is it quality? Like craft?

你觉得这种影响在你们构建产品的方式上，最明显体现在哪方面？What do you Where do you feel like the impact to how you build products has been felt the most?

这是即时对齐。因此，如果你使用精心打造的系统，效率就会随之提升，因为你知道，领导层会基于真实数据达成共识，审查真实的设计系统组件；没人会抓住某个点不放、故意挑刺，也不会在某个细节上钻牛角尖，所以他们能迅速批准。这样一来，所有人都能收到信息。每个人都知道自己正朝着哪个北极星前进，而且这种对齐是即时的。It's instant alignment. And so if you use systems with high craft, all the velocity like comes because you have, you know, alignment with leadership using real data, reviewing real design system components that nobody's hanging up on like a a gotcha and they don't rat hole on a detail, and they can quickly approve it. That goes out to everyone. Nobody Everybody knows like the North Star that they're heading towards, but it's it's instant

工程交接与功能封装包Engineering handoff and the feature capsule

对齐。alignment.

主持人：然后这个会如何交接给工程团队？Host: And then how does this get handed off to engineering?

Blair Metcalf：对。是的，这就是这里的关键拼图，也就是说，你知道，能不能把这段代码部署到生产环境。嗯，我在这里简单构思了一个虚构的功能。嗯，就是把帖子保存到文件夹里。Blair Metcalf: Right. Yeah, this is the big puzzle piece here, which is that like, you know, can you take this code and send it to prod. Um so here I've I've um sketched out a fake feature. Um it's just like saving posts to folders.

那么，我们能不能选择一个组件，然后复制示例提示词，并把它带到生产环境？在这个启动台下，我们还可以新建一个项目，用来制作一个功能胶囊。具体做法是复制它在 Figma 中的位置，然后打开 Figma MCP，选择从 Figma 创建，它就会生成一个我们称之为“功能胶囊”的东西。And so, would there be a way that we could select a component and then copy the example prompt and take this into prod? So, under this um launchpad, we can also start a new project where we make a feature capsule. So, what you do is you copy the location in Figma. You go over to Figma MCP, you create from Figma, and it's going to make this thing that we call a feature capsule.

它会处理很多事情。它会使用 Figma MCP，梳理整个设计系统，并将其映射到我们已知的生产环境内容中。它还把 CI 审查反馈和工程师反馈纳入了这个 MCP。And what it does is it takes a lot of things. It uses Figma MCP, it goes through all of the design system, maps it to what we know is in prod. It has also incorporated, you know, CI review feedback and engineer feedback into this MCP.

然后现在它正在分析所有这些 Figma 画板、组件，并生成一份 PRD。所以我会说：“没错，你看到的就是这个。”我会继续，然后它就会生成这份 PRD。这些内容可能会非常长。And then now it's analyzing all of those uh Figma frames, components, and it'll spit out a PRD. And so, I'm going to say, "Yes, this is what you're looking at." I'll continue. And then it'll generate this PRD. These can get really large.

我们刚刚选择了一个特定的框架。呃，不过你可以做很多种界面。我们试过把所有东西都塞进去，但我们有点退回来了。我们……我们又回到了类似高保真 UI 的方向。所以，在这里你有生成的 PRD，它会说：“这就是用户目标。”This We just selected a specific frame. Uh but you could do many surfaces. We've tried the kitchen sink, but we kind of backed We're We're going back to just like high-fidelity UI. And so, here you've got your generated PRD, and it'll say like, "This is what the user goal is.

这就是验收标准。这里会详细说明。Figma 链接。然后，呃，完成后，我会接受并继续。然后你把这个文件保存在本地，然后……This is the acceptance criteria." It'll get into details here. Links to the Figma. And then uh once it's done, I'll accept and continue. And you you save this file locally, and

自定义 MCP 的构建方式How the custom MCP was built

然后我们会把它发给 Cursor。then we'll send that to Cursor.

你能再深入解释一下 Go 吗？有人想自己构建这个东西。这里面有很多是你自己搭建的吗？或者说，你是怎么一步步做到这一步的？这真的很有意思：从一个 Figma 链接和画板链接，一路到 PRD，再到某种 Cursor 可以执行的东西。Can you explain Go go a little deeper. Somebody wanted to build this themselves Is this a lot of this you built yourself, or like how did you get here? Cuz this is really interesting. It's going from a Figma link um and frame link all the way through PRD, and then something that your cursor can execute.

那么，就像带我们了解一下它是如何建成的吧。So, just like walk us through how it got built.

布莱尔·梅特卡夫：没错。所以，我们最初是从 Reddit 的原型设计系统开始的。Blair Metcalf: Right. So, we started with the Reddit proto design system.

嗯。Mhm.

因此，我们已经将所有颜色和字体排版都内置到设计系统中。然后我们读取了 prod，并将两者映射起来。嗯，这里列出了所有按钮尺寸。因此我们使用 Code Connect，并且知道所有内容都已连接起来。And so, we have all of the colors and typography baked into our design system. And then we read prod and we mapped the two. Um so here you have all of the button sizes. And so we use code connect and we know that those are everything is connected.

这算是那种让人眼前一亮的时刻，你会忍不住说：“我这到底是在看什么？”This is kind of the whiz-bang moment where like you're like, "What am I looking at?"

哦，对，没错。Oh, yeah, exactly.

这里展示的是我们在 RPL（Reddit 产品语言）中已知的所有 token、组件、界面和用户流程。这个 token 分别映射到了 Figma、iOS、GitHub 和原型设计 GitHub 中。这里还标出了某些平台上的 token 实际字面值可能存在差异。然后，我们会把这些内容映射到生产代码中。This right here is is every single token, component, surface, journey that we know of across RPL, Reddit product language. And so here this one token is mapped into Figma into iOS in the GitHub and into the prototyping GitHub. And here it is picked out that there may be uh difference in the actual literal values in the token on some platforms. And so what we we then take that and we map it to prod code.

我们会提交一些能通过 CI 审查的 PR，也会提交一些无法通过的 PR，并吸收工程师的所有反馈，再据此迭代。基本上，你从一张地图开始，然后不断尝试、失败、迭代，并通过反馈来完善 MCP。We submit PRs that do and don't get through CI reviews and like we take all of the engineer feedback and that iterates back. So basically you start with a map and then you try, fail, iterate and you refine the MCP through feedback.

明白了。这是你构建的 MCP 吗？Got it. And this is an MCP that you've built?

嗯。好吧，呃，团队。嗯。Mhm. Well, uh the team. Um

好的。是的，我说的是你们，你知道的，集体意义上的“你们”。那么那个 MCP 里有哪些工具？它是不是……组件在哪里？Okay. Yeah, I meant you the you know, the collective the collective you. And what are some of the tools in that MCP? Is it like where's the component?

设计令牌是什么？What's the design token?

没错。是的，所以就在这里，我们把这个 proto MCP ultra 接上了。它基本上是在找——嗯，你给它喂的是什么？然后它就会找到令牌、组件和示例，来编写那种符合生产环境要求的代码。最终生成的代码看起来就是这样。That's right. Yeah, so right here we got it hooked up this proto MCP ultra and it it's basically like looking for um what are you feeding it? And and then it's finding tokens, components, and examples to write that prod shaped code. This is what the code ends up looking like.

我不能展示代码，但就像……I can't show the code but like

课程。course.

这就是事实胜于雄辩，比如它会遍历所有获取评论的内容。just proof in the pudding like it goes through all the get reviews.

是的。Yeah.

然后为你构建一个版本，让你可以在自己的设备上进行测试。Um and makes a build for you to test out on um on your device.

好，我想确保大家不要忽略这个流程：你们基本上构建了一个 MCP，用来将任何输入——在这个例子中，输入可能是一个 Figma 画板——转化为对正确 token、设计系统组件、代码片段等内容的识别，而且这些内容都以生产环境为依据。这样一来，你们生成原型风格的代码时，就能在合理范围内尽可能贴近生产环境，因为它是通过这个 MCP 进行类似遍历的过程得出的。Okay, so I want to make sure that people don't don't miss this process, which is you all have built an MCP basically to translate any input and in this instance that input might be like a Figma frame into discovering the correct tokens, design system components, code snippets, whatever based in production. So that when you're generating prototype style code, it is as close to production as you can reasonably get because it's done this traversal kind of like through this MCP.

对，没错。是的。所以在这个例子中，我们是从 Figma 走向生产环境。我们已经尝试过从原型走向生产环境。Yeah, that's right. Yeah. And so in this example, we're going from Figma to prod. We have tried out going from prototypes to prod.

但我们认为，这是一种非常、非常准确地实现高保真 Figma 设计和高保真架构的方式。呃，不过，是的，它是通过一张地图来实现的。But we think that this is like a very like accurate way of getting like high-fidelity Figma, high-fidelity architecture. Uh but yeah, it's doing that through a map.

你知道我可是个 PRD 女孩。你觉得 PRD 能起到作用吗？You know I'm a PRD girl. Do you feel like the PRD makes a difference?

是的，它实际上分量很重。所以我们开始讨论时，之所以加上这一点，是因为那就是交接。Yeah, it's it actually carries a lot of weight. And so when we started talking, the reason why we added this is because that was the handoff

嗯。Mhm.

与工程团队协作。然后你就能清楚地定义范围、所有用户目标以及工作流程。是的，这就是完美的交接，包含了所有背景信息。with engineering. And so then you clearly define your scope, all of the user goals, and you know, workflows. Yeah, it's it is it is the perfect handoff. It has all the context.

我的意思是，各位，你们亲耳听到了。PRD 是完美的交接文档。继续做下去吧。I mean, you heard it here, folks. The PRD is the perfect handoff. Keep making them.

快速回顾Quick recap

嗯，我真的、真的很喜欢这个。我觉得大家应该从中得到的启示，不只是你能不能搭建自己的原型系统，能不能让它贴合团队喜欢的工作方式。嗯，你还可以把氛围编程和原型设计中的一些复杂性隐藏起来，让技术背景没那么深的朋友也能轻松使用，同时在后台用 Heroku 之类的服务运行它。然后，构建基于设计系统的便捷方法 MCP，这个想法也非常巧妙，因为很多时候，你只是让这些 LLM 在代码里漫无目的地摸索，去找它们觉得能找到的东西。Um I really I really love this. I mean, I think what folks should take away from this is not just can you build your own prototyping system and can you make it form fit to how your team likes to build things. Um you can hide away some of the complexity of vibe coding and prototyping from your less technical friends um while still running it in something like Heroku in the background. And then uh the idea of building sort of convenience method um design system-based MCPs is a really clever one because a lot of times you're just leaving these LLMs to kind of flail about in the code and find what they think they can find.

是啊，正是如此。就像，你知道，人们会说机器人会产生幻觉。它们写代码时会产生幻觉。而我们的看法一直是，嗯，你的目标是什么？Yeah, that's exactly it. Like, you know, um folks say that bots hallucinate. They hallucinate writing code. And our opinion has always been like, well, what what's your goal?

背景是什么？然后你看看设计系统，看看最终状态的形态，再从那里开始细化。不过，呃，是的，这是这个 MCP 在使用那个功能胶囊，并问我它应该在哪里——也就是应该把代码写到哪里。What's the context? And you look at the design system, you look at the end state shape, and then we refine from there. But uh yeah, this is this is the um this is the MCP using that feature capsule and asking me where it should which where it should write the code.

嗯。太神奇了。而且它基本上可以在应用里、原型里，或者你想要的任何地方编写代码。Mhm. Amazing. And it could write that code basically in in the app or in a prototype or whatever you might want.

它现在是在一个同级仓库里编写，呃，这样能保持生产环境干净。然后它会不断迭代，再发起一个草稿 PR。之后嘛，这个 PR 会经过审核，最后不一定会合并。It's right now it's writing it in a sibling repo uh to keep uh prod clean. And then it'll iterate and then it'll send off a draft PR. And then yeah, and then that'll get reviewed and may or may not go through.

也可能不是。然后你能不能回到 Rosetta Stone？我不想让大家错过你做的这个很棒的东西：你用很直观的方式展示了我们的设计系统正在发生什么。May or may not. And then can you go back to the Rosetta Stone because I don't want people to miss this amazing thing that you had, which is you have this like nice visualization of what's going on in our design system.

没错。Right.

主持人：你们为什么决定开发这个？Host: Why did you all decide to build this?

布莱尔·梅特卡夫：嗯，理论是，我们如何把设计系统放进一个测试框架里，然后再把这个测试框架接入 MCP。我们已经尝试过好几次，最主要的问题是，嗯，我不知道里面有什么。所以我就想，这是一种视觉验证。如果我能找出来并确认，知道头像有哪些颜色、会用在哪些界面上，以及它是这些工作流程的一部分，我就能通过视觉来验证：啊，嗯，我知道这个测试框架，也就是 MCP，已经包含了所有组成部分。Blair Metcalf: Well, so the theory was how do we get the design system into a harness and then the harness goes into an MCP. And we had made several attempts and the number one thing was, well, I don't know if what's in there. And so I was like, well, this is a visual verification. And if I can hunt down and see that I know that a avatar has these colors and is used in these surfaces and is a is a part of these workflows, I can visually verify ah, well, I know that the harness and therefore the MCP has all of the parts.

所以，这就有点像……你的大脑是这么运作的吗？因为你会说：“哦，我能轻易地在脑海里想象出来。”我就想：“老兄，你能想象出什么啊？我这儿看到的就只有一团团模糊的光晕。”所以告诉我，布莱尔的脑子里就是这样的吗？So, it's just like kind of and is this how your brain works because you're like, oh, I can easily visualize. I'm like, you can visualize what, man? It's like a bunch of fuzzy auras over here. So, tell me, like is this just is this what is inside Blair's brain?

这就是，嗯，是的，这就是团队脑海中的集体认知。不过你知道，我当时试着向大家解释：你们需要一个位于所有东西上游的唯一可信信息源。嗯，然后每当我把这个展示给大家看时，他们就会说：“我知道它在里面。”这相当于给团队做了一个视觉验证。This is Well, yeah, the collectively this was what it was in the team's brain. But this was like, you know, I was trying to explain this to people like, you need a single source of truth that's upstream from everything. Um you know, and then when I would show this, people were like, I know it's in there. It was a visual verification for the team.

是的。Yeah.

我很喜欢，真的很美。让人感到十分平静。不过，还需要配点音乐。I love it, and it's very beautiful. It's very soothing. It needs a little music, though.

你会演奏什么？What would you play?

我不知道。我不知道一些、一些、一些声音浴之类的东西。I don't know. I don't know some some some sound bath bathy kind of stuff.

哦，好了。对，来点布莱恩·伊诺的音乐。Oh, there you go. Yeah, some Brian Eno.

没错。没错。嗯，我喜欢这个。我只是……Exactly. Exactly. Um I love this. I just

快速问答与最后的想法Lightning round and final thoughts

想给大家回顾一下。好的，我们看到了 Reddit Proto，这是一个专为产品经理和设计师打造的原型设计工具，默认公开，任何人都可以打开这些原型；它大致部署在你的云环境中，可以通过配置进行一些控制，能连接 Cursor；此外，还有一套经过深思熟虑、审计并结合上下文设计的设计系统，整个工具链都可以通过自定义 MCP 访问。want to recap for everybody. Okay, so we saw Reddit proto, purpose-built prototyping tool for product managers, designers, public by default, anybody can open these, deployed sort of in your cloud, some controls via config, connection to um cursor, and then a really thoughtful, audited, and contextualized design system that's accessible to this whole harness via a custom MCP.

说得太对了。是的，那、那就是我们做的。Nailed it. Yeah, that That is what we do.

没什么大不了的。小菜一碟。嗯，这真的……我只是脑子有点转不过来了。我会继续琢磨一下自己觉得能构建出其中多少，因为我觉得这会真正改变我对一些设计系统问题的看法。No big deal. Easy peasy. Um this is really I just my head is spinning. I'm going to swirl on like how much of this I think I can build because I think it would really change how I think about some of my um design system problems.

我一边琢磨这个问题，咱们来快速问几个问题吧。嗯，你准备好了的话，第一个是：最近有哪些非工作、非原型开发的场景，是你特别喜欢用 AI 来做的？也许不是非工作场景，但比如说，有哪些非原型开发的用途是你最近特别喜欢的？As I noodle on this, let's go to some lightning round questions. Um if you're ready, one is just what are some non work, non-prototyping Maybe not non-work, but like what are some non-prototyping use cases that you're really loving AI for these days?

录这个播客之前，我在做，嗯，我在给整个团队制作扑克牌。这位就是帮助启动整个 Reddit 原型项目的人。所以我们在做一套……像是球员卡，呃，团队里所有球员的卡片，背面印着他们所有的数据。这个东西的好处是，你得负责统筹，把它做成符合品牌形象的东西，然后，嗯，是的，之后每个人手里都会有一张。Before this podcast, I was working on um I was working on making playing cards for the whole team. And so, this is like this is the person who who helped start the whole Reddit proto uh project. And so, we're making a play like a players uh all the players on the team, and then you have like all their stats on the back. And what's nice about this is like you have to like direct this and get it into like brand, and um yeah, and then everybody will have it in their hand.

我知道。能制作这种高品质的创意实体商品真的很有意思。再说一遍，这些东西品质真的很高，特别可爱，而且风格一致。你是用什么生成这些的？I know. It's so fun to be able to make like creative physical goods that are high quality. I mean, again, and these are like very high quality, super cute, and consistent. What did you use to generate these?

比如，具体是怎么做的？过程是什么？Like how did What was the process?

对，我去了不少地方，嗯，不过关于我的机器人，我描述了每个人，然后基本上就是即兴发挥。这就是他们的那个，你知道，他们的人设。然后我真的把那个拿去给 Gemini 了。Gemini 本来可以做得更好，但最后是 ChatGPT 做出了完美的插画。Yeah, so I bounced around a bunch of places, um, but with my bots, I described everyone and I kind of just like ad-libbed. This is their like, you know, this is their persona. And then I actually took that I took that to Gemini. Gemini could have per performed better, but like, uh, ChatGPT ended up making the illustration that was perfect.

我把它放进 Cursor 里，用一个高阶模型生成。然后用一个类似 Markdown 文件的东西来存放提示词，让它们都保持相同的美学风格。是的，这套流程还挺复杂的。I took that into Cursor and generated on a high model. And then that used like a a markdown file to use the prompt that kept them all in the same aesthetic. Yeah, it was quite a workflow.

哦，我太喜欢了。简直超级超级天才。我的意思是，这一集最后最后藏着一个“我如何使用 AI”的内容。好，我问每个人的最后一个问题是这个。Oh, I love it. Super super genius. I mean, a hidden how I AI at the very very end of this episode. Okay, my last question I ask everybody this.

当你的 MCP 没有回应、Claude 不肯配合时——你知道，不管用的是谁。当 AI 不听指令时，你会采用什么提示策略？你如何让它回到正轨？When your MCP is not replying, when Claude is being obstinate, well, you know, whoever it is. When AI is not listening, what is your prompting strategy? How do you get it back on track?

布莱尔·梅特卡夫：所以，我不会冲他们大喊大叫。我知道有些人会这么做，呃，但我的做法是先缓一天，然后把要求说得更含糊一些。我们都有一些带有项目和上下文的机器人，我会从一个项目里跳出来，然后把事情描述得更宽泛。对。Blair Metcalf: So, I don't yell at them. I know some folks do, uh, but what I do is I take a day and then I get more vague. And we all have like bots with like projects and context, and I pop out of a project and I describe the thing large. Yeah.

就像，呃，就像电影导演。所以，这里是所有事实，这里是所有意图。然后我再把这些带回项目中，它就掌握了足够的信息，可以将其应用到我们的目标上。但本质上，我成了一个更好的导演，表达得更含糊，而不是具体明确。Like, uh, like a movie director. So, here all the facts and then here is all the intents. And then and then I pull that back into the project and then it knows enough to apply it to what what our goals are. But essentially, I become a better director that is more vague, not specific.

我喜欢这个。我确实会告诉很多人，给 AI 少下点提示词。这样比提示词写得太多有效得多。呃，这个说得不错。I like that. I do tell a lot of people just like under prompt your AI. It's It's a lot more effective than than over prompting. Uh, that's that's a good one.

这个我们还没听过。好吧，Blair，这次交流真的很有意思，信息量也非常大。我觉得，对于那些想了解如何改进自己的原型开发框架、为什么要自己搭建框架的团队来说，这里有很多很棒的想法；对于想更好地运用设计系统来构建接近生产环境代码的设计师和产品经理来说，也很有启发。That's one we haven't heard yet. Well, Blair, this has been really interesting, very very dense, and I think a lot of great ideas for teams out there looking to think about how they can improve their own prototyping harness, why they might build their own, and even just designers and product out managers out there that want to get better at using design systems to build production-like code.

太棒了。是的，感谢邀请我来。我们非常期待让用户用上这些功能。Awesome. Yeah, thanks for having me. We're really excited to get these features in the users' hands.

太棒了。那我们在哪里可以找到你？又能如何为你提供帮助呢？Awesome. Well, where can we find you, and how can we be helpful to you?

布莱尔·梅特卡夫：我会在 LinkedIn 上活动，不在 LinkedIn 上的时候，我就在户外走走。如果你想去 Reddit 工作，欢迎在 LinkedIn 上联系我。如果你也有类似这样的谜题，尽管来找我，我人很友善，也很乐意帮助大家。Blair Metcalf: I'm on LinkedIn, and when I'm not on LinkedIn, I'm touching grass. If you want to work at Reddit, feel free to reach out to me on LinkedIn. If you got any puzzles like this, I'm also really friendly. I love helping folks.

主持人：太棒了。感谢你来参加《How I AI》。Host: Amazing. Well, thanks for joining How I AI.

谢谢。Thanks.

非常感谢你的收看。如果你喜欢这期节目，请在 YouTube 上点赞并订阅；更好的方式是留言告诉我们你的想法。你也可以在 Apple Podcasts、Spotify 或你常用的播客应用上收听本播客。欢迎给我们评分并撰写评论，帮助更多人找到这档节目。Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show.

你可以在 howiaiipod.com 收听我们所有的节目，并进一步了解这档播客。下次再见。You can see all our episodes and learn more about the show at howiaiipod.com. See you next time.