第一次在 Trae 里接入 Pencil MCP，我以为就是“填个配置、重启就能用”。结果卡了半天：AI 能读文件却不能写、截图一直失败、Pencil 节点更新后界面没变化。最后才发现问题根本不在代码，而是 MCP 权限、路径和能力声明 没对齐。
如果你也准备让 AI 直接生成/修改 .pen 文件，这篇就是你要的。
1. 先做一件最关键的事：确认你的“可写路径”
Pencil MCP 不会随便动你的项目，它只会写你显式授权的目录。如果 root 路径写错，AI 只会“成功地失败”。
建议先在项目内创建一个统一目录，例如：
d:\code\Cycling\designs
之后所有 .pen 都集中放这里，路径清晰、权限清晰、排查更快。
2. 在 Trae 中配置 Pencil MCP（核心配置）
- 进入 Trae->扩展 Pencil
- 由于Pencil并未默认支持trae，需手动配置MCP 步骤如下
- 配置json
{
"mcpServers": {
"pencil": {
//上图用户目录下
"command": "C:/Users/Admin/.trae/extensions/highagency.pencildev-0.6.22-universal/out/mcp-server-windows-x64.exe",
"args": [
"--app",
"trae"
],
"env": {}
}
}
}
- 配置成功如图所示
5.新增智能体
- 测试
3. 立刻验证：一条指令生成界面
在 Trae 里对助手说一句话测试：
创建一个 Markdown 编辑器：左侧目录 280px，右侧 editor/preview 1:1，顶部工具栏，预览区右描边 #E2E8F0。
期望结果：
- 生成或更新
.pen文件 - 自动截图
- 界面符合分栏布局
若截图没有生成，优先检查：
- 是否开启 screenshotOnWrite
- 是否写进了
designs目录
4. Pencil MCP 的核心能力到底是什么？
一句话总结：让 AI 能“安全地”读写 UI 描述文件，并把 UI 变成可验证的视觉产物。
Pencil MCP 常用能力：
- 读写
.pen文件 - 批量设计操作（创建、更新、移动节点）
- 自动截图校验
- 结构化的 UI 布局参数控制（layout / gap / padding / stroke / fills）
5. 真实踩坑清单（不要再走弯路）
图标名错误：
- Lucide 没有
edit-3，用pencil more-horizontal用ellipsis
布局不生效：
.pen用的是布局引擎，不该强塞 x/y 绝对坐标- 只用
layout + gap + padding驱动结构
批量操作报无效 ID：
- 先创建再更新，批量操作顺序错误会直接失败
6. 用 Pencil MCP 的正确姿势（效率翻倍）
你和 AI 的沟通建议像这样：
错误指令：
- 把这里好看一点
正确指令：
- 侧边栏添加新建按钮，颜色 #007AFF，圆角 6px，hover 阴影
- 预览区增加右侧描边 1px #E2E8F0
- 工具栏 icon 改为 Lucide 的 bold/italic/link
你越具体，AI 越稳定。Pencil MCP 擅长处理“结构与样式”，不是帮你猜审美。
7. 最后的最佳实践清单
- 统一
.pen目录，别让 AI 写到项目根 - 配置截图能力，方便 UI 校验
- 尽量用 layout 驱动布局
- 图标统一 Lucide 名称
- 改完立即让 AI 截图，减少盲改
总结
Pencil MCP 不是“一个配置项”，而是一条让 AI 具备 UI 操作能力的通路。
一旦配置正确，你就能像写需求一样写界面：
一句话 → 自动结构 → 自动布局 → 自动截图验证。
从此不再用手对齐，也不需要一堆无效的像素拖拽。
