在 Trae 中集成 Pencil MCP

评论

第一步，在 Trae 里安装 Pencil 插件。

打开 Trae，到插件商店搜索 Pencil，安装。

安装好后，这里会多个铅笔的小图标，这就是启动 Pencil 服务的按钮。

第二步，手动配置 Pencil MCP。

在已安装的插件里找到 Pencil，点设置 -> 扩展设置：

在打开的设置页面里，我们可以看到，在装 Pencil 插件的时候，它已经悄悄的把自己默认支持的 AI IDE 都配置好了 MCP。

我们随便找一个，直接看它里面的内容，然后把它直接复制出来：

1
cat ~/.gemini/settings.json

再手动往 Trae 里加，就可以了。

第三步，在 Trae 里调用 Pencil MCP 进行界面设计。

我的提示词是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/plan 使用 pencil mcp在当前活跃的画布上，帮我设计以下应用的UI:

我想做一个配料表翻译官的小程序，它是一个可以用户快速理解食品配料表的AI工具，通过图像识别和成分分析，可以将专业的食品化学术词语转化为通俗易懂的语言，让用户能够轻松了解里面的真实营养成分和健康影响。要求全中文界面。

这个应用的主要页面和核心功能说明如下:

1、首页(拍摄/上传页面)核心功能:作为应用入口，提供拍摄和上传功能，引导用户开始使用

2、识别结果页面

核心功能:展示识别的原始文本和初步分析结果，提供重新识别和继续分析选项

3、分析结果页面核心功能:展示详细的成分分析和健康评估，包括健康评分、成分翻译、营养成分表和健康建议

4、结果分享页面

核心功能:提供多种分享方式，支持自定义分享文案和生成分享图片

用户的大致操作流程是:

打开应用>首页>拍摄/上传图片>系统进行识别>识别结果页面>系统进行成分分析分析结果页面结果分享页

文献参考

Trae + Pencil MCP：我的 AI 编程范式“新王”诞生！上次做小程序花了 3 小时，这次 2 小时搞定，关键还免费