阿里语音设计UI引恐慌?深度实测QoderWork设计工作台:一句话生成高保真界面
前两天看到一条消息,胡彦斌用 Vibe Coding 的方式给粉丝做了一个 APP——巡演地图、打卡系统、动态广场、成长体系,功能齐全。

那个坐姿,一看就是资深 Vibe Coder 了。
当时那张照片让我恍惚了一下:连明星都能顺手写代码了,编程的门槛好像真的被掀了个底朝天。
紧接着昨天,Andrej Karpathy 宣布加入 Anthropic。Karpathy 曾是 OpenAI 创始成员、前特斯拉 AI 总监,2025 年初他造出“Vibe Coding”这个词,意思是顺应感觉让 AI 把代码写完,甚至不必关心代码长什么样。一年前大家还觉得他在说大话,现在没人笑得出来了。
不过 Vibe Coding 跑了一整年,大家也慢慢发现一个真相:代码能跑通并不稀奇,但做出来的东西丑不丑、能不能用,全看编写者的审美,以及他对实际业务的理解深度。
可如果让一个没学过设计的人先在脑子里描绘界面长什么样——这比让他写代码还要命。
那种感觉谁都明白:你分明知道它不好看,却根本不知道怎样才能让它变好看。
刚好就在胡彦斌推出 APP 的同一天,阿里 QoderWork 上线了「设计工作台」,定位非常直接——说句话就能做设计。对着它说出你想要的界面,它就在画布上生成一份可运行、可编辑、可直接交付的设计产物。

如果说 Vibe Coding 解决的是“没有程序员也能写代码”的问题,那 QoderWork 想解决的正是前面那一步——没有设计师也能做设计。
这两块拼到一起,才算把普通人从构思到产品落地的整个链条给打通了。
那它到底靠不靠谱?是真能打仗,还是又一场 demo 很美、用起来叫人摔键盘的幻象?我上手完整跑了一遍。

深度上手测试
0. 准备工作
体验前先做简单设置。在对话窗口左下角选择「设计」模式。

同时推出的还有 PPT 和写作模式,感兴趣可以自行体验,详细说明可查看 QoderWork 官方发布内容:QoderWork 自定义工作台介绍
接着选择参考风格,QoderWork 内置了 161 种风格。

比较值得推荐的包括:
- Apple:一看名字就知道,特别适合科技产品网站,极致留白加克制层级。
- Figma:如果你需要原生 Web 图形控制和产品色彩,这个风格是首选。
- Github:纯正的 Markdown 风,程序员最爱。
- Notion:文档式效率工具风格。
- Bold:深色技术产品,做信息图或大字报非常顺手。
- Claude:Anthropic 经典的暖橙搭配,极简主义。
- Airbnb:尤其适合市场营销页面。
- Carbon:企业后台、B 端产品首选。
拿不准的话可以勾选“自动选择参考风格”,但主动指定后产出的效果更可控。
然后再指定组件库。QoderWork 预设了三套:

