新智元报道

AI办公彻底变天了！阿里QoderWork重磅发布全球首个AI Native自定义工作台，推出设计、PPT、写作三大领域模式。AI办公正式从「对话驱动」走向「领域驱动」。

AI办公交互形态，从今天起彻底革新！

520这天，阿里QoderWork正式发布全球「首个AI Native自定义工作台」。

首发上线「三大领域模式」：设计工作台、PPT工作台、写作工作台，一次性覆盖AI办公高频场景。

如今，动动嘴做设计、说句话出PPT、圈一段文字让AI改稿，这三件事，可以都在一款软件里完成了！

更值得关注的是，这三个「工作台」只是开始。

QoderWork「自定义工作台」，是一个开放共建的扩展平台——

基于同一份Agent底座与任务系统，每个工作台拥有独立的视图、工具与产物标准。

未来，开发者与企业可以基于这一底座，搭建属于自己领域的专属工作台。

这一刻，AI办公正式从「对话驱动」走向「领域驱动」。

全球首个AI Native工作台，2.0时代来了

这是一个需要被行业认真审视的节点。

过去两年多，AI办公赛道热闹非凡，但几乎所有产品都在做同一件事：把聊天框做得更聪明。

无论叫AI助手、AI写作、AI编程，用户看到的始终是同一个界面——

左边输入框，右边输出区，中间一个大模型。

这个范式足够简洁，但它正在成为整个行业的天花板。

当任务复杂到需要专属视图、工具链、状态管理和产物标准时，一个聊天框承载不了。

你不可能在一个对话窗口里完成一套设计语言的迭代，也不可能在一段文字回复里审校一份30页的演示稿。

QoderWork自定义工作台要解决的，正是这个问题！

技术上，它通过解耦UI组件、业务逻辑，以及工作区区块来实现场景的独立化。

每个工作台拥有独立的视图、工具、状态和产物标准，但底层共享统一的Agent底座与任务系统。

在设计场景里，它是一个拥有画布、预览、风格库和画笔标注的设计工作台；

在PPT场景里，它是一个拥有11个可介入阶段的演示稿生产线；

在写作场景里，它是一个可批注、可回溯、可导出的文档协作台。

已上线的「三个工作台」是同一个产品的不同「变形」，不是三个割裂的App。

底层能力共享，上层体验专属。

更重要的是，「扩展机制」是开放的，未来开发者和企业可以在这个底座上「长出」自己的领域工作台。

聊天框是AI办公的起点，但「自定义工作台」，也许才是AI办公该有的终局形态。

设计工作台，终结十年「翻译链」

三大工作台中，「设计工作台」是本次首推的核心重点。

它在5月18日率先上线，用一个彻底的结构性变革，直指设计行业最深层的痛点。

每一个做过数字产品的人，都经历过这样一幕：

设计师在Figma里精心调了三天的界面，交到研发手上，还原出来走了样。

间距不对、圆角不对、颜色不对。设计师说「这跟我画的不一样」，研发说「标注就是这么写的」。

于是开始了第一轮返工。接着是第二轮。第三轮。

一个页面来回三五轮是常态，设计师超过30%的工时消耗在「盯还原」上——不是在创作，是在当翻译官。

从Figma到代码之间，存在一条漫长且有损的翻译链，设计到代码的还原度普遍不足70%。

然而，这条「翻译链」存在了整整十年。

Design-to-Code插件试过了，生成的代码不可维护；低代码平台也试过了，牺牲设计品质换速度，结果两头不讨好。

行业一直在等一个真正的结构性解法。

QoderWork设计工作台，直接跳过了这段距离。区别于传统工具，它开辟了一条全新路径——

不再让设计和代码作为两种产物分别存在，在这里，Code as Design！

设计师在画布上操作的每一个元素、产品经理在Preview中点击查看的每一个交互、研发最终接手的那份文件.......

从第一步起，就是同一份可运行的工程文件。

不是先画图再翻译成代码，不是先出视觉稿再让研发「照着做」。

设计产物即代码产物，「翻译链」不再存在，因为不再需要翻译。

重构AI设计流程，不再「开盲盒」

当然，让设计产物变成代码只是结果。更关键的问题是：过程怎么走？

市面上，不缺AI生成设计的工具。输入一句话，AI给你一个页面——

看起来很酷，但实际用过的人都知道，这个过程充满了「AI自作主张」的痛苦。

要求「做一个SaaS后台首页」，它给你一个花里胡哨的Dashboard，但配色不对、信息层级错了、关键模块位置偏了。

