设计进入Agent时代：从设计稿到产品原型的演进与Claude应用

type

status

date

slug

summary

category

icon

password

网址

未来设计的交付物，可能就是产品原型本身。

今年 4 月，Anthropic 发布了 Claude Design。

发布当天，一条演示推文在 X 上的浏览量超过一千万，Figma 股价下跌 7%，Adobe、Wix、GoDaddy 也随之下跌。一家做大模型的公司，第一次将产品直接对准设计工具，而其带来的「成果与后果」，都足够让人意外。

除此之外，Google Stitch 在今年 3 月刚做了大版本更新，加入无限画布和语音交互，完全免费。

它们共同的特点是省去了从设计稿到代码之间的耗费人力环节，让不懂设计、甚至也不太懂代码的人，能将构想直接转化为一个可交互的页面。

这是真实的需求，国内厂商自然会快速跟进。

两个月后，刚刚官宣最近一个月收入增长 3 倍的天工，上线了自己的「天工设计智能体」，走的是同一条「想法到原型」的路线。在海外版 Skywork Design 上，依托天工团队在 Agent 方向的技术积累，并结合多种生图能力，在生成速度与视觉质量上有不俗表现。

而在国内版「天工设计智能体」中，则主要围绕中文场景与本土素材体系做了针对性适配。

🚥

「十字路口」团队用两个真实的项目上手测试了一下：

1）从零搭建一套「AI 怪谈时报」的 APP UI 原型

2）从 PRD 文档开始，复刻一个「苹果神奇麦克风」网站。

1）AI 怪谈时报 APP UI 原型

昆仑万维的「天工设计智能体」，有一个单独的入口：

国内版：

https://www.tiangong.cn/design

海外版：

https://www.skywork.ai/design

先说能力范围。它比较适合两类场景：从零开始搭一套 APP 的 UI 原型，或者从 PRD、design.md 这类文档出发，生成一整个网站的页面。先看 APP UI 原型这一块。

前两天在小红书上看到一个帖子，@stray_photon 用 Claude Design 单次直出了一套怪谈荒诞风格的页面，整体效果和视觉辨识度都还不错。我想试试能不能用天工的设计智能体做出类似的东西。

直接上传了这张报纸风格的参考图：

在设计智能体的对话框里说明需求：参考这张报纸图，提炼它的设计语言，贯穿到所有页面。做一个「AI 怪谈报纸」APP 的 UI，覆盖读者端和编辑部后台，后台用的是网页端的设计 UI。

上传图片之后，它会先分析出一套完整的设计规范。

拿这次的结果来说，它从报纸图里提取出了 Brand 主色#B12D38（深红）、背景色#F7F0E2（米黄），加上 Ink、Surface、Background Warm 等一整套色阶。字体选定了三套：Inter 做正文、Noto Serif SC 做中文标题、Roboto Mono 做等宽辅助。

这一步出来得非常快，拆解也很详细；

确定设计方向之后，它会逐轮确认视觉风格。这次定下来的是复古报纸美学，米黄底色加多栏网格排版，再结合 APP UI 原型的设计框架。

确认完成后，同时开了大约 19 个子项目：

这些子项目全部并行生成，思路跟 Pencil 和 Claude Design 类似。

19 个页面里，13 页是读者端，6 页是后台，全部并行跑完。整体产品流程从启动、今日报纸、寻人、我的详情、简报收藏、刊登故事，到归档，再到编辑部后台的审核、排期、发行，一条线走下来比较清晰。这个流程在 Agent 对话页面也同步给出了。

看几个具体页面，「刊登故事」这一块分成了八个子页面，分类覆盖寻人、寻物、讣告、出租、收购、遗失、寻找、招聘。

点进「我自己」，它是以 AI 的视角在写，开头是「最后一次见到自己，是在浏览器历史记录里」，搜索框里输的是「am i real」，部分文字行带了涂黑效果。右侧的报纸首页「分佈外時報」也做了完整排版，头条区、分类广告、寻人启事各占一块版面。整体页面完成度非常高；

