阿里QoderWork发布全球首个AI Native自定义工作台，终结设计到代码十年翻译链

AI办公的交互方式，从今天起迎来了彻底的变革！

5月20日，阿里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包）的实现路线。

【.design.json】

产物：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工作台」要改变的，正是这一现状。

它将「制作一份可演讲的演示稿」拆解为多个阶段，形成一个可监督、可干预、可回溯的协作流程。

这是自1987年PowerPoint问世以来，PPT形态首次经历结构性重塑！

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

具体而言，它包含三大核心能力——

• 全流程可介入

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

用户可在大纲、主题、图像、内页四个层级进行干预，确保方向对齐始终先于执行。

• HTML即源文件

每一页演示文档以独立HTML文件存储，Theme JSON作为视觉真值。

内容可读、可差异对比、可手动修改、可离线分发，内置中文字体，即便断网也能完整渲染。

支持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