微信扫码
添加专属顾问
阿里首款Design Agent让不懂UI的后端也能20分钟做出专业级官网,AI设计工具正颠覆传统设计流程。 核心内容: 1. Design Agent如何帮助非设计师快速产出专业页面 2. 从Prompt到成品的完整操作流程演示 3. AI工具对UI/前端岗位的潜在影响与思考
作为一名后端程序员,我略懂前端,但是对于UI设计是一窍不通。
还记得以前上班的时候,公司大部分UI设计都是妹子,我连Figma都没打开过。
自从AI快速发展起来以后,我虽然能做出各种功能复杂的带前端的项目,但一直以来有个问题困扰我:做不好看。
我能分辨什么样的页面是高级的、漂亮的,但我就是很难做出那种高级感、带交互动效的页面。这种感觉很难受 🤔
本来我还想去学一下UI设计和Figma的,但一直没间。。
然后...我就又一次体会到了什么叫只要你学的慢,就可以不用学 🤣,不得不说,这句话还是有一定的道理。
当然,我不鼓励大家一直不学,毕竟学了,你至少知道这玩意儿是怎么发展的,底层逻辑是什么。
ok,先给大家看个好玩的,这是我20分钟左右快速做出来的一个产品官网页面。
效果是不是还不错?我感觉这直接比很多产品的官网都要好了吧?
整个页面的设计就很舒服,然后各种动效,用户可以交互,效果真是很棒。关键是,这是一个不会UI设计的后端程序员做出来的(正是在下)。
大家一定很好奇,这个效果,是怎么做到的?
不卖关子,是QoderWork的AI Native设计工作台(Design Desk)帮忙做的,简单来说,它是一个设计Agent。
而且整个开发流程,对于不熟悉软件开发但是有自己想法想要快速折腾出效果的人非常友好(后面会详说)。
比如开头展示的产品官网,我给了它一个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的确发展太快了,就连我自己也非常焦虑。
但焦虑是正常的,关键是看你怎么对待它--是采取行动,还是放任不管。都在于你自己。
不过,我家两代人的经历告诉我,人不能一直低头拉车,还得抬头看路。
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业
2026-07-03
baoyu-comic 知识漫画Skill - 真正厉害的是把知识变成分镜
2026-07-01
业务架构、应用架构、数据架构、技术架构……架构到底是什么?
2026-07-01
未来产品团队,不再按岗位分工
2026-06-29
dbskill 更新:一键排版发布公众号
2026-06-22
写代码你不在乎AI味儿,写文章为啥那么计较?
2026-06-03
用 WorkBuddy 辅助写投标技术方案:别让 AI 替你投标,让它替你把话说清楚
2026-05-30
企业级 AI Coding 还有一堆问题,并没有像PR一样说的这么好用
2026-05-27
如何使用 AI 设计企业级产品?
2026-04-14
2026-04-28
2026-04-18
2026-05-21
2026-05-27
2026-05-19
2026-05-21
2026-05-24
2026-05-06
2026-05-30
2026-07-01
2026-06-22
2026-05-27
2026-02-28
2026-02-07
2026-01-29
2026-01-21
2026-01-06
欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。
在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。
一、 定义
本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。
会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。
知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。
二、 账号注册与登录
登录方式:本网站支持以下登录方式,您可根据实际情况选择:
微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。
手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。
账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。
实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。
未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。
三、 服务内容与规范
知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。
服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。
禁止行为:您在使用服务时不得实施以下行为:
利用技术手段批量爬取、下载、转存知识库内容;
将知识库内容用于商业目的或未经授权地向第三方传播;
干扰本网站正常运行或侵犯其他用户合法权益;
发布违法违规信息或从事违反公序良俗的活动。
四、 知识产权声明
权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。
有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。
侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。
五、 个人信息保护
我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。
您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。
您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。
六、 免责声明
内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。
不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。
第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。
七、 违约责任
如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。
如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。
八、 法律适用与争议解决
本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。
因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。
九、 其他
本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。
本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。
我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。