安装Pencil插件
首先打开TRAE扩展，搜索Pencil插件并安装
如果搜索不到，尝试搜索pen寻找，此bug已反馈 关于TRAE IDE插件搜索Pencil的bug问题
安装成功后重启TRAE，启动Pencil插件
注册登陆
重启TRAE后会首次弹出登陆界面，根据指引注册登陆即可(我这边因已经登陆所以没有弹出页面)
添加MCP
进入TRAE设置 → MCP → 添加：手动配置
在配置框中输出以下json(注意配置json中有两个需要替换的内容，具体内容接着向下看！！！)：
{
"mcpServers": {
"pencildev-server": {
"command": "替换A",
"args": [
"--app",
"trae_cn"
],
"cwd": "替换B",
"env": {
"NODE_ENV": "production",
"PATH": "%PATH%;替换B"
}
}
}
}
重要内容！！！！！！！！！！！！！！！
根据实际情况替换上述json配置中的两处替换A/B
找到Pencil插件安装目录，最简单方式就是进入TRAE安装插件处，点击已经安装的Pencil插件进入详情页，点击图示位置打开本地插件安装位置
进入out文件夹，找到
mcp-server-windows-x64.exe程序
复制当前整体路径(Windows系统直接点击文件夹上方导航栏即可，mac或其他系统自行处理)
当前路径即为替换B内容，但是需要转义\字符，即需要在该路径的所有\字符处额外添加另一个\字符
例如：
C:\\Users\\用户名\\.trae-cn\\extensions\\highagency.pencildev-0.6.43-universal\\out在当前路径结尾加上
mcp-server-windows-x64.exe即为替换A路径例如：
C:\\Users\\用户名\\.trae-cn\\extensions\\highagency.pencildev-0.6.43-universal\\out\\mcp-server-windows-x64.exe
完整示例：
{
"mcpServers": {
"pencildev-server": {
"command": "C:\\Users\\用户名\\.trae-cn\\extensions\\highagency.pencildev-0.6.43-universal\\out\\mcp-server-windows-x64.exe",
"args": [
"--app",
"trae_cn"
],
"cwd": "C:\\Users\\用户名\\.trae-cn\\extensions\\highagency.pencildev-0.6.43-universal\\out",
"env": {
"NODE_ENV": "production",
"PATH": "%PATH%;C:\\Users\\用户名\\.trae-cn\\extensions\\highagency.pencildev-0.6.43-universal\\out"
}
}
}
}
将上述json配置好后点击确认添加MCP服务
AI对话使用Pencil设计UI
在SOLO模式下输入提示词设计UI界面(一般情况下需要指定使用Pencil设计...)
效果示例(真实案例，耗时大概30min)：
提示词仅一句：使用Pencil设计一个商城小程序UI界面
如果扩充可能效果会更加精美
注意：你在使用时可能会出现我上面的失败情况，大概率是因为没有打开pencil文档，无需搭理，TRAE会主动重新打开启动任务！
保存设计文件
当UI设计任务完成后(可以根据需求进行二次修改，直到满意之后再保存文件)，保存pen设计文件，在pen文件中按ctrl+S保存，选择合适的保存位置和文件名称。
后续设计
完成pen文件保存之后，可以利用TRAE根据设计好的pen文件复刻UI界面，提示词举例：
注意：提示词越精准越复刻优质，我这里只是为了演示，缩短时间！！！
前端代码复刻效果还可以，至此这篇教程到此结束了，本教程重心在如何利用TRAE配置Pencil插件+MCP服务，如果你会Pencil那么将会用的比我好~
至是，工程已闭，言尽于此~
希望各位喜欢~
，我用GLM-5.1排到9000多名去 
问题分析
解决方案