SuperAPI AI 工具集

pencil basics

设计与创作

查看项目

更新于 10-15 22:11

技能介绍

用途:本技能用于通过 Pencil MCP 服务器读取、修改 .pen 设计文件并生成设计。

核心概念:.pen 是加密的设计数据格式,必须仅通过 Pencil MCP 工具访问,禁止用 Read、Grep、Write 直接读写。节点类型含 frame(容器/布局,属性 layout、gap、padding、fill)、text(content、fontSize、fontWeight、textColor)、rectangle(fill、stroke、cornerRadius)、ellipse、ref(组件实例)、image(用 G() 操作应用)、icon_font(icon、iconSize)。布局系统支持 Auto Layout:layout 为 horizontal/vertical/grid,gap、padding、alignItems(start/center/end/stretch)、justifyContent(start/center/end/space-between);尺寸可用数值或 fill_container、hug_contents。

主要工具:get_editor_state(include_schema) 获取编辑器状态与选择信息,设计前应先调用;batch_get(filePath, patterns, nodeIds, readDepth, searchDepth) 搜索或按 ID 读取节点;batch_design(filePath, operations) 执行修改操作;get_screenshot(filePath, nodeId) 截图做视觉验证,设计后应调用。

batch_design 操作:Insert(I) 插入节点,Update(U) 更新属性(可用 instanceId/childId 路径更新实例内部),Copy(C) 复制并可覆盖后代属性,Replace(R) 替换节点,Delete(D) 删除,Move(M) 移动位置,Generate Image(G) 应用 AI 生成或图库图片。

使用流程:新屏幕先 get_editor_state,再用 batch_get 查看组件,加载 get_guidelines、get_style_guide_tags 与 get_style_guide,然后 batch_design 构建,最后截图验证;修改组件与排查布局问题时相应使用 U() 和 snapshot_layout。

最佳实践:每次 batch_design 后用 get_screenshot 验证;操作分批(最多 25 个);绑定名每次新建;不要直接访问 .pen 文件、不要一次执行过多操作、不要复用绑定名、不要手动指定 id。

限制:资料未提供具体收费、价格、平台支持范围与效果数据,暂未提供。