用途:将现有 React 项目(含 Vite、Next.js、V0、AI Studio)转换为符合 Figma Make 规范的目录结构,产出可导入、可编辑的 .fig 资产,并支持补齐、更新、验证已有导出壳与 canvas.fig。
主要能力:转换后项目具备 Figma Make 可编辑性、.fig 导出能力、双入口架构(独立运行与导出共用同一套共享组件)、设计 Token 保留,并包含 meta.json、ai_chat.json、images/ 等元文件。产物默认写入 .axhub/make/artifacts/figma/<resource-id>/,含 canvas.fig、meta.json、ai_chat.json、canvas.code-manifest.json、manifest.json、images/ 等,并在 project.json 的 resources.prototypes[].artifacts.figma 中登记。
使用方式:先分析源项目框架、入口、样式方案、依赖与静态资源,形成转换清单;再创建固定目录结构(index.tsx、src/App.tsx、src/main.tsx、src/components/、src/styles/globals.css 等),收敛入口并迁移样式;随后补齐 meta.json、ai_chat.json、package.json、vite.config.ts、index.html、images/;最后用技能自带 scripts/canvas-fig-sync.mjs 与 assets/empty-canvas.fig 生成 canvas.fig。生成前须先 inspect 模板确认已有 CODE_FILE.logicalPath,复制模板为候选文件后再 pack,并校验 pack manifest 的 updatedLogicalPathCount 与 code-manifest 的 totalCodeFiles 均大于 0、无 Unresolved relative import,验证通过后才替换正式 canvas.fig。依赖 pako 与 kiwi-schema,缺依赖时按宿主包管理器安装,勿加入原型运行时依赖。
适用场景:纯 React + Vite、Next.js(含 V0)、AI Studio 项目转换,以及已有 Figma Make 导入项目补齐导出能力。
限制:pack 只更新模板中已存在的 logicalPath,磁盘新增路径不会自动成为 CODE_FILE;--prune-missing 会删除缺失节点,--sanitize-for-export 会清空聊天与代码快照;inspect 成功不代表源码完整或可运行。canvas.fig 为二进制文件,不可手动编辑。具体收费、价格、平台支持范围资料暂未提供。