Trae实测：开源baoyu-design这个UI设计Skill到底能不能用？完整教程来了

昨天发布了一篇文章：

《没有专职 UI 设计师？这个开源 Skill 让普通人自己搞定 UI，快进来拿》

没想到评论区很多朋友都在问：

“这个 Skill 能不能放到 Trae 里面用？”

“Cursor 可以，那国产 AI IDE 支持吗？”

“有没有实际安装教程？”

既然大家都关心，我直接拿 Trae 实测了一遍。

结论先说：

可以用，而且安装过程比想象中简单。

不过，它和 Cursor、Claude Code 这类工具的使用方式略有区别，今天把完整过程记录下来，方便大家直接照着操作。

一、先认识一下：这个 Skill 到底是什么？

这次测试使用的是开源项目：

baoyu-design

它本质上不是一个普通插件，而是一套给 AI Agent 使用的「设计能力扩展」。

简单理解：

以前：

你告诉 AI：“帮我做一张文章封面”

AI 可能只能生成一个普通图片。

安装 Skill 后：

AI 会按照设计规范，主动考虑布局、字体、颜色、视觉层级，然后生成更接近专业设计稿的作品。

它可以帮助完成：

• 公众号文章封面
• 产品宣传图
• PPT 页面设计
• Web 页面视觉方案
• 海报设计
• UI 原型设计

最大的价值：

没有 UI 设计经验的人，也能让 AI 帮你完成一套设计流程。

二、Trae 能不能安装？

答案：

✅ 可以。

这次测试环境：

• AI 编程工具：Trae
• Skill 项目：baoyu-design
• 系统：Windows
• 使用方式：Agent 模式

整个流程：

1. 在 Trae 中打开 Agent
2. 输入安装需求
3. AI 自动拉取 GitHub 项目
4. 自动安装依赖
5. 自动加载 Skill
6. 直接开始设计

三、第一步：让 Trae 克隆项目

打开 Trae。

进入 Agent 对话窗口。

直接输入：

帮我安装这个仓库：
https://github.com/jimliu/baoyu-design

Trae 会自动执行：

git clone https://github.com/jimliu/baoyu-design.git

效果如下：

可以看到，它会自动完成仓库下载。

四、第二步：等待自动安装依赖

项目下载完成后，Trae 会继续处理环境。
这一步不用手动操作，它会自动：

检查项目结构
安装依赖
构建项目

测试过程中，Trae 自动完成：

gen-pptx
gen-video

两个相关依赖安装。
最终显示如图:

五、第三步：让 Trae 加载设计能力

安装完成后，我随便给它一个命题小作文，看看效果，直接恶心它一下，用昨天的文章标题。

六、重点来了：看它的运行流程设计

接下来它会像设计师一样询问。

1. 尺寸选择它会询问：
   
2. 风格选择它会继续询问：
   
3. 方案数量选择然后选择：
   

最后问你还有什么需要补充的信息，可不填，直接下一步.

七、最终生成效果怎么样？

测试过程中，Trae 最终生成了3 套文章封面方案。
方案一：深蓝科技风特点：

方案二：现代简约风特点：

方案三：活力撞色风特点：

八、和 Cursor 使用有什么区别？简单对比：

如果你已经在使用 Trae：

完全没有必要为了 Skill 换工具。

九、几个实际使用建议

1. 不要只让 AI “画图”
   正确流程：

需求 → 风格 → 方案 → 生成

而不是：

“帮我设计一个。”

2. 文章封面建议选择多个方案
   AI设计最大的优势：

不是一次生成完美作品。

而是：

快速生成几十个方向。

3. 给 AI 更多业务背景
   比如不要说：
   做一个科技封面
   改成：
   这是一篇面向普通职场人的 AI 工具教程，希望降低学习门槛，提高点击率。

效果会明显提升。

十、总结

Trae 用户可以放心用了这次实际测试结果：
✅ baoyu-design 可以安装到 Trae
✅ Skill 可以正常加载
✅ 可以完成文章封面设计
✅ 普通用户无需懂 UI
✅ 效果已经接近专业设计水平

如果你之前因为：
不懂设计
不知道怎么做 UI
不想学习 Photoshop
而放弃设计工作。
现在 AI Agent + Skill 的组合，正在改变这个过程。
未来可能真的会出现：

不需要专业设计软件，也不需要专业设计师，一个 AI Agent 就能完成大部分视觉工作。