Pencil 插件完整教程:从安装到配置,手把手教你用 AI 生成 UI

扩展市场安装 → 找到插件路径 → 配置 MCP → 对话生成设计图

📌 本文适用人群：第一次使用 Pencil 插件的新手，不知道如何安装和配置。按照本文步骤，10 分钟内完成从安装到生成第一个设计图。

一、完整流程概览

使用 Pencil 插件的完整流程分为 4 步：

1在插件市场安装 Pencil

打开 Cursor/Trae 的插件市场，搜索并安装 Pencil 插件

2找到插件安装路径

获取 Pencil MCP Server 的 .exe 文件完整路径

3配置 MCP

在 .mcp.json 中填入插件路径，完成配置

4对话生成设计图

在 AI 聊天窗口用自然语言描述需求，自动生成 UI

二、第一步：在插件市场安装 Pencil

搜索 Pencil 插件

在插件市场的搜索框中输入：

pencil

安装完成之后会出现一个pencli功能选项，点击pencli会出现一个画布页面，会先提示你登录

三、第二步：找到 Pencil 插件的安装路径（关键！）

这一步最重要，我们需要找到 Pencil MCP Server 的 .exe 文件位置。

3.1 Windows 系统查找方法

通过 Trae 扩展目录查找（推荐）

打开文件资源管理器在地址栏输入以下路径（根据你的用户名修改）：C:\Users\你的用户名\.trae\extensions\在这个目录下，找到包含 pencil的文件夹完整路径示例：C:\Users\xxx\.trae\extensions\highagency.pencildev-0.6.36-universal\out\mcp-server-windows-x64.exe

💡 重要提示：

版本号（如 0.6.36）可能会不同，以你实际安装的版本为准
路径中的用户名要换成你自己的
复制完整路径时，确保没有多余的空格

四、第三步：配置 MCP

以trae为例，点击设置 ->MCP->手动添加（复制粘贴下面内容，以你实际文件路径为准）

{  "mcpServers": {    "pencil": {      "command": "C:\\Users\\xxxx\\.trae\\extensions\\highagency.pencildev-0.6.36-universal\\out\\mcp-server-windows-x64.exe",      "args": [        "--app",        "trae"      ],      "env": {}    }  }}

4.3 配置项详解

字段	说明	是否需要修改
`command`	Pencil MCP Server 的完整路径	必须修改，换成你的实际路径
`args`	启动参数	Trae 用 `"trae"`，Cursor 用 `"cursor"`
`env`	环境变量	一般留空 `{}` 即可

4.4 Windows 路径注意事项

⚠️ 路径格式很重要！

Windows 路径中的反斜杠 \ 需要双写： C:\\Users\\...
或者使用正斜杠 /： C:/Users/...
路径不能有空格或特殊字符（如有，用引号包裹）

正确的路径格式示例：

// 方式一：双反斜杠（推荐）"command": "C:\\Users\\xxx\\.trae\\extensions\\highagency.pencildev-0.6.36-universal\\out\\mcp-server-windows-x64.exe"// 方式二：正斜杠"command": "C:/Users/xxx/.trae/extensions/highagency.pencildev-0.6.36-universal/out/mcp-server-windows-x64.exe"

4.5 保存并验证

点击确认后，等它加载MCP

五、第四步：对话生成设计图

配置完成后，就可以开始使用 Pencil 生成 UI 设计图了。

5.1 打开 AI 聊天窗口

在 Trae/Cursor 中，打开聊天窗口。

5.2 描述你的需求

使用pencil 帮我设计一个个人博客首页，要求：1. 顶部有导航栏（首页、文章、关于我、联系）2. 中间是文章列表，每篇文章显示标题、摘要、发布日期3. 右侧有个人简介和标签云4. 底部有版权信息5. 整体风格简洁现代，主色调用蓝色

5.4 等待生成设计图

发送后，在pencli功能窗口中生成设计图

5.5 调整设计（可选）

如果设计图有不满意的地方，直接告诉 Pencil 怎么改：

把导航栏改成深色背景，文章卡片加一点阴影

Pencil 会重新生成设计图，直到你满意为止。

5.6 生成代码

设计图确认后，让 AI 根据设计图生成代码：

按照 Pencil 生成的设计图，用 React + Tailwind CSS 生成代码，要响应式布局

六、常用提示词模板

下面是几个常用的提示词模板，可以直接套用：

📱 移动端登录页

@pencil 设计一个移动端优先的登录页面，竖屏布局，大按钮，方便手指点击，支持微信/谷歌一键登录

🛒 电商产品页

@pencil 设计一个电商产品详情页，左侧产品大图（支持缩放），右侧价格和购买按钮，下方是产品描述和用户评价，整体风格高端大气

📊 数据仪表盘

@pencil 设计一个数据仪表盘，顶部 4 个数据卡片（用户数、销售额、订单数、转化率），中间是折线图和柱状图，右侧是实时通知列表，深色主题

📝 表单页面

@pencil 设计一个用户注册表单，包含姓名、邮箱、密码、确认密码，要有表单验证提示，提交按钮放在底部居中

🏠 企业官网首页

@pencil 设计一个企业官网首页，顶部公司 Logo 和导航，首屏大标题 + CTA 按钮，下面是服务介绍（3 列卡片），再下面是客户案例，底部联系方式和版权信息

七、常见问题

Q1: 找不到 .trae 或 .cursor 文件夹怎么办？

A: 这些是隐藏文件夹，需要显示隐藏文件：

打开文件资源管理器
点击顶部菜单的查看
勾选 隐藏的项目
然后再进入 C:\Users\你的用户名 查找

Q2: 配置后 @pencil 没有反应？

A: 检查以下几点：

确认 .mcp.json 文件路径正确（在项目根目录或用户主目录）
确认 JSON 格式正确（可以用 JSON 验证工具检查）
确认 command 路径中的 .exe 文件确实存在
重启 Trae/Cursor 试试

Q3: 路径中有空格怎么办？

A: 用引号包裹整个路径：

"command": "\"C:\\Program Files\\Trae\\extensions\\...\\mcp-server.exe\""

Q4: 设计图生成太慢？

A: 正常需要 30 秒到 1 分钟。如果超过 2 分钟，可能是网络问题或服务器繁忙，可以稍后再试。

Q5: 支持中文吗？

A: 支持！你可以用中文描述需求，生成的设计图中的文字也会是中文。

Q6: 生成的代码能直接运行吗？

A: 大部分情况下可以。Pencil 生成的代码是标准的前端代码（React/Vue/HTML）

八、总结

用 Pencil 插件开发页面的完整流程：

安装插件
- 在插件市场搜索 Pencil 并安装
找到路径
- 在 .trae/.cursor/extensions 中找到插件的 .exe 文件路径
配置 MCP
- 在 .mcp.json 中填入插件路径
对话生成
- 聊天窗口输入 @pencil + 文字描述
调整优化
- 不满意直接说怎么改
生成代码
- 确认后让 AI 按设计图写代码

🎯 核心思想：动嘴不动手。你负责描述想要什么，Pencil 负责画出来，AI 负责写代码。

📌 关键步骤回顾：

插件路径一定要找对，这是配置成功的关键
Windows 路径的反斜杠要双写，或者用正斜杠
配置后记得重启 Trae/Cursor
第一次使用建议从简单的页面开始，熟悉流程后再做复杂的

如果觉得这篇文章有帮助，欢迎转发给正在为设计发愁的朋友。

我是小助手，一个喜欢折腾 AI 工具的开发者。关注我，获取更多 AI Coding 实战技巧。

本文适用工具：Cursor、Trae 等支持 MCP 协议的 AI 编程工具