推荐语
阿里首款Design Agent让不懂UI的后端也能20分钟做出专业级官网，AI设计工具正颠覆传统设计流程。核心内容：1. Design Agent如何帮助非设计师快速产出专业页面2. 从Prompt到成品的完整操作流程演示3. AI工具对UI/前端岗位的潜在影响与思考
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
大家好，我是袋鼠帝
作为一名后端程序员，我略懂前端，但是对于UI设计是一窍不通。
还记得以前上班的时候，公司大部分UI设计都是妹子，我连Figma都没打开过。
自从AI快速发展起来以后，我虽然能做出各种功能复杂的带前端的项目，但一直以来有个问题困扰我：做不好看。
我能分辨什么样的页面是高级的、漂亮的，但我就是很难做出那种高级感、带交互动效的页面。这种感觉很难受 🤔
本来我还想去学一下UI设计和Figma的，但一直没时间。。
然后...我就又一次体会到了什么叫只要你学的慢，就可以不用学 🤣，不得不说，这句话还是有一定的道理。
当然，我不鼓励大家一直不学，毕竟学了，你至少知道这玩意儿是怎么发展的，底层逻辑是什么。
ok，先给大家看个好玩的，这是我20分钟左右快速做出来的一个产品官网页面。
效果是不是还不错？我感觉这直接比很多产品的官网都要好了吧？
整个页面的设计就很舒服，然后各种动效，用户可以交互，效果真是很棒。关键是，这是一个不会UI设计的后端程序员做出来的（正是在下）。
大家一定很好奇，这个效果，是怎么做到的？
不卖关子，是QoderWork的AI Native设计工作台（Design Desk）帮忙做的，简单来说，它是一个设计Agent。
Design Desk还真是让我挺惊艳的，我使用的整个过程非常顺手，即便过程中遇到一些问题，不管是对页面哪部分设计不满意，还是一些细节（颜色、边框、间距），都能在画布上手动快速调整。而且整个开发流程，对于不熟悉软件开发但是有自己想法想要快速折腾出效果的人非常友好（后面会详说）。
比如开头展示的产品官网，我给了它一个Prompt：
为一家音响公司打造产品网站。使用React、Tailwind CSS和Framer Motion实现所有动画。产品本身就是一件雕塑——要像雕塑一样呈现它。声音要通过交互来可视化，而不是花哨的噱头。材质和工程设计要通过滚动来展现。即使在静音状态下，网站的声音也应该悦耳动听。滚动效果要流畅，使用Lenis或locomotive-scroll等技术。每个交互元素都要有微交互。网站要完全响应式。参考案例：Transparent Speaker、Bang & Olufsen、Sonos、Teenage Engineering。网站质量要达到Awwwards级别。
第一版效果就已经很不错了：
然后我给QoderWork加入了图片转3D的Skill：tripo-3d-generation。
在使用GPT-image2设计好产品图之后，让QoderWork直接转成3D产品，并替换到网页中。
最终效果相当nice。
说实话，以前一直做的后端程序员，我从来没想到有一天我能做出看起来这么专业的产品官网（感觉已经比很多产品官网都要高级了）。毕竟我不是前端，更不是设计师。
而且仅仅只花了20分钟。关键我都没怎么动手，只是做了几道选择题（在一些关键节点做决策就行了）
然后我还对比了一下codex，我用同样的提示词给Codex，它生成的效果虽然也还不错，但也能够明显看出是不如QoderWork Design Desk的。
看来专业的事还得专业Agent来做🤔
最近X上生成教育相关的3D模型 网站非常火。
然后我就顺便用QoderWork做了个高中物理实验3D交互网站
顺便看看，对于不熟悉软件开发、但有自己想法的人，QoderWork到底友不友好。
我的输入很简单：
帮我设计一个用于高中教学互动的3D交互实验室的科学App，重点是3D模型可以互动，能根据鼠标展示不同角度，然后里面可以展示一些高中物理的电磁学、原子物理部分。
注意，这段话完全没有任何软件开发的术语。不需要你有开发思维，也不需要你给它很具体的实现方案。
然后它做了一件让我觉得蛮聪明的事，没有直接开始干活，是先追问了几个问题，帮我深挖更具体的需求。
问完之后也没有胡乱开始写代码，是生成了一份设计计划让我确认。
这份计划包含要交付的产物、技术方案确认、页面结构、交互设计以及风险评估。还挺详细的。
![]()
这个流程我觉得是对的。先对齐、再计划、最后执行。
方向对齐在前，执行在后，这样一次命中率就高很多，不用反复重来。也是让Agent生成质量更稳的关键。
最后生成的是带3D交互的完整的React + Vite前端工程文件。
这一点跟Claude Design不一样，据我所知Claude目前只能出HTML。
QoderWork则可以直出前端框架工程文件，这对于一个项目的维护和迭代来说很重要。
我让我的前端女朋友点开了几个文件看了一下，她的评价是规范性不错，确实符合大部分前端工程师的编写习惯。
所以我觉得QoderWork的design desk对于不懂开发的人来说，也很友好。
不需要你懂一些技术术语，它会帮你挖需求、出计划。门槛比我预期的低很多。
当然，它只是拉高了所有人在做UI设计、前端的下限，对于专业的UI设计来说，他们用Design Desk的上限肯定会更高。
然后，在整个体验中，有三个点是让我觉得效率提升最明显的：
1、画布上直接改：整个页面显示在无限画布上，页面的元素你可以直接手动调整，不用靠代码。基础的颜色、位置、间距、边框、字体，手动改，实时生效。
这太爽了，因为以前用Vibe Coding的产品，改个颜色都要在对话框里描述，然后等AI跑一遍。现在终于不用等了。
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就能围绕选中的文本定向修改。
这两个先mark住，如果大家感兴趣的话，后续可以单独聊聊。
「最后」
这次尝试，我觉得我"做不好看"这件事，真的被解决了一大半。
以及我个人觉得，UI和前端确实越来越危险了，不知道UI和前端们怎么看，欢迎评论区交流。
我这么说不是没有依据。特别是现在我做OPC，从我个人的角度来说，如果我自己都能做出这样的产品官网了，我为什么还要请专业的UI和前端呢？
因为目前做出来的效果已经比市面上很多产品的官网效果要好了。
前几天在北京的时候，跟一位老乡朋友吃饭聊天。她是在北京做了很久的资深律师，她主动聊起她很焦虑，并问我有没有什么破局的方法。
我当时给出的破局办法有两种：
1. 打不过就加入：拥抱趋势，拥抱变化，深度使用AI。不仅要是行业的专家，更要成为行业+AI的专家。
2. 把自己变成更稀缺的人才：当一个人既能又能的时候，它的稀缺性是成指数上升的。比如一个人，即懂AI，又懂技术，又懂营销，有网感，还会写文章（没错，正是在下😄）。这样的人是非常稀缺的。可以说你每加一项技能点，你的竞争对手就会少非常多，你就越稀缺，越有价值。
这也是我为什么一直没有找到我公众号的技术编辑的原因--因为适合帮我做公众号内容的人太少太少了。
说真的，从Sketch到Figma，设计与研发格式不同的矛盾存在了十年。在传统工作流中，设计到代码的视觉还原度普遍不足70%，单页面在传统交接中往往需要经历3到5轮的标注与返工。
懂得都懂，真的太痛了。
以前的前端开发流程都是产品确定原型图，UI设计师出图，前端再画图。中间有多少沟通成本，多少开发周期。而现在借助design agent可能就是一句话的事，输入自然语言，你就能得到可交付的工程文件。
所以，如果你对网页呈现的效果有一定追求，或者想优化团队现有的开发流程，可以去尝试一下QoderWork Design Desk这样的设计Agent。它确实是能提高审美、提高效率的生产力工具。
最后，希望评论区不要再说我贩卖焦虑了。因为AI的确发展太快了，就连我自己也非常焦虑。
但焦虑是正常的，关键是看你怎么对待它--是采取行动，还是放任不管。都在于你自己。
不过，我家两代人的经历告诉我，人不能一直低头拉车，还得抬头看路。
能看到这里的都是凤毛麟角的存在！
如果觉得不错，随手点个赞、在看、转发三连吧~
如果想第一时间收到推送，也可以给我个星标⭐
谢谢你耐心看完我的文章~
粤ICP备14082021号
免费POC，
零成本试错
