体验阿里首款Design Agent，UI前端从业者为何焦虑

作为后端背景的开发者，对UI设计的理解往往停留在“能看出好坏，但自己就是做不出来”的阶段。这种感觉其实挺拧巴的——脑子里有画面，手却跟不上。好在，AI设计工具的发展正在一点点填平这道鸿沟。

先分享一个直观的例子。下面这个产品官网页面，从构思到成型，只用了大约20分钟。效果怎么样？坦白说，已经超越了不少正式上线的产品官网。页面布局舒服，动效流畅，用户交互体验也很棒。最关键的是，做出这个页面的，是一个完全不懂UI设计的后端程序员。

[图片：展示20分钟做出来的产品官网页面]

大家肯定会好奇：这是怎么做到的？

答案是用了一个叫QoderWork的AI Native设计工作台（Design Desk）的工具。简单来说，它是一个设计Agent，专门负责把创意转化为可交互的页面。整个使用过程非常顺手，即使过程中对某些部分不满意（比如颜色、边框、间距），也能直接在画布上手动调整，所见即所得。

更关键的是，这套流程对不熟悉软件开发、但有自己想法的非技术人员也极其友好。后面会详细展开。

快速打造产品官网

开头展示的产品官网，它的诞生只需要一段提示词：

“为一家音响公司打造产品网站。使用React、Tailwind CSS和Framer Motion实现所有动画。产品本身是一件雕塑一样呈现的。声音要通过交互来可视化，而不是单调的虚头。材质和工程设计要通过滚动来展现。即使在静态状态下，网站的使用也应该流畅、滚动丝滑流畅。每个交互元素都要有微交互。网站要完全响应式。参考案例：Transparent Speaker、Bang & Olufsen、Sennos、Tecno、Awwards级别。”

第一版效果就已经很不错了。然后给QoderWork加入了图片转3D的Skill：tripo-3d-generation。用GPT-image2设计好产品图后，直接让它转成3D产品并替换到网页中。最终效果相当nice。

说实话，作为一个后端程序员，从没想过能做出这么专业的产品官网。而且只花了20分钟，基本没怎么动手，只是在关键节点做了几道选择题（决策）。

顺手对比了一下Codex，用同样的提示词，Codex生成的效果虽然也还不错，但明显不如QoderWork Design Desk。专业的事，果然还得专业Agent来做。

物理实验3D模型

最近X上生成教育相关3D模型的网站很火，便用QoderWork做了个高中物理实验3D交互网站，顺便测试一下它对非技术人员的友好度。

输入非常简单：

“帮我设计一个用于高中教学互动的3D交互实验室的科学App，重点是3D模型可以互动，演示高中物理不同磁学、原子物理部分，展示一些物理的不同原理。然后全局扩展。”

注意，这段话完全没有软件开发的术语，不需要你有开发思维，也不需要给具体实现方案。

然后它做了一件非常聪明的事：没有直接开始干活，而是先追问了几个问题，帮我深挖更具体的需求。问完之后也没有胡乱开始写代码，而是生成了一份设计计划让我确认。

这份计划包含交付的产物、技术方案、页面设计、交互设计以及风险评估。这个流程是对的——先对齐方向，再制定计划，最后执行。方向对了，一次命中率就高，不用反复重来。

最终生成的是带3D交互的完整React + Vite前端工程文件。这一点跟Claude Design不同，据我所知Claude目前只能出HTML。QoderWork则可以直接输出完整工程文件，这对项目的维护和迭代很重要。

让前端朋友打开几个文件看了一下，评价是不错，符合大部分前端工程师的编写习惯。所以QoderWork的Design Desk对于不懂开发的人来说，门槛确实很低。

当然，它拉高了所有人在UI设计和前端方面的下限，但专业的UI设计师用它的上限会更高。

整个体验中，有三个点让效率提升非常明显：

1. 画布上直接改：整个工程在无限画布上，基础的宽高、位置、拖拽、调整，不用写代码，实时生效。

2. 框选修改：以前修改页面某块内容，大多要在对话框里用文字描述“导航栏左上角那个按钮颜色改一下”，费劲巴拉地打字，关键有时候还不好描述。现在直接在画布上框选目标内容，告诉它怎么改就行。

3. 关键设计决策：做着做着发现需要换主题颜色、换字体这些全局性的东西，正常还是用对话框改，然后等结果，而且改全局的东西还容易把代码改崩。QoderWork现在把配色、间距、圆角、字号这些高频微调项直接以可调参数暴露出来，拖拽调整，实时生效，甚至不需要刷新。

这三个点解决了一个核心痛点：别让我等，别让我打字描述。开发完成后，需要的是简单、快速、精准地调整页面。

QoderWork跟之前腾讯做的Figma类云端设计工具有本质区别。腾讯的核心在于云端协作的矢量设计，而QoderWork的定位是原生的AI驱动设计即代码工具。传统“纯画图设计师”和“纯写页面面前端”的界限正在坍塌，设计文件将不再是不可触碰的黑盒，而是团队所有人都可以共同维护的视觉资产。

另外，QoderWork还内置了150多个高品质风格参考。有模板的好处是风格可控，解决了一直以来的痛点：有审美但做不出来。

极限测试：复刻天花板级网站

为了测试它的极限，找了一个动效审美都是天花板级的网站——lusion.co。这个网站的交互简直就像在看好莱坞大片，每一页翻动都伴随着极其复杂、丝滑又酷炫的3D变换。

这绝对是极限测试。目前不可能有任何AI能一次性百分百复现这个网站的前端。1月份的时候，丢给Kimi的Agent，它能复刻出大约30%。但这次QoderWork生成的，很惊艳，我觉得到50%了。

可惜的是QoderWork目前没有视觉能力，lusion.co的录屏没法给它看，所以在理解上可能有一定偏差。另外，目前QoderWork在处理特别复杂的3D场景和连续滚动动效时，偶尔会有些卡顿，生成的代码也不是每次都能一跑就通，有时候需要手动调整一下。不过这才是第一个版本，这个程度已经相当不错了。

顺带一提

QoderWork自定义工作台，除了设计工作台，还有PPT工作台、写作工作台。PPT工作台每一页演示稿是独立HTML文件，内置各种中文字体，断网也能渲染。全流程有11个阶段，每个阶段用户都能介入。生成效果试了一下，挺好的，已经赶上臧师傅开源的PPT skill了。

写作工作台的“选中即批注”功能很有意思，可以像审稿一样圈出某段文字，写下“改得更正式”、“压缩到100字以内”，AI就能围绕选中文本定向修改。

最后

这次尝试下来，“做不好看”这件事，真的被解决了一大半。UI和前端确实越来越危险了。不是危言耸听，如果你自己能做出这样的产品官网，为什么还要请专业的UI和前端？更何况，目前做出来的效果已经超越市面上很多产品官网了。

以前的前端开发流程是：产品确定原型图，UI设计师出图，前端再画图。中间有多少沟通成本、开发周期。而现在借助design agent，可能就是几句自然语言的事，就能得到可交付的工程文件。

所以，如果你对网页呈现的效果有一定追求，或者想优化团队现有的开发流程，可以去尝试一下QoderWork Design Desk这样的设计Agent。它确实是能提高审美、提高效率的生产力工具。

AI的发展太快了，焦虑是正常的。关键看你怎么对待它——采取行动，还是放任不管，都在于你自己。不过历史告诉我们，人不能一直低头拉车，还得抬头看路。