后来做了一轮调整，把名称改成「AI 怪谈时报」，把每一期的内容做成卡片式布局，整体看起来更轻一些。截了几张图，页面完成度非常不错：

编辑部的网页端页面也一并生成了。后台覆盖了几个核心模块，比如订户管理页面带有完整的表格字段，包括订户编号、订阅时间、上次登录和续费状态。

版面编辑页面可以把已通过的稿件拖入具体期数的各个版块，待审稿件页面支持逐篇审核，每篇有通过、退回、涂黑三个操作按钮等等：

设计智能体里有一个比较方便的功能：生成完一套 UI 原型之后，可以直接在 Agent 对话框里，让它根据当前画布上的信息再做一套深色主题的版本。

天工本身的超级智能体里已经有不少成熟的 Agent 产品，这次的设计智能体虽然是单独拎出来的，但跟天工超级智能体是互联的。

比如点击「生成原型」：

它会自动打包当前画布上的所有信息，生成一个 ZIP 文件，直接添加到天工超级智能体的对话框里，作为项目上下文。可以让它根据这个拥有你设计稿的 ZIP 文件直接生成可交互的原型。

效果大致如下，所有代码都可以直接下载：

2）从 PRD 出发，复刻「苹果神奇麦克风」网站

在实际使用过程中有一个比较实用的点：天工超级智能体本身是一个 To C 端的产品，用户在里面做项目时会积累不少上下文。这些上下文可以存入知识库，本地的 MD 文档也可以直接发给设计智能体，比如 PRD 文档、design.md 之类的。

之前，十字路口顺应「AI 语音输出」潮流，与苹果联名了一个 Vibe Coding 工具 —— 神奇麦克风（不是……），这次我们做了一套「苹果神奇麦克风」网站的变版，提前准备了几份产品需求文档：

本地有调研报告、品牌资料、design.md 和 PRD 文档。其中 design.md 是之前让天工超级智能体调研 Apple 官网风格后生成的：

这些 MD 文档可以直接发给设计智能体，不需要额外写很多提示词。直接让它做神奇麦克风变版官网的全部页面，从首页到产品页、客服页，全部生成。因为 design.md 里已经给出了苹果的设计风格，等于让它 1:1 复刻。最终出来的还原度和苹果官网的设计，可以说是神似了：

补充一点，我只给了一张最初的参考图。其他产品面板、各部位的图片，都是它自己调用图片生成能力补出来的。从最终页面来看，它补出了「精密声学号角」的金属网罩特写、「人体工学握柄」的侧面细节图，还有一张场景图，一个人拿着麦克风面对 30 人演讲。

产品定价部分也做了两个 SKU 的对比卡片，标准版 ¥1,799 和 Pro 版 ¥2,599，下面还附了功能对比表和常见问题。整体效果如下：

像专家服务、一对一选购指导，以及下方的列表页，都是复刻出来的，跟原版的一致性很高。

页面底部的 Footer 也做了完整的四栏布局，探索、服务、关于、联系方式各占一列，客服电话、Apple Store 链接、隐私政策这些常规字段都没有漏掉：

同样可以在 Agent 对话里快速生成一套深色主题的版本，或者做一版更适配 iPad 显示的布局，也可以换成更具科技感的视觉风格重新设计当前页面。

切到深色主题之后，设计规范会跟着同步更新，右侧面板里可以看到主色从原来的白底黑字换成了深色背景加青色强调色，字体也切到了 SF Pro Display 和 SF Pro Text。

Agent 还会在对话里标注调整细节，比如「场景卡片渐变应加深至 60%，确保白色文字可读性」「页面结构与浅色版完全一致，保证全站统一体验」：

深色主题版的产品特写在深色背景下对比度更高，「精密声学号角」的金属网罩和「人体工学握柄」的拉丝质感反而比浅色版看得更清楚。

既然是设计智能体，天工也支持了对生成物的深度编辑，在画布上的UI设计稿都可以进入深度编辑模式：

