用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。
本 Skill 负责与 Pencil MCP Server 交互,读取/编辑加密的 .pen 设计文件,并提供可复制的调用模板与最佳实践。
.pen 文件内容是加密的:禁止用普通文件读取/搜索方式解析 .pen 内容;只能通过 pencil MCP tools 访问与修改。get_editor_state / batch_get 了解当前文档结构与选区。batch_design 单次最多 25 条操作;超过时按“结构→内容→样式→验收”拆分多次执行。replace_all_matching_properties、大批量 batch_design)都必须先输出变更计划,再执行。{
"pencil": {
"name": "pencil",
"transport": "stdio",
"command": "/Users/wandl/.trae/extensions/highagency.pencildev-0.6.15-universal/out/mcp-server-darwin-arm64",
"args": ["--ws-port", "61405"],
"env": {}
}
}
get_editor_state(include_schema=false):确认当前是否已打开 .pen、当前选区。open_document(filePathOrTemplate) 打开或新建。batch_get(...) 获取目标节点树、组件、变量等。batch_design(filePath, operations)(≤25 ops/次)。snapshot_layout(...) 检查布局问题;必要时 get_screenshot(...) 截图复核。以下为 pencil MCP 当前支持的工具(prompts/resources 不支持)。
include_schema: boolean:是否附带 .pen schema。{ "name": "get_editor_state", "arguments": { "include_schema": false } }
.pen 文件。filePathOrTemplate: string:.pen 文件路径或 "new"。{ "name": "open_document", "arguments": { "filePathOrTemplate": "new" } }
filePath: string(必填)nodeIds?: string[]:按 ID 读取parentId?: string:限定在某节点子树内搜索patterns?: object[]:按模式搜索(如 name 正则、type、reusable)includePathGeometry?: boolean:是否返回完整 path 几何(默认会用 ... 缩略)readDepth?: number:读取展开深度(建议 ≤3)searchDepth?: number:搜索深度resolveInstances?: boolean:展开实例resolveVariables?: boolean:解析变量为当前值{
"name": "batch_get",
"arguments": {
"filePath": "designs/app.pen",
"patterns": [{ "reusable": true }],
"readDepth": 2,
"searchDepth": 3
}
}
filePath: string(必填)operations: string(必填):操作脚本(每行一个 op,可绑定变量名;≤25 ops/次)。{
"name": "batch_design",
"arguments": {
"filePath": "designs/app.pen",
"operations": "root=G()\\nframe=I(root,{type:\\\"frame\\\",name:\\\"Home\\\"})\\nU(frame,{width:390,height:844})"
}
}
filePath: string(必填)parentId?: string:仅检查子树maxDepth?: number:检查深度problemsOnly?: boolean:仅输出有问题的节点{
"name": "snapshot_layout",
"arguments": { "filePath": "designs/app.pen", "maxDepth": 2, "problemsOnly": true }
}
filePath: string(必填)nodeId: string(必填){
"name": "get_screenshot",
"arguments": { "filePath": "designs/app.pen", "nodeId": "node_123" }
}
topic: \"code\" | \"table\" | \"tailwind\" | \"landing-page\" | \"design-system\"(必填){ "name": "get_guidelines", "arguments": { "topic": "design-system" } }
{ "name": "get_style_guide_tags", "arguments": {} }
tags?: string[]id?: string{ "name": "get_style_guide", "arguments": { "tags": ["mobile", "minimal", "fresh"] } }
.pen 文件的变量与主题(用于生成全局样式/代码映射)。filePath: string(必填){ "name": "get_variables", "arguments": { "filePath": "designs/app.pen" } }
.pen 文件的变量与主题。filePath: string(必填)variables: object(必填)replace?: boolean:是否全量替换(默认合并)。{
"name": "set_variables",
"arguments": { "filePath": "designs/app.pen", "replace": false, "variables": {} }
}
filePath: string(必填)width: number(必填)height: number(必填)padding: number(必填)direction: \"top\" | \"right\" | \"bottom\" | \"left\"(必填)nodeId?: string:以某节点为参照(可选){
"name": "find_empty_space_on_canvas",
"arguments": {
"filePath": "designs/app.pen",
"width": 390,
"height": 844,
"padding": 24,
"direction": "right"
}
}
filePath: string(必填)parents: string[](必填)properties: string[](必填;枚举:fillColor/textColor/strokeColor/strokeThickness/cornerRadius/padding/gap/fontSize/fontFamily/fontWeight){
"name": "search_all_unique_properties",
"arguments": {
"filePath": "designs/app.pen",
"parents": ["root_frame"],
"properties": ["fillColor", "fontFamily", "fontSize"]
}
}
filePath: string(必填)parents: string[](必填)properties: object(必填):按属性名提供 from/to 替换规则列表{
"name": "replace_all_matching_properties",
"arguments": {
"filePath": "designs/app.pen",
"parents": ["root_frame"],
"properties": {
"fontFamily": [{ "from": "Inter", "to": "SF Pro" }],
"fontSize": [{ "from": 14, "to": 15 }]
}
}
}
get_editor_state(include_schema=false) 获取 activeFilePath 与 selectionbatch_get 读取选中节点与其子树(readDepth=2)snapshot_layout(problemsOnly=true) 输出布局问题清单get_screenshot 对问题节点截图确认search_all_unique_properties 先统计现状(输出唯一值集合与分布)replace_all_matching_properties 执行替换snapshot_layout + get_screenshot 验收