figma-kiwi

figma-kiwi — Figma Sites 逆向三管线

通过逆向 Figma 二进制 wire 协议 + 渲染 DOM 采集，产出 LLM 可直接消费的 完整设计产物包。不依赖 REST 节点端点（Sites 文件 400），不受 Dev Mode 付费限制。

何时用

• 给 Figma Sites / Make / 普通设计文件的链接，要"还原/复刻/提取设计"
• 需要全部节点 guid、断点、动效 keyframe、变量 token、CODE_FILE 源码、站点 meta
• 需要像素级 CSS 真值（computed style）

管线 C：预览 bundle（未发布站点的 100% 还原）

先看这条。 已发布站点和编辑器预览跑的是同一个渲染器 SitesRuntime，只是取数不同：

env:'published'  →  fetch(`/_json/${bundleId}${route}.json`)
env:'preview'    →  sendMessage('getPage',{url}) 走 MessagePort → { website, cmsBundle }

website 与已发布的 _index.json 同构。抓下来放到已发布路径该在的位置，用同一个 runtime 以 env:'published' 启动，页面就逐像素复现。实测：已发布 bundle 回放对照线上 0.0000% 像素差；预览 bundle 回放差 0.053%，且差异全部来自尚未发布的 183 个文案节点。

npm run kiwi:preview -- <FILE_KEY>   # 抓 bundle + 未发布资源 Blob
npm run kiwi:replay                  # 生成 rehearsal/replay/
python3 -m http.server -d rehearsal/replay 8900

预览 bundle 比已发布多带：compiledCode(2.94MB esbuild)、globalStyles(Tailwind v4)、 codeFilesystemMetadata、以及未发布的页面路由。

三个坑：hook 要打在编辑器顶层页（预览是 OOPIF，Page.reload 会被拒）； pushAssetData 的值是 Blob（JSON.stringify 变 {}）；未发布视频是带签名的 S3 URL（7 天过期），要缩成 basename 再取字节。

细节见 docs/make-reverse-notes.md 的 addendum 与 docs/rehearsal/REPORT.md。

双管线架构（为什么是两条）

	A: Kiwi wire 协议	B: 渲染 DOM
产出	全部节点+全字段（无损）、动效、token、代码、站点 meta	像素级 computed CSS、任意断点截图
原理	编辑器 WS 全量 sync，zstd(Kiwi) 帧解码，schema 随帧下发	预览 iframe 注入采集 agent，getComputedStyle
局限	渲染映射需自建（遮罩/布尔/文字塑形是 Figma 渲染器的活）	拿不到 guid/断点 override/动效/未渲染状态

wire 管"设计与语义"，DOM 管"像素与 CSS"。产物包合并两源。

前置（一次性）

# Chrome 带调试端口 + 登录 Figma + 打开目标文件
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 --user-data-dir=/tmp/figma-kiwi-profile \
  "https://www.figma.com/site/<FILE_KEY>/<name>"
npm run kiwi:setup   # ~/.cache/figma-kiwi 装 ws/fzstd/kiwi-schema

管线 A：wire 全量 sync（无损）

# 1. 全量 sync：偷 cookie → 独立 WS → JOIN_START→NODE_CHANGES→JOIN_END
node bin/kiwi.mjs sync <FILE_KEY>            # 3.6MB wire → 34,035 节点 + 4,460 blobs

# 2. 无损打包（不蒸馏：不剪枝、不限深、不选字段）
node src/kiwi/pack.mjs                        # → rehearsal/kiwi-package/
#   scenegraph.full.json  全节点全字段（字节→base64 可逆）107MB
#   vectors.json          15,077 条 SVG path（几何 blob 确定性解码）
#   animations.json       全部 KEYFRAME/TRACK/PRESET 原始节点
#   site.json             responsiveSetSettings（title/lang/GA/customCode/scaling）
#   code/                 CODE_FILE 源码（Sites 生成的真实 React）
#   images.json+assets/   hash→S3 签名 URL→下载（REST /images 对 Sites 可用）
#   tree.json             id→children 纯索引

# 3. 应用数据（机械格式转换：渐变矩阵→CSS、effects→shadow、symbol 嫁接）
node src/kiwi/pack-app.mjs                    # → nestto-app/public/data/desktop.json