用途
Figma Craft 是一个在 Figma 中“画布局”的技能，通过 MCP 的 code-to-design 路径使用。它的定位是解决布局决策问题：use_figma 通过 Figma 的 Plugin API 执行 JS，它实际上是在构建一棵节点树，并非直接进行绘制；布局出错，通常是因为节点树错了，或节点尺寸是在凭直觉快速决定的。API 层面的规则由官方 MCP 技能负责。
主要能力
技能覆盖写代码之前的决策与流程约束，包括：
- 强制在写入前先做准备：按任务类型通过
get_figma_skill加载对应的官方技能，例如通用使用、页面或区块生成、组件与令牌库、FigJam、新建文件、修复已坏布局等；调用use_figma时传入skillNames: "resource:figma-use,resource:figma-craft"。即使只是“很小的改动”，也不能跳过这一步。 - 两项前置依据：先分析设计系统（如果存在 library 或 token，则先分析 DS、在目标文件启用 library，并用绑定令牌的真实实例构建；已存在的组件不重画，发现顺序为 Code Connect → 逆向已有页面 → search_design_system）；再确认真实字体，避免生成器默认落到 Inter，构建后通过读取 fontName 校验。
- 先写文本节点树再写代码：用
(方向, sizingH x sizingV, padding, gap, 对齐)记法把整棵树的尺寸关系先定下来；如果说不清某个节点的 sizing，说明布局还没决定。 - 节点树规则：有 2 个以上相关子节点的容器一律使用 auto layout（
figma.createAutoLayout()），不用 x/y 定位的 frame；不用 GROUP；节点必须有角色；深度一般不超过 4–5 层；重复元素做成一个本地组件加实例，实例文字用setProperties()覆盖；先创建屏幕外层 wrapper 再在里面构建，不先建顶层区块再修改父节点。 - 按角色定 sizing 的参考表（屏幕 frame 固定宽度、顶栏 FILL×HUG、侧栏 FIXED×FILL、内容区 FILL×FILL、卡片 FILL×HUG、按钮 HUG、图标 FIXED、换行文本 FILL +
textAutoResize = 'HEIGHT'、分隔线 FILL×FIXED 1 等）。 - 操作顺序：父容器先
createAutoLayout→appendChild→ 必要时resize()→ 再设layoutSizingHorizontal/Vertical；并区分子节点的 FIXED/HUG/FILL 与 frame 的 FIXED/AUTO 两套枚举。 - 间距与对齐：padding/gap 取 4 的倍数（4/8/12/16/24/32/48/64）；不用空 frame 或空白文本模拟间距；两端对齐用
SPACE_BETWEEN；图标与文字垂直居中用counterAxisAlignItems = 'CENTER'；重叠头像用负itemSpacing；纯结构容器清空 fill。
使用方式
按技能的流程：准备（加载技能、分析 DS、确认字体）→ 在消息里先写出文本节点树 → 每次 use_figma 只做一个区块，批量导入用 Promise.all → 按角色设置 sizing 与间距 → 校验 → 返回所有创建/修改的 ID。
适用场景
创建、搭建、编辑、修正或重排 Figma 中的布局，包括屏幕、页面、弹窗、组合区块、组件与变体、token 库、FigJam 画板、新文件，以及修复已经坏掉的布局。
限制与注意事项
技能列出了多项实际遇到过的坑：节点在容器间移动后要重置 sizing 与 layoutPositioning = 'AUTO'；node.screenshot() 渲染的是孤立节点，不能作为证明；不要用 rotation 翻转图标，用 swapComponent；query() 不支持带空格的名称；Plugin API 无法读取 Figma 评论；颜色为 0–1 且没有 a 通道；画布缓存可能导致“看起来坏了”而文件其实正常，应先测量并对比服务器渲染截图，再请用户刷新；textAutoResize = 'HEIGHT' 在高度固定时会被静默拒绝，需先设 layoutSizingVertical = 'HUG'；实例上不能覆盖 maxWidth；绑定变量的 paint 透明度可能不传到实例。校验顺序为属性 → 父容器截图 → 画布截图，并运行 references/audit-layout.md 中的审计脚本，零告警才算完成。边界：静态视觉打磨、设计系统架构与令牌审计、UX 流程与信息架构、Figma 转 React 分别由其他技能负责。