Trae cn里使用Pencil来制作设计图的手把手教程

1. 前言

Pencil是什么？它不是独立软件，是 VS Code / Trae / Cursor / IDEA 的一个插件 。它的定位是代理驱动的 MCP 画布，在写代码的地方直接做设计，做完直接出代码，不使用 Figma，蓝湖，MasterGo。设计稿存在 .pen 文件里（JSON），跟代码一起 Git 管理。打开就是一个 无限矢量画布 ，通过 MCP 让 AI 能精确读取设计并生成代码。

它可以做到，AI 自然语言生成 UI，比如：

输入：做一个APP登录页，含手机号/验证码/登录按钮，配色自然清新，要有立体感和视觉深度
输出：AI 直接在画布生成一个完整的界面设计稿，可框选界面，继续使用语言修改

也可以从从 Figma 复制图层 → 直接粘贴到 Pencil 画布，样式无损。

2. 安装

首先打开Trae cn，点击左侧扩展，在搜索栏里搜索Pencil，点击第一个，安装。

安装好了后，点击最左侧边栏的Pencil图标，前往注册/登录，登录账号。

3. 配置MCP

不知道是Trae cn没有默认支持Pencil，还是Pencil没默认支持Trae cn。所以需要手动来配置MCP，步骤如下：

点击右上角的设置图标，在打开的设置页中，点击MCP选项

在MCP里，点击手动配置

在弹出的弹窗里，填写你的mcp-server-windows-x64.exe地址，一般是在你的用户Administrator文件夹里，可以全局搜一下

具体配置请复制：

json 复制代码

{
  "mcpServers": {
    "pencil": {
      "command": "C:/Users/Administrator/.trae-cn/extensions/highagency.pencildev-0.6.49-universal/out/mcp-server-windows-x64.exe",
      "args": [
        "--app",
        "trae_cn"
      ],
      "env": {}
    }
  }
}

请把地址更换为你的地址后，保存即可。

注意，图片上cwd的值，是配置完成后MCP自动启动后生成的，不需要配。如果一直启动失败，请检查一下，command的地址和cwd的地址，在out前面要一致。

4. 配置智能体

点击右上角的设置图标，在打开的设置页中，点击智能体选项

在弹出的页面中，选择智能生成，关键词如下：

js 复制代码

你是Pencil专属智能体，能精准解析用户文字需求，自动转化为Pencil画布可执行设计指令。 风格专业简洁，优先输出页面结构、布局方案、组件排布、视觉规范，条理清晰附带实操思路，高效完成文字需求转UI界面设计，严守规范，输出干净实用。

智能生成后，不喜欢名字可以改一下名称，没问题直接点创建。

5. 使用

上面步骤都完成后，点击输入框，输入@，此时会弹出选择框，选择你的Pencil智能体，然后就可以愉快的驱使Pencil了。

下面是一些输入示例：

❌❌❌错误示范

把这里改好看一点
把这里的按钮改大一点
设计一个XXX类型的App

✅✅✅正确示范

请在Pencil中新建一个空白设计文件，开始设计一款移动端聊天交友APP界面。先设计登录，首页，我的，三个页面。要求整体采用简约清新风格，先搭建整体页面框架，再依次完成页面布局、组件排布、色彩搭配与基础样式设定。Tabbar栏需要采用苹果iOS 26的风格。
选中XX位置的XX按钮，改成悬浮按钮，修改【属性1】为XX，修改【属性2】为XX
新建Pencil空白项目，从零设计一款记账APP界面，采用430x800的画布尺寸。整体使用暖色调，温馨卡通风格，简约设计，主次分明，包含登录，主页，报表，我的。

注意，AI是个盲盒，上限极高，下限极低 。你描述越具体，AI 表现越稳定。Pencil MCP 擅长处理结构与样式，模糊的描述往往不能符合你的预期。

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章