阿里下场做了一款 Claude Design，有不少创新

非常激动。昨天临下班的时候，看到朋友圈的消息，阿里旗下的 QoderWork 上线了 Design Desk（设计工作台），一个类似 Claude Design 的新功能。我真的等了很久很久。

Claude Design 我估计好多人还没用过，多啰嗦介绍两句。

它和 QoderWork Design Desk 这类产品，可以帮开发者用自然语言表达想法，然后直接生成一个 UI 设计和前端代码。

传统设计工具，比如 Figma，一直是围绕矢量编辑 + 云端协作来的，关注的是设计师之间如何协作、如何画得更好。但有个老大难问题始终没解决：

设计 → 交接 → 前端还原，这一整套流程里，信息大量损耗，沟通成本极高。

QoderWork 的设计工作台和 Claude Design 这类新一代产品的思路是，直接做一个 AI 原生的设计即代码工具。

它们的交付物是可运行、可编辑、可交付的工程文件，而不是图片式的设计稿。

这样一来，设计师和研发从第一步起就共用同一份代码资产。

不过阿里的 QoderWork Design Desk，在产品形态上做了几个我觉得挺有意思的创新。

毕竟在这样的产品当中，模型不是决定性因素，最终考验产品的交付能力的还是模型再加 Harness。这我觉得已经是共识了，我不用再啰嗦。

QoderWork Design Desk 有几个优点：

第一，产物是研发可以直接用的前端工程，而不只是 HTML 代码。

这一点是我觉得两个产品最大的差异。

Claude Design 目前的产物停留在 HTML 这一层。但对一个成体系的前端团队来说，一张纯 HTML 页面其实没什么价值，不好维护，不好拆组件，不好复用，很难塞进现有的工程体系。

它更像是一个高保真原型，离生产代码还差一截，前端同学接到之后大概率还得再改一轮。

QoderWork 在这一步往前推了一截，既支持 HTML，也支持 React、Vue 这类前端框架的工程。出来的东西可以直接进入真实的研发工作流。

第二，所有的迭代都可以在一个画布里完成。

Claude Design 最终的预览就是一个 HTML 网页，能交互，但毕竟还是跟一个网页打交道，能修改的方式非常有限。

QoderWork 的做法不一样，它做了一个画布。在画布上可以直接圈选某个区域，用画笔或文字标注写清楚意图，AI 看到就会及时改。

比如觉得某个按钮位置不对，圈一下，写一句往右挪一点，改完立刻就能在画布上看到结果。

这种工作方式对设计师来说很顺手，整个迭代体验跟在 Figma 里跟人协作差不多。

第三，内置了一百多套 DESIGN.md 风格模板。

DESIGN.md 这个东西，我上次做花木兰那个网站的时候专门聊过。

它的核心作用，是把字体、颜色、间距、组件风格这些原本靠设计师主观判断的东西，全部写成明文规则交给 AI。

过去跟 AI 说更高级一点、再活泼一些这种话，它听了也不知道往哪儿改，最后只能凭模型自己的审美发挥。有了 Design.md，规则一条一条写清楚，AI 照着走就行。

QoderWork 内置了 150+套 DESIGN.md，相当于把市面上常见的设计语言提前打包好了。

特别说明一下，接下来所有的实操都是我一次性生成的，中间没有调整、没有剪辑、没有任何的粉饰，我们就真实地看一下这款产品的水准。

我看了一下这款产品的真实运行流程，大致可以分成三步。

第一步是需求澄清。用自然语言把想法说出来之后，AI 会先思考推理，再针对模糊的地方一条条追问确认。

信息对齐之后，AI 进入第二步，开始做设计计划。计划会列出布局结构、风格方向、内容层级、信息块的拆分。

第三步是初稿出来之后的局部打磨。哪儿不满意就在画布上圈出来，配合自然语言改掉就行。

具体看一个例子。

我让它基于我们 AI Maker Summit 深圳站的官网，给我设计上海站的官网，要求是希望能做出一些增量的创新，但主色调和内容结构延续深圳站。

大家可以看下面的录屏。理解完我的需求之后，QoderWork 先去访问了深圳站的官网，把之前网站的基本信息看了一遍，然后找我做需求澄清，问我这次要在哪些方面做创新，还有一些必要的信息。

整体逻辑很像一个真人设计师，先理解需求，再把不确定的地方跟我确认清楚。

设计计划这环节挺有意思的。大概等了一分多钟，QoderWork 给我生成了一份完整的设计计划。录屏里可以看到，它会主动问我要不要改。

要改就直接点进去改设计计划，不改就推进到下一步。

我觉得这一步是它比 Claude Design 做得好的地方。Claude Design 就是少了这一步，所以才会出现前面说的那种推倒重来、浪费 Token 的情况。

确定设计计划之后，QoderWork 就会按照计划完成最终的设计。大家看下面我的截图，核心的页面结构和主色调它都理解到位了。

增量的设计包括粒子浮动的背景，还有上海的天际线 SVG 剪影，以及所有的卡片都采用磨砂的玻璃效果。

点击关键设计决策，可以弹出像 Claude Design 类似的菜单，这样我们能够对页面的元素进行微调：

右侧的窗口除了画布外，还有设计文件、预览、风格参考和设计计划。

风格参考就是前面提到的 DESIGN.md，除了可以使用预置的 DESIGN.md 模板外，也可以创建自己的。

我们选择一个模板看看效果：

假如整体网站结构我们已经比较满意了，接下来就是细致的优化调整。

前面跟 AI 表达需求的时候，基本都是粗粒度的，大概要个什么样的内容、希望它朝哪个方向做增量创新。

但具体到细节，AI 毕竟不是肚子里的蛔虫，理解不到那一层。所以在这版的基础上，肯定还要做一轮细致的打磨。

比如首页，我觉得有两个地方要改。

第一，文字有点过多，应该删掉一些。第二，倒计时那部分，也有些多余。

优化过几轮之后，下面是最终的效果。

画布这种形态确实方便不少。一方面可以直接选中某个元素去改，另一方面有的元素懒得选，直接画个红框，跟 AI 说想要的效果就行。比纯 HTML 预览自由太多。

定稿之后，可以直接导出到常用的 IDE 中。

就拿今天聊的这个产品来说。在它之前，我们在 AI Coding 的工具里用自然语言表达自己的想法，让 AI 生成网页，初稿效果不满意再改。

但这一步发现比较难跨越，中间大家探索过很多方法。

我自己试过的，先把草图喂给 AI，给 AI 塞一些网站的参考链接，包括 Design.md，其实都是在解决同一个问题，怎么让 AI 生成的页面更美观、更符合我们预期的样子。

QoderWork 的 Design Desk 和 Claude Design 这类产品换了一条路，直接把这些零散的探索做成了产品功能。

毕竟口述只能传递大概的想法，细节得靠产品里设计好的交互方式一步步补出来。

大家抽空可以去试试，应该能极大程度提高我们 Build 的效率。