agent 能拿到什么
一个 frame,一个 zip。有可据以构建的结构、可直接使用的素材,以及用来比对的图片。
frame.zip
├── context.md Start here: instructions for your agent
├── design/
│ ├── nodes.json Layout, text, styles and expanded instances
│ ├── fonts.json Font faces the visible text uses, with node ids
│ └── variables.json Bound variables, collections, modes and aliases
├── assets/ Image fills, SVGs and composited node renders
├── assets.json Maps design references to asset files
├── references/screen.png A render of the frame to compare against
├── missing-assets.json Anything that could not be produced
└── manifest.json File roles, media types, sizes and SHA-256 hashes
只需要其中一部分?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,光栅导出也会以内联图片返回,agent 无需打开文件就能看到设计。
与 Figma 有多接近?
以 Figma 自身的 JSON、PNG 和 SVG 导出为基准,在 826 个正式设计 frame 和五个 Community 文件上测量(2026-10-22):
| 检查项 | 结果 |
|---|---|
| 节点结构、名称、可见性、边界和文字 | 771 / 826 个 frame 完全一致 |
| 原始图片填充 | 2,608 / 2,608 字节完全一致 |
| SVG 素材 | 5,014 / 5,197 在像素差异阈值内 |
| Community frame bundle | 306 / 306 无缺失素材 |
这是对上述文件的结果,不保证适用于每个设计。方法和阈值:准确度报告。
本页内容取自仓库中的 docs/README-zh-CN.md。