1. 为什么要在 Trae 里把 Pencil 和 Figma 串起来如果你平时在 VS Code 或 Trae 里写前端大概率遇到过这种割裂设计稿在 Figma代码在编辑器中间靠截图、标注、口头描述来回传。改一版样式设计师发链接你切窗口量间距再回来改 CSS一天下来光切窗口就够呛。Pencil 这个插件解决的就是这段路。它不是独立软件而是挂在 VS Code / Trae / Cursor / IDEA 里的一个 MCP 画布插件设计稿存成.pen文件本质是 JSON能跟代码一起进 Git。你可以在写代码的地方直接画界面也可以把 Figma 的图层粘进来继续改改完让 AI 读画布生成代码。但这里有个前提Pencil 的 AI 能力要走 MCP 通道而 MCP 背后得有一个稳定的模型接入点。Trae 自带的模型通道有时候在长上下文设计任务里会断或者切模型很麻烦。我实测下来用 TaoToken 做统一 Key/API 通道把 Pencil 的 MCP 请求统一收口配置一次后面就不用反复改。这篇就按「装插件 → 配 MCP → 配智能体 → 跑通验证 → Figma 迁移 → 排错」的顺序走一遍配置骨架可以直接复制。适合已经在用 Trae 或 VS Code、想把手动量设计稿的活交给 AI 的前端同学。2. 前置准备TaoToken 通道与 Trae 环境先说清楚 TaoToken 在这条链路里的位置。Pencil 的 MCP Server 负责读画布、执行设计指令但它自己不带模型模型请求要发到一个兼容的 API 端点。TaoToken 提供的就是这个统一入口一个 Key 可以走不同模型省得在 Trae、Pencil、其他插件里各配一套。你需要准备三样东西第一Trae CN 或 VS Code 本体版本不要太旧MCP 配置入口在设置里能找到。第二Pencil 插件。打开 Trae点左侧扩展图标搜索Pencil认准发布者是 highagency 的那个点安装。装完左侧边栏会出现 Pencil 图标点进去注册/登录账号。第三TaoToken 的 API Key。到控制台创建一个地址是https://taotoken.net/api-keys创建后复制保存后面配置里要用。注意 Key 只显示一次丢了就重建。提示TaoToken 官网入口是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content控制台和文档都在这个域名下别在搜索引擎里点奇怪的镜像站。环境确认清单项目要求检查方式Trae / VS Code支持 MCP 配置设置里能看到 MCP 选项Pencil 插件已安装并登录侧边栏有 Pencil 图标TaoToken Key已创建控制台 api-keys 页面可见系统Windows x64 为主决定 mcp-server 可执行文件路径这里有个容易忽略的点Pencil 的 MCP Server 是一个本地可执行文件Trae 通过command字段去启动它。所以配置里那个路径必须指向你机器上真实存在的 exe不能照抄别人的用户名。3. 可复制配置MCP 与 settings 骨架3.1 找到 mcp-server 可执行文件Pencil 装完后MCP Server 的 exe 一般在扩展目录下。Windows 上典型路径长这样C:/Users/Administrator/.trae-cn/extensions/highagency.pencildev-0.6.49-universal/out/mcp-server-windows-x64.exe版本号0.6.49会随插件更新变化Administrator要换成你自己的用户名。最稳的办法是在文件管理器里全局搜mcp-server-windows-x64.exe搜到后复制完整路径。3.2 在 Trae 里手动配置 MCP点右上角设置图标进设置页找到 MCP 选项点「手动配置」把下面这段贴进去{ 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: {} } } }把command换成你自己的路径保存。args里的trae_cn表示目标是 Trae CN 客户端如果你用的是 VS Code这里要按插件文档改成对应标识。注意配置完成后 MCP 会自动启动界面上会生成一个cwd值那个不需要你手填。如果一直启动失败重点检查command的路径和自动生成的cwd在out这一段是否一致不一致说明指向了错误的扩展版本目录。3.3 把模型通道指向 TaoTokenPencil 的 MCP 负责画布操作模型请求走 Trae 的模型配置。在 Trae 的模型设置里把 API 端点填成 TaoToken 的地址https://taotoken.net/apiKey 填你在控制台创建的那串。如果你更习惯用配置文件管理可以在项目根目录放一个config.toml做本地记录注意别把 Key 提交到 Git[provider] name taotoken base_url https://taotoken.net/api api_key sk-你的Key model claude-sonnet [mcp.pencil] command C:/Users/你的用户名/.trae-cn/extensions/highagency.pencildev-0.6.49-universal/out/mcp-server-windows-x64.exe args [--app, trae_cn]这个config.toml是给你自己对照用的骨架实际生效的还是 Trae 设置页里的 MCP 配置和模型配置。把两者对齐Key 只填一处避免多插件各配一套导致请求打到不同地方。4. 配置智能体并验证请求跑通4.1 创建 Pencil 专属智能体MCP 通了之后AI 还需要一个「角色」来理解设计任务。点设置里的「智能体」选项选「智能生成」把下面这段关键词贴进去你是Pencil专属智能体能精准解析用户文字需求自动转化为Pencil画布可执行设计指令。 风格专业简洁优先输出页面结构、布局方案、组件排布、视觉规范条理清晰附带实操思路 高效完成文字需求转UI界面设计严守规范输出干净实用。生成后可以改个顺眼的名字比如Pencil-Designer点创建。4.2 验证 MCP 是否真的连上回到对话输入框输入如果弹出选择框里能看到你刚建的 Pencil 智能体说明智能体注册成功。选中它然后发一条最小验证指令请在Pencil中新建一个空白设计文件画布尺寸430x800 先只画一个居中的登录按钮圆角12主色 #4F7CFF文字登录。如果画布上真的出现了一个按钮说明整条链路通了Trae → 智能体 → Pencil MCP → 画布。如果没反应先看 MCP 状态是不是 running再看模型请求有没有报 401Key 问题或 404端点路径问题。4.3 验证模型通道想单独确认 TaoToken 通道是否正常可以到模型对话页发一条测试用一句话说明 MCP 在设计稿转代码里的作用。地址是https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。能正常返回说明 Key 和端点没问题剩下的问题就都在 Pencil 配置侧。5. Figma 设计稿迁移到 Pencil 的完整操作5.1 复制 Figma 图层打开 Figma选中你要迁移的设计稿。这里有个关键点只选最外层 Frame不要选里面的子图层或组件实例。选错层级粘过去会丢结构圆角和阴影可能还在但布局会散。确认选中的是顶层 Frame 后CtrlC复制。5.2 粘贴到 Pencil 画布打开 Pencil 的.pen文件直接CtrlV。实测下来圆角、阴影、边框、文字样式基本 99% 还原而且都保留可编辑状态不是一张死图。目前已知的坑是图片可能显示不出来矢量样式没问题。如果你的设计稿里有大量位图粘完后需要手动补一下图片资源。5.3 迁移后让 AI 接手改稿粘进来只是第一步真正省事的是让 AI 基于这个画布继续改。选中要改的组件用具体指令描述选中登录页的手机号输入框把它的高度改为48圆角改为8 边框颜色改为 #E5E7EBplaceholder 文字改为请输入手机号。对比一下模糊指令和具体指令的差别指令类型示例结果模糊把这里改好看一点AI 乱猜改完还得回退模糊设计一个 XXX 类型的 App结构散风格不可控具体选中 XX 按钮改为悬浮属性1XX属性2XX精准命中可预期AI 在设计任务里像个盲盒描述越具体越稳。Pencil MCP 擅长处理结构和样式你给的约束越明确它越不会自由发挥。6. 本篇常见错排查6.1 MCP 一直启动失败最常见的原因是command路径写错。检查两点一是用户名是不是你自己的二是扩展版本号目录是否存在。如果 Trae 自动生成了cwd对比command和cwd在out之前的部分是否一致不一致就是指向了旧版本扩展目录。6.2 智能体列表里找不到 Pencil先确认 MCP 状态是 running。MCP 没起来智能体即使创建了也调不动画布。另外弹出的选择框里如果只有默认智能体检查创建时是不是保存成功了重新进设置页看一眼。6.3 模型请求 401 / 403Key 填错或过期。到https://taotoken.net/api-keys重新建一个注意复制时别带空格。如果用的是config.toml本地记录确认实际生效的配置页里 Key 也同步更新了。6.4 Figma 粘过来布局散了九成是复制时选错了层级。回到 Figma取消所有选择只点最外层 Frame 的边框选中它再复制。如果 Frame 里嵌套了自动布局粘过来后可能需要重新确认一下约束。6.5 图片不显示这是当前已知限制矢量样式正常位图需要手动补。迁移前可以把 Figma 里的图片先导出粘完后在 Pencil 里重新插入。7. 后续怎么用得更顺跑通之后建议把.pen文件和项目代码放同一个仓库设计改动跟代码改动一起提交回滚的时候两边同步。长期做编码和 Agent 任务的话可以了解下 Coding Plan地址是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content适合需要稳定长上下文的设计转代码场景。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentMCP 和模型配置的细节都在里面。Claude Code 相关的接入参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。最后留一个我踩过的坑别在多个插件里各配一套 Key统一走 TaoToken 一个入口出问题只查一处省掉大量「到底是哪个插件在报错」的排查时间。