#️TRAE技巧便利店
先吐槽：以前调 UI 有多痛苦
做前端的同学应该都懂——UI 微调简直是 token 杀手。
我正在做一个叫 DramaGIF（抓马动图）的表情包生成工具，之前一直用 Work + Code 模式开发。功能实现都挺快，但一到 UI 调整就开始"对口述描述能力的终极考验"：
- “这个按钮能不能再大一点？不对，太大了，再小一点。哎还是刚才那个大小吧……”
- “背景换个颜色，要那种……嗯……高级感的紫，不是死亡芭比粉……算了换回白色吧”
- “间距调一下，太挤了，再松一点，太松了，中间值……”
一天 50 次对话，30 次都是在干这个。
最气人的是什么？你费了半天口舌描述，它给你改完了，运行起来一看——还是不对味儿。要么太朴素像个后台系统，要么太花哨像个营销落地页，总之就是"差点意思"。
举个例子，就这个「共享素材画廊」展开区域：
（这里放之前的丑截图）
我跟 Work 模式说"美化一下这个展开区域"，它给我加了个虚线边框就完事了。然后我又花了 5 轮对话调整间距、颜色、按钮样式……最后还是觉得小家子气，不够看。
转机：Design 模式初体验，抱着试试的心态
之前 Design 模式出来的时候我没太当回事，觉得"做网页还是得写代码，Design 模式不就是画个原型吗"。
直到那天我又在跟一个 UI 细节死磕，突然想起来——要不试试 Design 模式？就当抽卡了，不好看再改回去。
于是我切到 Design 模式，给了它一个很模糊的需求：
“给我这个项目版本优化一下ui，共享素材画廊哪里不太好看”
就这么一句话，我都没抱太大期望。
结果……
（美化后）
我去？？？这还是同一个区域吗？？？
于是我切回 Code 模式，给了它一个很模糊的需求：
“把这里共享素材画廊替换成我给你的大气的那张图”
就这么一句话。
（搬运替换后……）
效果对比：前后差距有多大
我直接上对比图你们感受一下：
（因为我提示较模糊，出现过的黑色也很好看——口述应该很难说出这种感觉吧）
最后
以前我觉得 Design 模式是"给设计师用的工具"，跟我们写代码的没关系。现在发现——正因为我们不是设计师，才更需要 Design 模式。
它不是替代 Code 模式，而是补上了我们的短板：审美和视觉表达。
与其花 10 轮对话跟 AI 描述"我想要的那种感觉"，不如切到 Design 模式让它直接出方案，不满意就换，快得很。
强烈推荐大家试试，回来你会回来感谢我的 
我的项目： DramaGIF（抓马动图）- 一个 AI 表情包生成工具（还要完善中），欢迎来玩
现在用到的模式组合： Design + Code + Work
效率提升： 感慨，UI 相关工作要是一开始用Design得省了约 70% 的时间和 token