- shadcn/ui:偏现代极简,独立开发者会很偏爱。
- Spark Design:阿里云的风格包,选这个做出来的界面视觉和阿里系产品保持一致。
- Ant Design:蚂蚁推出的企业 UI 资源包,风格更稳重,适合正式的企业级产品。
设置完毕后进入正式的设计过程。
QoderWork 的工作逻辑是一条完整的流水线:自然语言描述需求 → AI 追问对齐意图(Questions)→ 生成设计计划让用户确认(Design Plan)→ 在画布上生成高保真设计 → 画笔圈选迭代 → 参数微调(Nudge)→ 交付工程文件。
全程无需打开 Figma,也不用改代码,完全依靠自然语言交互。
案例一:为大明PPT搭建产品官网
早前我开源了一个项目「大明PPT Agent Team」,不少人觉得 Multi-Agent 太复杂,不容易上手。
这次我想直接把它做成一个网站。
输入开发需求:
基于这个开源项目:https://github.com/woyin2024/lengyi-ppt-agent-team,为所有被 PPT 折磨的人设计一个 AI 驱动的自动生成网站,产品名“大明PPT”,slogan 是“朕要做 PPT,六部听旨”。
页面要求:首屏展示圣旨卷轴展开动画,中间一道输入框,用户像拟旨一样写下主题(例:“2026年新能源汽车出海战略”),旁边可选页数范围和风格偏好(TED 演讲风/咨询报告风/路演融资风)。提交后页面进入“六部议事”流程可视化——六个 Agent 角色(内阁、锦衣卫、东厂、翰林院、工部、织造局)以动态卡片流依次点亮,实时展示当前进度:锦衣卫正在全网搜集情报、东厂正在交叉核查数据、翰林院正在提炼大纲……用户只能在两个“御批”节点介入——研究报告终版和最终 PPT 成品,其余全程旁观。最终交付页提供 HTML 预览、一键下载和分享链接,同时附带“再拟一旨”按钮回到首页。
整体风格:大明宫廷与现代极简混搭。不是古风贴图那种粗浅的“中国风”,而是把朱墙金瓦的庄严感转译为现代 UI 语言——大量留白、克制装饰,权威但不压迫。视觉锚点是“御批朱砂”,关键按钮和确认动作用朱红色,其余大面积使用象牙宣纸底加墨色文字。圣旨、印章、卷云纹只作为微交互元素出现(比如 loading 动画是卷轴徐徐展开,完成提示是一方玉玺盖下)。
配色:宣纸象牙白(#F5F0E8)+ 御批朱砂红(#C41E3A)+ 墨色(#1C1C1C)+ 金丝楠木暖褐(#8B6914,仅用作分隔线和边框点缀)。
字体:中文标题用思源宋体(对标诏书题头),正文用思源黑体(阅读优先),数字和英文用 JetBrains Mono(保持技术工具的专业感)。
QoderWork 并没有立刻动手,而是先与我沟通意图,它提了两个问题让我确认。

这个机制你可能已经很熟悉,叫作“Ask user questions”,当信息不充足时 AI 会主动追问澄清,而不是自己胡乱猜测。
我回答问题后,它马上出了一份详细的 Design Plan,把布局、风格、资源选择、交互设计全部罗列出来,等我确认后才会继续。

没过多会儿,一套完整的设计产物就做出来了。

整个体验过程我录了屏,大家可以感受一下。

(观看视频:说句话就能做UI设计,阿里这个新产品让我有点慌)
从演示效果看,确实有几分“大明风华”的味道了。
对于设计产物,想修改也很简单:直接用画笔圈出要调整的区域,然后用自然语言描述需求就行。

也可以点选编辑,颜色、间距、布局、描边这些,都能在 Nudge 参数面板里直接微调,改动实时生效。

这两套方式可以组合起来用:画笔解决“改哪里”,面板解决“改什么参数”,比单纯打字描述意图要精准得多。
最后,所有的设计物都存到了本地文件夹里,打开就能用。

还没完,这一整套设计产物只需要点一下,就能提交到 Qoder 这类 IDE 里继续开发。

这对于开发者来说相当省心。它产生的从来不是一张图片,而是直接能运行的前端代码,并且可以和其他编程工具无缝衔接。
案例二:邻里闲置交换 H5
上个案例我给了非常详细的需求,第二个案例我故意抛出一个模糊的需求——为小区业主设计一个闲置交换工具。
设计任务是:
为小区业主设计一个邻里闲置交换工具,产品名“楼下的”,slogan 是“与其挂闲鱼被砍价,不如换给楼下邻居”。
这一次,QoderWork 提了三个问题帮我细化需求。

我选择做成移动端 H5,核心包含首页物品列表、详情页、发布页三个主屏,视觉往温暖亲切的方向走。
最终生成的暖色调轻量化卡片式设计,的确很适合这种社区类小应用。

(观看视频:说句话就能做UI设计,阿里这个新产品让我有点慌)
可以看出,即使需求模糊也没关系,它会主动帮你把模糊的点挖清楚。
案例三:食材管理小工具“快烂了”
我又针对总是记不住冰箱里有什么的人,设计了一个小工具。
设计任务:
为记不住冰箱里有什么的人设计一个食材管理工具,产品名“快烂了”,slogan 为“别让西兰花死在冷藏室第三层”。
页面要求:首页是保质期倒计时的食材卡片流,颜色从绿渐变到红——今天必须吃掉的置顶闪烁红色。支持快速录入(打字或语音:“买了鸡蛋一盒、菠菜一把”),自动估算保质期。底部设有“今晚吃什么”按钮,根据现有食材推荐菜谱,优先消耗快过期的。
整体风格像厨房计时器混搭库存看板,配色采用冰箱白+番茄红+保鲜绿。
直接看效果。

(观看视频:说句话就能做UI设计,阿里这个新产品让我有点慌)
这个工具我自己已经用上了,因为我恰好就是那种老把东西塞进冰箱直到忘记的人。
案例四:苹果风格产品官网
最后一个案例,我指定 Apple 风格,给一款名叫 Aura 的 AI 蓝牙耳机做产品官网。
设计任务:
给 AI 蓝牙耳机 Aura 设计一个产品网页。它来自“沃垠科技”,融合顶尖降噪技术和智能语音助手,声音清晰纯净。耳机轻巧贴耳、全天舒适佩戴,音乐、通话和 AI 助手时刻可及。
设计要求:
- 网页整体风格和布局参照苹果官网;
- 主 Hero 区域放入产品宣传视频(使用附件视频素材);
- 追求高级审美,按大师级作品、顶级前端网页设计标准来。
最终输出的页面确实有苹果官网那股味儿了——极简留白、色彩克制、排版精细。

(观看视频:说句话就能做UI设计,阿里这个新产品让我有点慌)
作为一个毫无 UI 设计能力的 Vibe Coding 实践者,我完全没想到自己能产出这种质量的东西。
过去这一年,各种 AI 代码工具已经把“能不能跑通”卷到了极高的水准。但跑通之后呢?一个灰底黑字、毫无排版的页面,与一个能拿出去见人的产品之间,横亘着的从来不是代码能力,而是设计能力。
而设计这件事,以前是有壁垒的。你得会用 Figma,得懂排版、配色、信息层级。这些不是看两篇文章就能学会的,需要大量练习。
QoderWork 做的事,其实就是把这层门槛打掉了。它没去跟 Figma 抢饭碗,也不是要替代设计师,而是让“做出好看的东西”这件事,不再需要你先学会专业工具。
你只需要知道自己想要的调性是什么,剩下的交给它。
当然,这东西也还存在局限。复杂 3D 场景的还原度、一些极端动效的流畅性,以及与最终实际产物的融合度,都还有提升空间。但说实在话,第一个版本能做到这个程度,已经超出我的心理预期了。

写在最后
写这篇文章时,我一直在琢磨一个问题:当一个没啥设计基础的人,能在十几分钟内做出审美在线、拿得出手的产品官网,这件事到底意味着什么?
这不是在贩卖焦虑。我觉得它预示了另一件事情——创作群体的规模正在以前所未有的速度扩大。
以前你必须先掌握一门手艺,才能把脑海里的想法变成可感知的东西。现在这条链条被压缩到了最短:你想做的东西离你亲手做出来,中间只隔着你能不能清晰地把它表达出来。
这种感觉,有点像小时候第一次握住画笔。你不用知道颜料怎么调配、透视怎么计算,你只需要知道自己想画什么,然后尽管去画。
更妙的是,它还直接把“印刷”环节也给接上了。你设计出来的产物,直接拖进编程工具里,马上就能进入开发流程。
说实话,我现在有点上头。不是因为这个工具有多了不起,而是我突然发现自己能做很多过去想都不敢想的事。那些在心里搁了很长时间的念头,开始慢慢有了形状。
这大概就是 AI 最打动我的地方。