于是你重新描述一遍，它又给你一个完全不同的方向。

来回三四轮，时间全耗在「纠偏」上了。

这一次，QoderWork设计工作台通过三个机制，把「抽卡」变成了「协作」。

Questions：先问清楚，再动手

输入信息不足时，AI不会「猜着做」，而是先追问对齐意图。

你想做什么类型的页面？面向什么用户群？核心信息模块有哪些？意图对齐在前，无效迭代降至最低。

这个设计看似多了一步，实际上省掉的是后面反复推倒重来的时间。

Design Plan：先出计划，确认了再执行

AI在动手之前，先输出一份结构化的设计计划——布局方案、风格方向、内容层级、视觉语言。

你确认了，它才执行。方向对齐在前，避免推倒重来。

Nudge：参数化微调

生成之后，配色、间距、圆角等关键设计决策以可调参数的形式暴露出来。

不用重新输入一大段prompt「蓝色再深一点、间距再大一些」，直接拖动参数即可微调。

这三个机制串联起来，构成了一条完整的AI设计生产链路：

先问清楚（Questions）→ 再确认方向（Design Plan）→ 然后精修细节（Nudge）。

每一步都有用户确认的节点，每一步都在减少信息损耗。

设计即代码，一手实测

光说不练假把式，接下来，我们就QoderWork「设计工作台」开启了全方位实测。

我们尝试用同一个案例，测试设计工作台的几方面核心能力。

最开始，只给到QoderWork一个极简而需求模糊的提示词：

帮我做一个 AI 编程助手的管理后台

这种提示词更接近小白用户实际会给出的情况。

这里需要考察的是QoderWork是否能通过交互来明确用户需求：

AI 是否抛出结构化问题(平台？数据维度？用户角色？)；

问题是否覆盖关键决策(目标用户、核心场景、数据周期)；

是否提供建议答案(降低用户回答门槛)。

由于需求不明确， QoderWork提示了用户先做好设计规划。

如果你想偷懒，也可以选择让AI自行决定。

QoderWork也内置了上百种不同的整体风格参考，可以一键套用自己最喜欢的具有设计感的网站的风格。

思索了不到1分钟，设计计划出炉了，看起来像模像样，让我们不免对交付结果产生了期待。

设计计划

本次将为 AI 编程助手交付一套面向开发者团队 Leader 的高保真深色管理后台，使用 React + Vite + shadcn 风格组件实现，主风格参考 Linear，并辅以 GitHub 与 Stripe 的代码与计费排版灵感。后台包含五个核心模块：Dashboard 概览（聚焦 Token 与成本、用量与活跃、代码质量与采纳、模型与延迟四类 KPI 与异常告警）、用户与团队管理、模型配置与计费、对话与代码记录、知识库与 Agent。视觉上采用深空黑底 + Linear 冷蓝主操作色 + 电气青数据高亮 + 状态绿/琥珀/玫红，所有派生颜色通过 seed tokens + var()/color-mix() 派生，避免默认 AI 紫色调，数字使用 JetBrains Mono + tabular-nums。批准前请重点审阅：模块范围与命名是否完整、Dashboard 四象限 KPI 与图表组合是否符合 Leader 视角、是否同意以 Linear 为主风格参考、以及 react-vite + 本地 shadcn 风格类（不安装真实 shadcn 包）的实现路线。

产物：admin dashboard

平台：web, desktop

输出：react-vite

组件库：shadcn

保真度：high-fidelity

风格：primary: linear-app; inspiration: github, stripe；不引用既有品牌 logo，仅借鉴排版/密度/配色思路

01

react-vite/src/App.jsx

创建

应用入口与路由壳，承载左侧导航 + 顶部栏 + 主内容区，挂载 Dashboard / 用户与团队 / 模型与计费 / 记录 / 知识库与 Agent 五个模块视图。默认进入 Dashboard 概览页。

02

react-vite/src/components/Dashboard.jsx

创建

Dashboard 概览页，集中展示四类核心 KPI（Token 与成本、用量与活跃、代码质量与采纳、模型与延迟），并提供异常告警、Top 团队/模型、最近会话快览。

03

react-vite/src/components/UsersTeams.jsx

创建

用户与团队管理页，提供成员列表、角色权限、团队/工作区、邀请入口。

04

react-vite/src/components/ModelsBilling.jsx

创建

模型配置与计费页，配置已接入模型、API Key、配额规则、计费策略。

05

react-vite/src/components/Logs.jsx

