从设计到代码：用AI重塑交接工作流——重建PubHub第三部分
Design-to-Code: Reimagine Handoff Workflow with AI – Rebuilding PubHub Part 3
AI 摘要2026年11月2日，思科技术博客披露，旗下PubHub团队在系统重构第三阶段调整了研发流程。该团队放弃了基于Figma设计稿的传统交付模式，改为采用AI生成并由设计师调优的HTML交互原型。文中未提供量化提效数字，重点总结了该工作流的实操经验与失误教训，供外部团队参考。
解读
发生了什么
2026年11月2日，思科官方博客发布PubHub系统重构第三部分报道，聚焦设计到代码流程的改造。团队停止使用Figma静态图稿向开发交接，改由AI生成HTML原型，并由设计师在代码层完成样式打磨。报道未披露提效数据或代码规模，主要陈述了该模式的可行方案与受阻环节，以供其他团队复用。
为什么重要
传统软件开发中，设计师以Figma图纸交付、工程师按图重写界面的模式，常因状态和动态交互缺失产生理解偏差与二次开发成本。该实践的核心机制在于将界面表达的唯一标准从设计图转变为可运行的代码，使交接物本身具备交互能力。前端工程师无需再耗费大量时间还原切图，可直接利用AI编程助手将HTML原型嵌入业务框架。这种模式将促使UI设计向具备代码理解能力的工程化角色演变，同时减弱企业对传统高保真设计绘图工具的依赖。
影响谁
- 前端工程师与研发团队基础界面还原的机械性编码减少，工作重点转向接口联调与核心业务逻辑开发。
- UI与UX界面设计师交付物从静态画板转向可运行代码，设计师需增加对网页渲染原理与样式的理解。
- Figma等界面设计软件商研发交付轴心由矢量设计文件转向HTML原型，其作为产研中枢的商业订阅价值面临分流。
背景
PubHub是思科开发者生态的基础文档发布平台，近期因技术架构演进展开了底层重构。在该项目中，团队尝试利用AI辅助编程重写系统，以压缩开发周期。尽管AI在后端与脚本开发中提效显著，但设计稿向前端代码的转换环节长期存在明显的工程断层。
和中国的关系
中国企业在UI设计到前端切图环节长期背负较高人力成本，此前的设计转代码尝试多因维护性差难以落地。思科以交互代码原型替代图纸的路径，为正在推进产研降本增效的国内团队提供了更贴合工程现实的AI协作范本。
接下来关注
- 思科后续是否会披露PubHub项目改用新流程后的周期缩短或工时对比数据。
- Figma是否在其协同平台中上线原生HTML运行及双向代码同步功能。
- 主流AI编程助手是否针对HTML原型转生产代码推出专门的工作流模版。
摘要和解读由 AI 根据公开报道整理，以原文为准。