在 Claude Code 会话中直接读写 .pen 设计文件——AI 即是设计师。从设计稿到代码，全链路无缝衔接。
.pen 设计文件，无需手动切换工具或导出流程。AI 在同一会话中完成设计和实现。.pen 文件格式加密，必须通过 Pencil MCP 工具访问——不能用 Read/Grep 等文本工具读取。批量操作通过 batch_get 和 batch_design 实现。ce:brainstorm 阶段探索 UI 方向，ce:plan 阶段用设计稿锁定验收标准，ce:work 阶段通过截图验证实现是否与设计吻合。.pen 文件内容已加密，任何时候都只能使用 Pencil MCP 工具（batch_get、batch_design 等）读写。使用 Read、Grep 等通用文件工具会返回乱码或失败。
| 工具名 | 类型 | 用途 |
|---|---|---|
| get_editor_state | 读 | 获取当前编辑器状态——活跃文件路径、当前选中的节点、画布尺寸等。任务开始时的第一步，建立工作上下文。支持 include_schema 参数获取节点 Schema 定义。 |
| open_document | 导航 | 打开指定路径的 .pen 文件，或传 'new' 创建空白设计文件。当编辑器无活跃文件时必须先调用。 |
| get_guidelines | 读 | 加载设计指南和样式规范（颜色、间距、字体、组件规则）。支持 category、name、params 过滤，按需加载避免 token 浪费。 |
| batch_get | 读 | 按 glob 模式或节点 ID 批量读取设计节点。用于探索现有设计结构、查找组件、理解布局层次。读取 .pen 文件的唯一正确方式。 |
| batch_design | 写 | 在单次调用中执行多个设计操作（Insert / Copy / Update / Replace / Move / Delete / Image）。每次最多 25 个操作，保证进展同时不超负荷。修改 .pen 文件的唯一正确方式。 |
| get_screenshot | 读 | 对当前设计画布截图，供视觉验证和与代码实现对比。在 ce:work [V+] 阶段与 Playwright 配合，实现像素级对比验收。 |
| get_variables | 读 | 读取设计 Token 变量（颜色、间距、字体大小等）。确保代码实现使用与设计系统一致的变量值。 |
| set_variables | 写 | 批量修改设计 Token 变量，实现全局主题切换或设计系统更新。修改后所有引用该变量的组件自动更新。 |
| snapshot_layout | 读 | 快照当前画布布局结构，用于版本对比或作为验收基线。在迭代设计前记录初始状态。 |
| find_empty_space_on_canvas | 读 | 在画布上寻找空闲区域，用于放置新组件时避免遮挡已有内容。插入新设计元素前自动调用。 |
| replace_all_matching_properties | 写 | 全局替换所有匹配属性值（如批量改颜色、字体、间距）。重构设计系统时的高效工具。 |
| search_all_unique_properties | 读 | 搜索画布中所有唯一属性值（颜色、字体等），帮助找出设计中的不一致，审计前先用此工具盘点现状。 |
| export_nodes | 写 | 将设计节点导出为图片（PNG/SVG 等格式），用于生成设计文档、嵌入 PRD，或作为代码实现的参照图。 |
get_editor_state 了解当前编辑器状态，再用 open_document 打开已有设计或新建空白文件。get_guidelines 加载设计规范，用 batch_get 读取已有节点，理解组件层次和设计意图，避免破坏已有结构。batch_design 执行批量设计操作——插入组件、调整布局、修改样式、更换变量。一次调用最多 25 个操作，保证原子性。get_screenshot 截图当前设计，直观确认布局和样式是否符合预期。截图会在对话中直接显示，无需切换窗口。get_variables 提取设计 Token，用 export_nodes 导出参照图，作为 ce:work 的验收标准。在 [V+] 模式下，Playwright 自动截图并与设计对比。.mcp/config.json 中添加 Pencil 配置：
get_editor_state 应返回编辑器状态。plugin.json 已预配置 Context7 MCP。Pencil MCP 需单独在你的 Claude Code 账户 MCP 设置中添加——它是账户级功能，不随插件分发。