创建

对话与代码记录页，按会话查看 Prompt、补全、采纳与审计追溯。

06

react-vite/src/components/Agents.jsx

创建

知识库与 Agent 管理页，配置代码库索引、自定义 Agent / Workflow。

07

react-vite/src/styles.css

创建

全局样式与主题 token，定义 seed tokens、深色主题、字体、组件 token、shadcn 风格类。

08

react-vite/src/main.jsx

创建

Vite React 入口，挂载 App 到 #root 并加载全局样式。

09

react-vite/index.html

创建

Vite HTML 壳，包含语言、标题、字体引入、画布尺寸 meta 与根节点。

10

react-vite/package.json

创建

声明 React/Vite 与 recharts、lucide-react 依赖与 dev/build 脚本。

11

react-vite/vite.config.js

创建

Vite 配置，启用 React 插件并设置默认开发端口。

12

react-vite/canvas-design.html

创建

Canvas 设计预览静态壳：在不依赖 dev server 时也能让 Canvas 加载结构化设计概要并跳转到真实预览。

资源选择

技能

风格参考

必读资料

结构

交互

质量

风险

修改意见

检测到用户需要React但并没有安装时，只需点击「安装并继续」，一切QoderWork都帮我们搞定了。

你完全不需要理解React代码的原理，甚至不需要知道React除了「反应」以外还有什么意思——零代码Vibe Coding。

经过了10分钟的等待，成果出炉！

左右滑动查看

快来访问我刚做出来的网站吧：http://127.0.0.1:5173/（开玩笑）

可以通过浏览器访问，与动态图表进行交互。从视觉呈现效果上，完成了我们的需求。

没有抽卡！一遍成！

该GIF动图帧率由于微信限制仅为15，实际动画完全流畅

但是，如果只是生成一个HTML网页，其他模型也可以做到，虽然效果呈现上可能不如QoderWork生成的。

QoderWork真正的杀手锏，是Nudge面板和画笔功能——哪里不好改哪里，所见即所得。

整体性的关键设计决策可以轻易拖动调整。

想要换成浅色主题？没问题。

由于我们之前没有指定我使用的模型，只是为了演示效果，随便选了个版本；现在我想换成我实际使用的最新模型。

用画笔功能圈出要修改的区域，通过自然语言提示词直接修改对应元素。

QoderWork也是轻松完成了修改。

我们观察QoderWork思考过程发现：最可贵的一点是，QoderWork并没有只做表面功夫，而是将看板上的视图背后的数据库等其他地方对应的模型也一并检索修改，避免了冲突，保持了高同步性，而这往往是小白用户特别容易忽略的。

针对所有元素，QoderWork的Nudge功能，能根据不同元素类别，直接调整所有设计所需参数，所见即所得。

一键交付Qoder IDE，设计变成开发起点

但设计工作台真正的杀手锏，藏在流程的最后一步。

生成的设计产物，可以一键交付至Qoder IDE等主流开发工具，直接进入研发流水线。

这是设计产物以完整的工程结构落地到开发环境中——

研发打开的就是一个可以继续写业务逻辑的项目，不需要拆组件、不需要重建模块、不需要对比验证。

设计与开发之间的代沟，在这一步被彻底抹平。

当然，任何新产品都不可能一步到位。在早期用户的实际体验中，有一个颇具代表性的问题被提了出来：

设计工作台的产物一键交付到Qoder IDE后，默认打开的是一个新的workspace。

但在实际开发中，团队往往已经有了一个现有的项目工程。

这个问题看似是一个文件路径的技术细节，但它背后折射出的，是AI设计工具在走向工程化落地时必须面对的深层挑战——设计产物如何真正融入已有的项目上下文？

QoderWork已经走出了最关键的第一步：让设计产物从「图片」变成「代码」。

接下来的路，是让这份代码从「可以跑起来」进化到「可以长进去」。

PPT诞生39年来，首次被结构性重写

「设计工作台」打破的是「设计到代码」的翻译链，那「PPT工作台」呢？

做一份能讲的演示稿，痛苦程度不亚于设计还原。

AI生成PPT的方案早已有之，但痛点也出奇地一致：你只能看到最终结果，无法介入过程。方向偏了，推倒重来。

QoderWork「PPT工作台」要改变的，恰恰是这一点。

把「做一份能讲的演示稿」拆解为可监督、可干预、可回放的多阶段的协作流程。

这是PPT形态，自1987年PowerPoint诞生以来，第一次结构性重写！

