SuperAPI AI 工具集

penpot-migrate

设计与创作

查看项目

更新于 10-16 03:17

技能介绍

用途:把 Figma 设计迁移到 Penpot,强调结构保真。它桥接 Figma MCP 与 Penpot MCP:从 Figma 读取设计,经 execute_code 写入 Penpot,用 export_shape 做视觉校验,用 penpotUtils.shapeStructure 读取结构。若 Figma MCP 不可用,可接受手动粘贴的 Figma 导出/JSON。

核心规则:任何 Penpot 写入前先构建规范化中间表示(IR),再分层迁移——先 tokens,再组件,最后页面,每层都校验,禁止一次性迁移整个文件。IR 是解耦 Figma 模型与 Penpot API 的契约。

主要映射:Penpot 用 Boards 而非 Frames;Auto Layout 映射为 Board flex(方向、间距、内边距、尺寸 fill/auto/fix)或 grid;Figma Variables 通过 addToken({type,name,value}) 转为 Penpot tokens,模式映射为主题;Figma 组件集/变体转为 Penpot 变体容器,优先用 penpotUtils.createVariantContainer,penpot.createVariantFromComponents 为低层回退,Board.combineAsVariants 未经验证不要使用。

工作流:阶段 0 分析 Figma 结构;阶段 1 构建 IR;阶段 2 迁移 tokens;阶段 3 重建组件与变体;阶段 4 布局与页面(Auto Layout 转 flex/grid);阶段 5 校验保真度并报告。每个阶段设检查点,视觉工作前须执行导出→查看→修复循环。

限制与注意:token 应用是异步的,需在后续调用中验证 resolvedValue/shape.tokens;flex 会覆盖子元素 x/y;修改实例内部前需先 detach;变体就地修改会损坏文件,应创建后分组。不熟悉的签名先用 penpot_api_info 确认。若 Figma MCP 未连接,应索取粘贴数据而非猜测设计;无法 1:1 映射时应如实报告保真度差距。

配套文件:references/ 下 01-figma-analysis.md 至 08-error-recovery.md,scripts/ 下 analyzeFigmaStructure.js、buildIR.js、migrateTokens.js、migrateComponent.js、migrateScreen.js、validateFidelity.js。