エージェントが受け取るもの
1 つの frame を 1 つの zip に。実装の土台となる構造、使う素材、照合用の画像です。
frame.zip
├── context.md ここから開始:エージェント向けの指示
├── design/
│ ├── nodes.json レイアウト、テキスト、スタイル、展開済みインスタンス
│ ├── fonts.json 表示テキストが使うフォントフェイスとノード ID
│ └── variables.json バインドされた variables、コレクション、モード、エイリアス
├── assets/ 画像フィル、SVG、合成済みノードのレンダリング
├── assets.json デザイン上の参照を素材ファイルに対応付ける
├── references/screen.png 比較用の frame のレンダリング
├── missing-assets.json 生成できなかったもの
└── manifest.json ファイルの役割、メディアタイプ、サイズ、SHA-256 ハッシュ
1 つだけ必要なら、CLI で直接取得できます。
npx -y @runkids/figlens find design.fig "login" --type FRAME # 名前またはテキストで frame ID を検索
npx -y @runkids/figlens inspect design.fig 12:345 # レイアウトとテキストの要約
npx -y @runkids/figlens nodes design.fig 12:345 > frame.json # REST 形式の JSON
npx -y @runkids/figlens export design.fig 12:345 icon.svg # SVG、PNG、JPG、WebP、AVIF
npx -y @runkids/figlens bundle design.fig 12:345 frame.zip # 上記の zip
SVG エクスポートは元の画像フィルを埋め込み、テキストをグリフにアウトライン化するため、フォントは不要です。MCP 経由では、ラスターエクスポートもインライン画像として返るので、エージェントはファイルを開かずにデザインを確認できます。
Figma にどこまで近いか
Figma 自身の JSON、PNG、SVG エクスポートと比較して測定しました。本番 frame 826 個と Community ファイル 5 つが対象です(2026-10-22)。
| チェック | 結果 |
|---|---|
| ノード構造、名前、可視性、bounds、テキスト | 826 frame 中 771 で一致 |
| 元の画像フィル | 2,608 / 2,608 がバイト単位で一致 |
| SVG 素材 | 5,197 中 5,014 がピクセル差の閾値内 |
| Community frame の bundle | 306 / 306 で欠落素材なし |
これらのファイルでの結果であり、すべてのデザインを保証するものではありません。手法と閾値:accuracy レポート。
このページはリポジトリの docs/README-ja.md から生成されています。