Reddit Proto 如何连接设计、实时数据与生产代码

Blair Metcalf 描述了设计与真实产品之间的距离。Reddit 建立了一套原型工具，让设计师和产品经理使用公司的设计系统、组件和用户体验模式，在工程团队决定投入某个方案之前探索创意。

Claire Vo 介绍 Reddit 首席 UX 工程师 Metcalf，并问团队为何自建环境。他说，目标是加快探索速度，让原型足够真实，使人们能够评审和比较不同想法。

桌面启动工具隐藏了大部分 Git 和项目文件结构。设计师或产品经理可以为项目命名，从脚手架开始，再在 IDE 中工作。随着新功能被纳入，团队会更新共享起点。

脚手架包含功能示例和控制项。创建者可以切换功能、在希望评审者关注特定界面时限制导航，还能切换设备、主题或用户角色，包括版主状态。

一个关键选项是数据来源：原型可以先使用模拟数据，然后呈现已登录的 Reddit 数据。Metcalf 说，对个性化产品而言，这比与评审者无关的静态模型更有意义。

演示中，Metcalf 给搜索界面添加批注，要求提供相关的输入建议并使用真实登录数据。他把批注发送给 Cursor，并说 Cursor 生成了可以在原型中测试的工作版本。

Vo 总结了这些控制项：功能开关、导航限制、设备和角色视图，以及模拟或真实数据。她指出，让评审者看到自己的数据，可以提供比固定模拟数据更广泛、更真实的输入。

Metcalf 说，评审者可以实际操作新功能，而不只是看静态图片。在搜索例子中，真实数据被发送给语言模型排序。团队可以在投入漫长的生产开发之前测试设计。

批注工作流让修改更有针对性。在原型上点击一个位置并写下请求后，系统会生成包含位置、组件和期望修改的文件，Cursor 随后可以将批注应用到对应代码。

Metcalf 演示了一处小型文字修改，并说生成过程使用 Reddit 的设计令牌和组件。目的是让探索性修改与系统保持联系，而不是让每位设计师都从头重建界面。

启动工具还通过 Kubernetes 将原型部署到内部基础设施上；Metcalf 将它比作内部版 Vercel。链接可在公司内部分享；外部或手机访问流程需要先经过安全步骤，再打开渐进式 Web 应用。

团队有一个用于发现原型的控制台。Metcalf 说目前大约有 700 个原型，简单列表已难以扩展，因此团队正在开发可搜索的控制台，按人员、产品领域、标签和原型类型组织内容。

Vo 问原型默认是否私有。Metcalf 说，目前它们在公司内部可见，团队应该增加更受限的工作方式。内部可见与向整个互联网公开是两回事。

Metcalf 说，Reddit 的 UX 和产品组织已全面采用该工具，最活跃的创建者既有设计师也有产品经理。一位视觉设计师和一位动画师展现出的原型能力让团队感到意外。

他认为，成功部分来自充分的上下文、引导创意的能力，以及不怕失败、愿意尝试。掌握生产代码写作并不是唯一有用的技能。

Vo 问工具如何改变设计评审。Metcalf 说，领导者可以点击操作原型，并现场或通过 Slack 反馈。在原型上直接评论并用评论触发新构建，仍是团队正在开发的功能。

对 Metcalf 来说，最大的影响是形成共识。评审者看到真实数据和熟悉的设计系统组件，更容易讨论预期体验并选择方向。他对速度提升的描述是定性的，并非经过测量的因果结果。

下一项挑战是向工程团队交接。Metcalf 演示了一个将帖子保存到文件夹的假设功能，并询问如何把设计转化为工程师能够在生产中使用的材料。

启动工具可以根据 Figma 画框创建团队称为 feature capsule 的功能包。它利用 Figma MCP 和设计系统映射识别对应的生产组件，同时纳入工程师和 CI 评审反馈。

流程分析选定的画框，生成包含用户目标、验收标准和 Figma 链接的产品需求文档。人工审核并接受后，文件可以发送给 Cursor，进入下一步。

Metcalf 解释了基础工作：Reddit 把设计系统中的颜色、排版和组件映射到生产代码，并使用 Code Connect 建立相关链接。这套映射将设计语言连接到不同平台的实现。

一个可视化的“罗塞塔石碑”展示 Reddit 产品语言中的令牌、组件、界面和用户流程。一个令牌可以连接到 Figma、iOS、生产代码和原型仓库；可视化还能显示各平台具体值之间的差异。

映射会在使用中不断完善。团队提交修改，观察哪些通过或未通过 CI，并纳入工程师反馈。Metcalf 将其描述为先建立一张地图，再通过迭代改进自定义 MCP。

MCP 寻找相关令牌、组件和示例，让生成的代码更接近生产环境。结果仍需经过评审，并可以生成供测试的构建；工具不会使评审或工程判断变得多余。

Vo 总结了转换过程：Figma 画框变成一个包含生产设计系统上下文的请求。Metcalf 说，演示路径是从 Figma 到接近生产的代码；团队也尝试过直接从原型转换。

需求文档很重要，因为它把范围、用户目标和工作流程带进交接。Metcalf 说，这种上下文比单独的视觉产物更能为工程团队提供清晰起点。

主持人归纳出更广泛的经验：为团队定制的原型工具可以隐藏设置复杂度，同时向模型提供具体的设计系统上下文。Metcalf 说，团队会先询问目标和预期最终状态，再逐步完善结果。

生成的代码写入相邻仓库，以保持生产仓库整洁，随后可以形成草稿拉取请求。Metcalf 强调，拉取请求仍要经过评审，可能通过，也可能不通过。

Vo 再次问到“罗塞塔石碑”可视化。Metcalf 说，团队建立它是为了验证工具和 MCP 实际包含什么：团队可以直观看到头像的令牌、界面和工作流程，而不是假设映射已经完整。

在快问快答环节，Metcalf 介绍了为团队制作插画扑克牌的项目。他使用 AI 工具构思人物和插画，再使用 Cursor 与 Markdown 提示词，让所有卡片保持一致的视觉风格。

当 AI 卡住时，Metcalf 说自己有时会暂时离开项目现有上下文，更宽泛地重新描述问题。他像导演一样描述事实和意图，然后把结果带回项目。

Vo 总结这期节目：团队展示了定制原型系统和拥有上下文的设计系统。Metcalf 邀请对类似难题或 Reddit 工作感兴趣的人联系他；双方随后结束访谈。