演示稿从一份图形文件，升格为「可编程、可审计、可累积」的结构化内容资产。

具体来说，它一共包含了三大核心能力——

全流程可介入

从上下文采集、主题锁定、大纲确认到内页生成、双重审校，PPT工作台将制作过程拆解为11个阶段。

用户在大纲、主题、图像、内页四个层级都能介入，方向对齐永远在执行之前。

HTML即源文件

每一页演示稿以独立HTML文件落盘，Theme JSON是视觉真值。

内容可读、可diff、可手改、可离线分发，内置中文字体，断网也能完整渲染。

支持PDF/ HTML/PPTX三种格式离线导出，PPTX保留可继续编辑的真实组件，还能自动生成150–300字演讲备注。

模板沉淀与团队复用

此外，它还内置了30+官方预制模板，开局一键套用。

更关键的是，任意成稿可一键抽取为团队模板，在成员间共享流转，让品牌调性与汇报体例形成可累积的组织资产。

在实测中，我们让它生成一个大学课件，课题是李白与杜甫——盛唐诗歌的两极。

这里，选用了一个canvas-pop（画布彩章）模板。然后，QoderWork开启了深度思考模式。

下楼买一杯咖啡的功夫，它便完成了上下文采集、主题锁定，接下来需要确认的就是「大纲」。

不一会，一个精美的PPT课件完成了。

而且，你还可以将其保存为「模板」，方便未来再次复用。还可以把模版下载下来，分享给你的同事和朋友。

AI写作从代笔，成为被审稿的合作者

接下来，「写作工作台」解决的问题更加日常，也更加普遍。

过去，AI写作的交互模式是：你给一句话，AI给你一篇文。写得好，直接用；写得不好，重新来。

AI是独自交付的代笔者，你是甲方，关系就是「下单—>验收」。

问题在于，真实的写作从来不是这样运转的。

QoderWork「写作工作台」要改变的，正是这个协作关系。

进入写作模式，主页对话框下方提供「四种预设语气」，包括正式、轻松、技术、创意。

接下来，给到它一个任务——

请以资深科技自媒体编辑视角，硬核拆解Claude Code的核心颠覆力，撰写一篇关于深度稿件。

QoderWork立即进入写作状态，右侧打开了一个专属的文档工作区。

正如「设计工作台」Questions一样，它没有盲目地开始一通输出，而提出了一系列问题。

确认了篇幅长度、切入主轴、立场倾向，才会开始调研、输出。

这里，我选择了「创意」语气，可以看到QoderWork输出的整篇稿件，都带有一丝灵动与网感。

而「写作工作台」最具差异化的能力，是「选中即批注」——

可以像审稿一样，圈出其中某段文字，直接批注「改得更正式」，AI就可以围绕被选中的文本定向修改。

与此同时，它还提供润色、重写、扩写、缩短、修复语法、中英互译等快捷动作。

从一句话生成框架，到逐段打磨收尾，全部在这同一个工作台内完成。

此外，「写作工作台」还支持人机接力。

个人在编辑器中，调整完文章结构、细节后，QoderWork会以最新文档为准继续处理。每一次重要修改，都有历史版本可回看，完成后还可一键导出PDF。

「写作工作台」重新定义了AI与人在写作场景中的协作关系——

从「聊天里的长答案」到「一份可编辑、可批注、可导出的文档」。

这，才是AI办公该有的样子

回过头看，QoderWork这次发布的自定义工作台 + 三大领域模式，指向的是同一个趋势：

AI正在从「工具」进化为「工作环境」。

过去两年，AI产品的主流叙事是「AI是你的助手」——帮你写文案、帮你改代码、帮你做PPT。

AI是锤子，用户是拿锤子的人。

这个逻辑没有错，但它有一个隐含的前提：工作流程本身不变，AI只是让某些环节变快了。

但QoderWork设计工作台做的事情不是「让设计变快」，而是改变了设计的工作方式本身。

「扩展机制」的意义则更加深远。它让AI办公产品的形态从「千人一面的聊天框」变成「千人千面的领域工作台」。

这意味着，未来的办公AI不必再让所有工作，都挤进一个对话窗口里。

它可以根据不同场景，「长出」最适合的交互形态和工具集。

设计、PPT、写作，是首批落地的「三个领域模式」，但不会是最后三个。

当AI不再只是「帮你做事的助手」，而是「你工作其中的智能环境」——

这或许，才是AI办公真正该有的样子。

参考资料：

https://qoder.com/qoderwork