支持局部的修改字体，颜色，布局等，也可以让 AI 自动随着提示词进行精确修改：

两个案例看下来，一个从零搭建，一个从一份 PRD 出发，共同点都是从一句描述到一组可交互的页面。

这恰好也是 Claude Design、Pencil、Stitch 以及国内的天工设计智能体这类产品目前能解决的问题。

设计的交付物，可能就是产品原型本身。

这一点完全可以从入局的玩家身上，看到趋势。

今年以来，Claude Design、Google Stitch、Pencil 等产品陆续出现，虽然产品形态各不相同，但都在缩短想法到产品之间的距离。

Claude Design 发布之后，市场最强烈的反应并没有停留在页面生成效果上。大量讨论迅速转向到：

设计稿在未来产品开发流程里，还会占据什么位置？

Figma 股价单日下跌约 7%，Adobe 等设计软件公司股价同步承受压力。投资者担心的是，一部分长期依赖设计软件完成的工作流，正在被重新组织。

天工很早就注意到这一变化，并一直在「工作流」方向持续投入。5 月中旬的一次产品升级后，其收入实现了三倍增长，也进一步验证了这条路径的有效性。在同一逻辑下，天工把能力延伸到「设计工作流」，推出了这次的「天工设计智能体」。

过去，一个想法需要经历需求文档、设计稿、标注、开发等多个环节，才能最终变成产品。如今，这条链路开始被重新压缩。从一句需求生成页面，从设计规范生成组件，再从页面直接生成代码，越来越多步骤开始由 Agent 接管。

Google 在 Stitch 中甚至提出了「Vibe Design」的概念。用户无需先绘制线框图，也不需要摆放按钮和组件，只需要描述自己想做什么，甚至直接说出自己的想法。AI 会自动生成页面、补全用户流程，并连接成可交互原型。

整个过程更像是在和产品对话，而不是在使用设计软件。

Pencil 也是同样的，它将设计画布直接放进 IDE，让设计文件和代码文件共存在同一个项目里。设计修改、代码修改和 Agent 执行发生在同一个环境中。

官方甚至把「No more design handoffs（不再需要设计交接）」作为核心卖点。

这些产品之所以引发关注，就是因为它们正在改变产品被创造出来的方式。

过去，团队交付的是设计稿，再由开发把设计稿翻译成产品，如今越来越多 Design Agent ，就像天工设计智能体这样，开始直接交付可运行的原型。页面、交互、设计规范和前端代码被同时生成，并作为同一个产物交到用户手中。

设计稿依然会存在，但它正在从最终交付物，逐渐变成开发过程中的中间产物。真正被交付的东西，开始变成一个已经能够运行、能够点击、能够继续迭代的产品原型。

而整件事的专业价值以及带来的信号，大致有三层。

【1】第一，做原型的成本大幅降低了，甚至在有望的未来会接近于零。【2】第二，它生成和遵循的是一套设计规范。【3】第三，也是最关键的一层是稀缺的能力变了，现在是是判断力。

用户需要知道要做什么、什么算好设计、哪些该删掉。设计师和前端的角色，从「把界面做出来」向「定义规范、判断优劣」的一侧移动，人做判断,AI 做执行。

Claude Design 发布当天，Figma 的股价反应，核心也正是这几个因素的共同作用。

当然，话要说回来。

这类产品降低的是下限，让几乎任何人都能做出一个还看得过去的原型，但它并没有抬高上限。真正能上线的产品，在视觉细节、交互深度、品牌一致性和各种边界情况上，依然需要专业技能去把关。

最后，欢迎大家去实际试用下这次新推出的天工设计智能体～

参考资料

[1]实测 PixVerse C1：https://mp.weixin.qq.com/s/cgAzZy2PptdYaWbqywVg7A

[2]实测 LibTV：https://mp.weixin.qq.com/s/aycqnq8wlaaOei1QZmhFHQ

文章来自于"十字路口Crossing"，作者 "GaKi"。