天工设计智能体实测 – 一句话生成可迭代网页01. 天工设计智能体实测02. 一些分享

天工设计智能体实测 – 一句话生成可迭代网页01. 天工设计智能体实测02. 一些分享

让 AI 生成一个漂亮的网页,现在已经不稀奇了。

麻烦的是能不能持续迭代。

很多 AI 页面第一眼看起来很香,但我们还想再增加一个页面时,AI 很可能突然“失忆”,又重新生成一个配色、排版完全不同的新页面。

做 demo 可以,真要拿去做官网、产品原型、客户提案,就很头痛。我们真正需要的是一份能持续修改、扩充、交给别人接手的设计资产。

最近,昆仑万维发布了天工3.1,带来了天工设计智能体,将设计置于无限画布中,我们把 PRD、品牌资料、参考网站、截图丢进去,天工设计智能体会帮你生成一套可以持续修改的网页或 App UI 项目。

话不多说,我们直接上实测。

 

01. 天工设计智能体实测

 

我们打开天工超级智能体官网,在页面左上角选择天工设计智能体。

在天工设计智能体中直接输入需求就能完成设计。

case 1:网页设计

设计一个定制旅行官网。

在输入框下方可以自定义主题色,选择生成电脑网页还是移动端页面。

天工设计智能体不会直接就开始库库写代码,而是先理解我们的真实需求,规划设计流程

第一步就是确定设计方向,色调怎样搭配,字体、字号如何设计,页面如何排布,简单来说就是将抽象的描述转成可复用的设计规范。

天工设计智能体主动把项目拆成首页、目的地、定制方案三个核心页面,并且用表格解释每个页面的内容亮点,完全是按照真实的官网项目在组织信息架构。

我们一起看看最终生成的结果:

成品的完成度比我预期高。

三个页面分别展示旅行服务、目的地信息和定制方案,各有重点,但保持了统一的导航、页脚、卡片、按钮和品牌色,全部页面的设计规范、页面结构和组件风格保持一致,很有质感。

天工设计智能体还会主动推荐追问,辅助我们持续优化:

我们直接输入优化方向,比如:

改成 Art Deco 旅行风格。

天工设计智能体能在原项目基础上继续改,保留页面结构,同时调整视觉语言。这一版本看起来高级多了。

我们还可以让天工设计智能体为所有的图片占位区自动生成符合的图片,让设计图的最终成品更美观。

每个设计图右上角有一个深度编辑按钮。

选中后,我们点击页面上的元素,都可以在画面右侧看到这个模块的文本字体、字号、颜色、元素尺寸、布局、盒模型等信息,也支持直接修改

页面上每一处还可以单独添加批注修改。比如选中标题,添加批注:

标题改为:遇见不一样的美景。

天工设计智能体会自动提取设计规范,帮我们完成修改。布局、排版、字号和原版一模一样。

每一次迭代都可以很精准,改到第 N 版也和第一版提交需求一样,不用担心 AI 中途丢失上下文

调整好之后,我们可以选择导出项目或者生成原型。

天工设计智能体支持将项目分层复制到 Figma,或者导出为 zip 等,方便我们直接嵌入项目或进行二次修改。

我们还可以选择基于画布或者整个项目直接生成原型。

点击生成原型,天工设计智能体会自动把整个项目打包放进首页的输入框,并填好提示词,我们只用点击确认。

天工设计智能体开始查看设计文件,并且创建可交互的原型。

我们一起看看最终生成的效果:

配色和网页架构都非常不错,该有的入口、导航栏都有,还自动添加了卡片动效,10 分满分可以给到 9 分。

Case 2:App 原型设计

如果我们已经有一份 PRD,可以直接上传到知识库,让天工设计智能体根据 PRD 的要求设计原型。

首先我们在知识库上传我们的 PRD:

PRD 内容:

天工设计智能体第一步依旧是确认设计方向,把 K姐简历优化器定位成移动端 AI 求职工具,并锁定专业蓝调 + 温暖科技感的视觉路线。

天工设计智能体中途发现页面计划不完整,最开始页面结构只有 1 页骨架,它主动修正为完整的 10 个移动端页面。这点真的非常贴心了,可以提前规避很多设计问题。

确认规划后,天工设计智能体会按照真实 App 流程逐页生成。

我们一起看看最终生成的效果:

天工设计智能体做出了完整的功能链路,它可以理解这是一条有顺序的求职优化流程,完全是按照使用的先后顺序来搭建页面的。

诊断报告页做得比较好。总分、四个维度评分、风险提醒都很完善:

case 3:克隆设计

我给天工设计智能体一张参考图,让它按参考风格做 K姐研究社品牌定制游网站。

参考图中的风格,帮我制作“K姐研究社”的品牌定制游网站,内容自拟。

天工设计智能体会基于我们提供的参考图,解析出一套设计规范,然后再结合我们的需求,把这些设计语言用到新网站里。

不是像素级复刻一个一模一样的网页,而是学会设计语言,灵活应用

比如,天工设计智能体会学习原版的配色方案:

克隆版

学习原版的排列、布局:

原版

克隆版

我们一起看看最终生成的页面:

和我们的参考图可以说是完全不一样,但细看配色、卡片圆角、布局,切图的方式,都透露着原版的影子。

就像人学习知识一样,关键不在于死记硬背,而在于能不能举一反三、灵活应用。

 

02. 一些分享

 

在过去,让 AI 做设计更像是抽盲盒,一张精美的单页视觉图要跑很多次。而且看起来像样,但深究页面之间的逻辑关联、用户交互路径以及功能闭环,往往是一塌糊涂。

天工设计智能体能够围绕一个明确的业务需求,先梳理出整体的设计方向,再把页面拆解、把组件和风格统一起来。在无限画布的承载下,设计成了一个可连续追问、可局部微调、可层层迭代的渐进式过程。

我们只要能清晰地把产品目标、核心痛点、功能模块和视觉风格表达出来,AI 就能快速搭建出一个可用的基础版本。我们不必拘泥于工具的操作技巧,可以专心基于初稿做判断、筛选和细节打磨。

当然面对复杂的真实业务逻辑、深度的品牌定制需求,人类设计师在审美、交互体验和商业取舍上的判断依然无可替代。

这类设计 Agent 的出现,无疑将产品设计的起点往前推了一大步。

设计 Agent 就像是一个低门槛的想法翻译器,让每个人都能更直观地用原型来表达和验证想法;也能帮设计师分担一部分基础的排版工作,让设计师有更充足的精力,去专注于更高维度的审美决策、用户体验优化和复杂的系统设计。

原文链接:国产 Claude Design + Figma?天工设计智能体有点东西

Shopping Cart
Scroll to Top