思科DevNet设计师：HTML原型取代Figma成为AI设计交接的唯一真相源

思科DevNet的PubHub内部发布工具在2026年进行了一次时间紧迫的改版。团队没有按传统流程先做设计再做实现，而是直接让AI编码代理根据用户故事和后端API生成了端到端的界面。结果是可以用的：用户能走完主要流程，接口也连上了后端。但设计师Alejandro Marrufo和UX负责人Casey Tong在博客中写道，「能用」并不等于「做完了」——界面没有遵循思科的视觉语言，一些AI生成的组件不够直觉化，多处流程需要清理。

这引出了一个实际问题：如何利用AI加速设计修改并将其融入最终产品的流程？他们首先尝试的方案是把已有的HTML页面转回Figma，让设计师在熟悉的工具里继续精化，再通过Figma MCP连接让编码代理把变更同步回代码。想法很吸引人——设计工作留在Figma，AI负责搬运到实现层。

实践中暴露了三个问题。第一，细节在往返中丢失：Figma与代码之间的来回转换遗漏了交互、完整的页面和按钮流程以及动画——恰恰是这些部分让体验显得「做完了」。第二，更新比预期慢：通过Figma修改HTML原型比项目时间表允许的速度更慢，有些页面甚至需要先在Figma里重建并重新连入流程，才能开始任何精化。第三，真相源变得模糊：Figma文件和HTML原型并行演化，设计师和团队其他人很难判断哪个版本是当前状态。

Figma并非一无是处。它在维护素材库和处理精细的UI元素方面仍然是更好的工具。但在时间紧迫的条件下，它不是精化一个已经在代码中运行的界面最快的地方。

于是他们尝试了另一条路：让AI编码工具直接检查现有原型并修改其HTML。设计工作留在已经存在的界面里，没有重建步骤。HTML原型成了唯一的真相源。设计师可以分阶段做修改、逐轮审查、在过程中给AI反馈。设计工作不再需要先在设计工具里重建界面，而是直接针对一个运行中的实现进行，包括Figma难以承载的交互和流程。

一个实际约束很快浮现：token限制。项目进行到中途，设计师用完了token额度，从Cursor切换到Claude，再切换到Codex，等限额重置后继续。工作能扛过这些切换，是因为HTML制品——而非某一个工具——持有设计的状态。他们建议采用类似方法的团队提前规划这一点。

用这种方式，设计师每天都能编辑并交付可用的HTML页面，产出新迭代。在旧的Figma优先流程下，单个页面需要数天。速度在整个团队中产生了复利效应：更快的设计产出意味着更快的工程测试，也意味着下一轮设计迭代能更快获得反馈。

最终形成的工作流是迭代的：产品团队定义用户故事和后端API；AI编码代理据此构建端到端界面；设计师审查可用的HTML页面和流程，用AI编码工具精化原型；设计师将更新后的HTML制品连同设计系统、不同角色的端到端流程和描述变更的changelog一起交给开发者；开发者把这些交给编码代理，由代理在工作项目中应用设计变更；团队测试审查结果，通常是在线实时进行，然后重复这个过程。

HTML原型不再只是mockup，而成了交接文档本身。工程师可以用它准确复现设计，而且这个做法出乎意料地受欢迎。让这成为可能的几个要素：嵌入式设计系统（颜色、字体、组件和间距与页面放在一起，工程师可以引用规则而不必从截图中推断）；角色切换器（通过原型中的控件切换不同用户角色，工程师能清楚看到每条流程及其变体）；changelog（每轮迭代记录变更内容，工程师可以增量应用更新而不必对比整个页面）。

在同步设计和代码方面，他们最初用问题列表逐条提示编码代理修复，既慢又手动。后来要求设计师在每个新版本中附带changelog，工程师把changelog和更新后的HTML一起交给代理，代理就能自动在整个项目中应用变更。交接从一次性提示变成了基本自动的更新步骤。

他们总结的最大变化不是用AI写了更多代码，而是把设计和工程的反馈环拉近了，直到两个角色之间的界限开始模糊。审查变得更频繁，设计师有时在会议中实时编辑；工程师更早开始测试，甚至自己做一些小的设计迭代。整个团队可以把更多时间花在体验和愿景上，更少花在实现后勤上。

对于想尝试这种方法的团队，他们列出了几条实践建议：从可用构建开始，让AI代理从用户故事和API规范生成端到端界面，然后针对它做设计而非从空白画布开始；保持一个真相源，让HTML原型成为规范设计，Figma用在它最擅长的地方（素材库、精细细节），不维护每个屏幕的并行副本；把交接内置到原型中，包含设计系统、每轮迭代的changelog和查看所有角色或流程变体的方式；明确说明代理无法推断的内容，记录次要交互和边缘情况，否则编码代理会自己编造；为token限制做计划，预期在项目中途切换AI工具，因为HTML制品持有设计状态，工作可以延续；缩短审查周期，更频繁地审查，愿意在工程师在场时实时做编辑；让设计师的判断保持核心位置——AI能快速产出功能性的第一版，但它不知道你的设计语言，也不知道哪些交互感觉对。