< img id="wx_img" src="https://www.qbitai.com/wp-content/uploads/imgs/qbitai-logo-1.png" width="400" height="400">
从需求到设计到代码，一个软件全搞定！TRAE Work Design实测来了
量子位 | 公众号 QbitAI
TRAE Work上新了一个
之前TRAE Work已经有Work模式聊需求、Code模式写代码，现在补上了Design——
需求→设计→代码，全链路在一个平台里跑通了。
这次的设计模式也不只是「AI帮你画张图」那么简单，咱先稍微捋一下它能干的事儿：
你手头有Figma文件的话，丢进去，它能直接帮你把
扒出来，品牌色、字体、组件这些全都能识别提取；
生成设计稿之后，想要改哪里，
方案调整到位之后，还能一键导到Figma精修，或者直接跳到Code模式写代码落地。
而且最舒服的是，前面Work模式聊的需求它全都能复用，切到Design模式直接干活（拿来吧你.jpg） 。
好好好，咱直接实测走起，看看到底能不能打！！
在上手之前先吐个槽啊。
这一年多AI设计工具出了不少，v0、Bolt、Galileo一圈轮下来，感受都差不多：出图是真好看，用起来是真头疼——
AI压根不认识你的设计系统。
你让它出个官网首页，它自己挑配色、自己选字号、自己决定按钮长啥样，效果出来倒是挺精美的，但把自己的品牌规范拿出来一看，哪哪都不对……好图根本没法直接用。
这也就导致目前大部分AI设计工具，顶多只能出份初稿Demo用来演示沟通，很难深度落地到正式的专业设计流程中。
改图就更折磨了，早期大多数工具只能通过重绘整张图迭代效果，如今虽然普遍上线选区编辑功能，但精准度还是很难把控，设计师们和AI的沟通成本仍然居高不下（doge）。
所以我对TRAE Work Design模式最好奇的就俩事：出图能不能合规？改图能不能精准？
那就先来试试我最期待的
Design Library
解析Figma、导入设计规范、风格探索
我先把一份准备好的Figma文件丢了进去。
TRAE Work嚼了三十来分钟之后，把里面的主题色板、字体层级、按钮卡片输入框这些组件样式全扒了出来，自动生成了一套Design Library。
视频地址：https://mp.weixin.qq.com/s/HzyktaWgXkDaURHg1fJjew
虽然感觉这个分析创建过程有一丢丢慢，但由于给的文件是Google官方的Material Design Android UI Kit，超级复杂的那种，而且识别效果确实还不错，算是慢工出细活吧～
然后我试了一个比较细的玩法，Library里每个组件旁边都有个「添加到对话」按钮，可以把某个具体组件丢进对话当参考。
我把Kit里的Guide组件扔了进去：
用这个风格作为页面头部，帮我设计一个音乐App首页，下面放今日推荐歌单横滑卡片、最近播放列表、底部Tab导航栏。
设计稿出来之后我只想说，这是真“规矩”。
手头没有Figma文件的小白同学也不用急，Design模式有个自由探索功能，内置了几套品牌设计系统。
或者你可以跟TRAE Work聊聊你想要什么感觉，它会追问几个细节帮你定方向，然后从零生成一套设计系统，后面出的图就会全部自动统一风格。
有系统的导入，没系统的帮你建，AI出图终于不是开盲盒了！！
Design模式给了三种编辑方式，可以
对话调整、框选编辑、面板直接调数值
对话比较适合改大方向，比如：
把背景换成浅蓝色、把今日推荐的卡片尺寸放大，改成两列大图布局。
鼠标圈改微调就跟飞书文档留评论差不多，悬停到某个元素上，圈出来，在对话框里写修改意见。
这次我圈选了一行文字，让TRAE帮我在文字外加一个椭圆形边框，字体颜色改为深绿色。
甚至你还能修改一整块区域，比如咱把刚才调成两列的「今日推荐」模块再改成一行。
面板操作就是微微微调了，要什么参数直接滑就行。
这Design用着是真丝滑～
一个平台跑通需求→设计→代码
出图合规了、改图顺手了，咱接下来要考虑的就是它
以前做设计，可能要有需求在文档里写、设计在Figma里搞、代码在IDE里敲，三项工作三个工具。
而且就算单个环节已经有AI帮忙，但每切一次工具就免不了有丢上下文的风险。
于是TRAE Work：既然切工具会丢上下文，那就别切了——
Work、Design、Code三种模式在同一个平台里把全流程包揽了。
里说我要做个咖啡品牌官网。