用途:为 Figma 中的单个组件或组件集生成完整 Markdown 文档页,包含概览、解剖/图层树、设计令牌(颜色、间距、排版)、变体与状态矩阵、内容规范、无障碍说明,并可选加入设计-代码一致性与 YAML frontmatter。
主要能力:先通过 use_figma 运行采集脚本 scripts/collect-component-data.js 收集解剖树、每个变体的颜色(含绑定令牌 id 与名称)、排版信息、间距令牌、组件属性定义、描述与标注,保存为 JSON;再用确定性 Node 转换器 scripts/generate-doc.mjs 生成 Markdown,相同输入始终产生相同输出,不靠自由发挥撰写文档。
使用方式:确定组件或组件集节点 ID(可来自当前选中或用户提供的 URL/ID),设置 NODE_ID 并运行采集脚本,保存返回的 collected.json;然后在终端运行命令:node scripts/generate-doc.mjs collected.json [--code-info codeInfo.json] [--out docs/components/Button.md] [--frontmatter] [--file-url <figma-url>]。可选传入 --code-info 增加实现、设计-代码一致性、更新日志与源码/Storybook 链接;--frontmatter 添加 YAML 元数据。最后审阅输出并报告路径与摘要。
限制:采集依赖 Figma Desktop 应用,浏览器中不可用;转换器需要 Node 18+(ESM,无依赖),无法运行 Node 则无法生成文档。使用前应先加载官方 figma-use 技能;脚本要求顶层 await、颜色 0–1 范围、写文本前加载字体、使用 await figma.getNodeByIdAsync。深入图层时受 MAX_DEPTH 限制;无绑定变量的颜色或间距在令牌表中显示为“—”。若只需导出整个令牌系统用 export-tokens-figma,只需标注规范用 annotations-figma。