Cisco DevNet 团队用 AI 重构 PubHub 设计交付流程：从 Figma 转向 HTML 原型

Cisco DevNet 团队在 PubHub（内部发布工具）改版中尝试了一条不同于传统 Figma 到代码的设计交付路径。由于时间紧张，团队先让 AI 根据用户故事和后端 API 直接生成端到端可运行的界面，但生成的版本虽然功能跑通，却不符合其视觉语言，部分组件不够直观，工作流也需清理。 团队首先尝试把现有 HTML 页面转回 Figma，通过 Figma MCP 连接让编码智能体读取设计上下文再改代码。实际遇到三个问题：Figma 与代码往返会丢失交互、完整页面与按钮流程及动画；改 HTML 原型经 Figma 反而更慢，部分页面还需在 Figma 中重建；Figma 文件与 HTML 原型并行演进，导致团队难以判断哪个是当前版本。Figma 仍适合维护资产库和精细的小型 UI 元素。 随后团队改用 AI 编码工具直接检查并修改现有 HTML 原型，省去重建步骤，HTML 原型成为唯一事实来源。设计师分阶段修改、逐轮评审并向 AI 反馈。过程中遇到 token 限制，设计师在 Cursor、Claude 和 Codex 之间切换，直到额度重置；由于设计状态保存在 HTML 产物而非某个工具中，工作得以延续。新流程下设计师每天可产出新迭代，而旧 Figma 优先流程单页需数天。 最终工作流为：产品团队定义用户故事和后端 API，AI 编码智能体据此构建端到端 UI，设计师在可运行 HTML 页面上评审并用 AI 工具修改，再把更新后的 HTML 产物连同设计系统、不同角色的端到端流程和变更日志交给开发，开发将其交给编码智能体应用到真实项目，团队测试评审后循环。交付物包括内嵌设计系统、角色切换器和变更日志，使工程师能按规则而非从截图推断实现。为解决版本间差异难辨的问题，团队要求每版附带变更日志，与更新后的 HTML 一起交给智能体自动应用改动。团队总结的经验包括：从可运行构建起步、保持单一事实来源、把交付物内建到原型中、明确说明智能体无法推断的次要交互与边界情况、为 token 限制做准备、缩短评审周期，并保持设计师的判断核心地位。