更好用的 Claude Design 来了，可以免费用

TRAE Work 新上线的 Design 模式我非常喜欢。这个功能简单来说，就是在正式 AI Coding 之前，我们可以通过自然语言快速生成设计稿。

解决的问题跟之前 Claude Design 差不多，但 TRAE Design 直接集成在 TRAE Work 中，不需要来回跳转。

Design 模式下生成的设计产物可以直接导出到 Code 模式，然后就可以写代码了。

而且TRAE Design 还支持 Figma。像我们团队之前一直用 Figma 做设计，这样已有的设计资产可以直接迁移过来。

昨天看到字节技术副总裁洪定坤的一篇分享，他提到一个现象：AI 写代码已经快了很多，但整个产品交付速度并没有同步提升。

原因很简单。Coding 只是产研流程中的一个环节。如果 AI 只进入 Coding，没有进入 Design、Review、Testing 这些环节，整体效率提升有限。

所以字节现在做的一件事，就是把内部验证过的工作流不断沉淀到 TRAE 里。Design Mode 就是其中一个典型例子。

我不知道其他公司的工作流程。像我们公司之前做产品，产品经理最需要做的就是先写文档。我之前做产品经理的时候，写了太多文档了。

写文档这事真反人性，产品经理文笔又没那么好，写东西很费劲，写出来的东西也不幽默也不风趣，程序员不愿意读。开会的时候念文档，好多程序员在那打哈欠。

现在我们现在的做法是，重要的文档还是要写，但要求言简意赅，不要写一堆字，列出来几条关键信息就好。

剩下的工作，产品经理就先做出来一个页面原型，跟工程师开会的时候，大家就基于这个原型去对。

我现在的要求是，产品经理必须把页面原型当成程序员后面可以直接实现的东西，不要再让程序员在原型基础上去改了。

原型就是最终要做的样子，大家直接在这上面去 Coding。相当于产品经理做了半个前端的活。

我给大家看一下我们是怎么用 TRAE Work Design 模式的。

我们最近有一个项目，做 AI Maker Summit 的交易系统。之前接入的是第三方 SaaS 系统，说实话，它的风格跟我们网站是不一样的，而且不支持开放 API，我们没办法做 Skill。

所以我就想，这个系统全部自己接过来做吧。一个票务的交易 SaaS 功能很薄，现在有 AI 的帮助很容易搞定。

所以就开始用 TRAE Work 来做这个功能了。

做也不白做，我顺带和团队一起，写了一个小白的使用教程。

点击左侧菜单栏的“设计系统”按钮。

这里会沉淀我们所有的设计系统。我这刚开始用，点击右上角的“添加设计系统”的按钮，这时候会看到三个入口。

第一种是直接导入 .fig 文件，等于把 Figma 里的设计直接接进来，基本不用再从零搭。

第二种是已经有一版 TRAE Work Design 的设计文件，也可以直接拿来继续改，这种更适合团队已经跑过一轮设计体系的情况。

第三种是从零开始做，用风格探索去生成一套新的设计系统。

我这次是从零开始，所以直接选了第三种方式。后面就比较简单了，把名称、描述和一些偏好填一下，确认之后，一个新的设计系统就算正式起步了。

可以看到，TRAE Work 先在右侧创建了任务待办，然后开始执行任务，任务的产物也会跟待办一样在右侧显示。

我刚在提示词中写了具体的官网地址，所以 TRAE Work Design 直接就通过内置浏览器开始浏览大会官网，然后总结了官网的设计风格。

其实这一步我可以直接把之前的代码发给它。

但考虑到很多人是从零开始、手里没有老系统的，可能需要去模仿一个参考网站，于是就演示了下 TRAE Work Design 同网址萃取目标网站设计风格的能力。

下面这是交付产物，大家看看，包括色彩体系、字体组合、组件类型等等。真的很专业。

刚刚的设计系统，就可以在最开始设计系统的页面找到。也就是说，它已经沉淀成一个后面可以继续复用的项目资产了。

接下来，我让它设计 AI Maker Summit 2026 上海站的官网购票页面。

在对话框里选上刚创建好的设计系统，上传购票页面的参考图片，提要求，发送。它理解需求之后就开始执行了。

等了一小会，右侧画布中输出了一个初版，而且可以快速浏览不同终端中的页面效果。

当然，初版肯定还需要调整。

比如返回活动官网按钮和下方 AI Maker Summit 2026 上海之间的距离挨得太近了，顶部活动信息区部分的紫色渐变不好看，还有灰字都太浅了，导致看不清等等。

这里我直接在左侧对话框里统一提出调整要求，让它调整。

除了整体调整，我们也可以在画布中，通过点选对单个元素精准编辑，比如，这里我让 TRAE Work Design 把确认支付按钮的渐变色重新生成调整成纯色。

还可以直接对位置、外观、填充、文本内容、字体、间距等等进行调整。

这个功能对实际设计很有用，因为很多时候问题并不需要整页或者大面积重做，只是某个按钮、文字、间距不合适。

TRAE  Work Design 相当于把自然语言修改和画布级精修融合在了一起。我的经验是，前者适合做方向性调整，后者适合处理具体元素。

经过几次调整后，最后的效果如下：

设计完成之后，可以把设计文件导出为 Figma 或压缩包，交给设计师继续精修。或者直接切到 TRAE Work 的 Code 模式，在设计稿的基础上继续开发。

我们公司的流程是后者。

继续。接下来，开始设计交易系统的管理后台。

因为这是一个老系统，我们之前已经有自己的后台了，所以这次，我就让它在我们后台的基础上，进行补充设计。

第一个 ZIP，就是我们的后端部分代码，后面两张图片是我们想替换的 SaaS 平台的参考截图。

TRAE Work Design 依旧是理解我的需求后，再创建待办，开始跑设计任务。

第一版出来后，我发现我刚才着急，没有说清楚自己的需求，很明显模型理解偏了。页面之间都是独立的。

我就对它提出要求，让它把所有界面打通。

就这样，一个问题一个问题的修复。比如订单详情的关闭按钮交互没做，渠道管理、发票退款、数据分析这几个界面还没设计。

我就把这些需要修改的问题一股脑的一次性发给它。没想到等结果出来的时候，我发现一次就搞成了，真牛逼。

经过几次调整后，最后的效果如下：

到这一步，整个的交易系统从前端到后端的设计就搞定了。

一共用了四个多小时。这活是我们团队的产品经理做的，我跟他一起把过程整理成了教程。

接下来我们可以直接切到 Code 模式，把这个设计稿转成完整的代码。

不需要切换系统，甚至对于我们这样的创业公司而言，一个人就可以在一个工具里，端到端的交付一个需求。

强烈建议大家试一下这个工作方式：不要让产品经理再写长文档了。

文档还是要有的，但就列 123456，把关键信息和逻辑写清楚就够了，不需要冗长。

我几年前做产品经理的时候，一个需求文档写好几页 Word，大家都知道，没人看。

我们现在的流程是，产品经理直接上手把原型页面做出来。需求评审会上，研发和产品对着原型去沟通，效率比对着文档高太多了。

像我们这样的创业公司，中间其实不需要单独的设计环节。

产品经理直接把页面设计出来，而且这个设计不只是演示用的原型，最终可以直接推进到生产环境。

这样整个开发流程缩短很多，产品经理自己也很有成就感。