最近在体验Trae solo模式,发现前端能力真的强,弄了不少有意思的项目。那天正好在看solo坦白局的直播,Trae的设计师讲解了Trae为什么图标会从红色变成绿色。
我突然想到,在ai coding能力越来越强后,各种web、app产品必然会爆发性增加。但对于色彩选择这一块,大部分开发者都没有什么经验,也不了解RGB、HSL等原理。
需求确定:做一个帮助开发者实现配色选择的工具。
我也顺手问了身边的设计师朋友:
第一步:初步提示词
主要功能有以下三点:
一、核心功能:
1.用户可以通过多种方式快速生成一套完整(通常包含主色、辅助色、点缀色、背景色、文本色等)且和谐的配色方案。
2.提供一个丰富的配色方案库,供用户浏览和寻找灵感。
3.用户可以对生成的配色方案进行实时调整,并在预设的UI模板上查看效果。
二、辅助功能
1.帮助用户检查其配色方案是否符合无障碍设计标准,特别是文本和背景色的对比度。
2.用户可以将满意的配色方案保存并以多种格式导出,方便在实际项目中使用。
很快,第一版就完成了;
一开始的版本是常规的顶部导航栏切换的web样式,我觉得作为一个工具类网站,左边工具栏,右边操作界面的布局方式,会更加符合常规的使用习惯。 为了方便理解,我直接找了张参考图,让Trae参考,图文并茂可以很好提高模型理解我们的需求。
最终成果,看起来是不是有模有样的,哈哈solo模式的UI设计设计能力真的不错,我选择左边工具栏,右边操作界面的布局方式,更符合使用习惯
支持基于一个选定色,生成相关配色
同时在模板预览里,也支持查看同个色系在不同类型终端的展示效果
生成符合需要的配色体系后,不需要单独复制,支持根据不同的项目需求直接导出成代码块
支持web无障碍检查
使用solo模式,整个项目全程只花不到30分钟完成了,整个项目的开发中间有不满意的地方,直接截图+简单描述,都能很到位地理解需求并完成修改。
从web开发的成功率和美观度这两个指标看,Trae的solo模式一定是我的第一优先选择。大家可以体验一下,一起分享有意思的case。
#TRAE2.0SOLO出道