[AI coding]用Trae solo模式开发了个配色助手

104 阅读2分钟

最近在体验Trae solo模式,发现前端能力真的强,弄了不少有意思的项目。那天正好在看solo坦白局的直播,Trae的设计师讲解了Trae为什么图标会从红色变成绿色。

我突然想到,在ai coding能力越来越强后,各种web、app产品必然会爆发性增加。但对于色彩选择这一块,大部分开发者都没有什么经验,也不了解RGB、HSL等原理。

需求确定:做一个帮助开发者实现配色选择的工具。

我也顺手问了身边的设计师朋友:

f01794ce084e741de63da4da3dde192a.jpg

第一步:初步提示词

主要功能有以下三点:

一、核心功能:

1.用户可以通过多种方式快速生成一套完整(通常包含主色、辅助色、点缀色、背景色、文本色等)且和谐的配色方案。

2.提供一个丰富的配色方案库,供用户浏览和寻找灵感。

3.用户可以对生成的配色方案进行实时调整,并在预设的UI模板上查看效果。  

二、辅助功能

1.帮助用户检查其配色方案是否符合无障碍设计标准,特别是文本和背景色的对比度。

2.用户可以将满意的配色方案保存并以多种格式导出,方便在实际项目中使用。

 很快,第一版就完成了;

screencapture-localhost-5173-2025-08-04-01_17_15.png

  一开始的版本是常规的顶部导航栏切换的web样式,我觉得作为一个工具类网站,左边工具栏,右边操作界面的布局方式,会更加符合常规的使用习惯。 为了方便理解,我直接找了张参考图,让Trae参考,图文并茂可以很好提高模型理解我们的需求。

img_v3_02os_300e8a50-5f1c-4cd3-b1a4-0905aa9c0f9g.jpg

最终成果,看起来是不是有模有样的,哈哈solo模式的UI设计设计能力真的不错,我选择左边工具栏,右边操作界面的布局方式,更符合使用习惯

1.gif

支持基于一个选定色,生成相关配色

3.gif

同时在模板预览里,也支持查看同个色系在不同类型终端的展示效果

2.gif

生成符合需要的配色体系后,不需要单独复制,支持根据不同的项目需求直接导出成代码块

4.gif  

支持web无障碍检查

wechat_2025-08-04_012027_299.png

使用solo模式,整个项目全程只花不到30分钟完成了,整个项目的开发中间有不满意的地方,直接截图+简单描述,都能很到位地理解需求并完成修改。

​从web开发的成功率和美观度这两个指标看,Trae的solo模式一定是我的第一优先选择。大家可以体验一下,一起分享有意思的case。

#TRAE2.0SOLO出道