figlens 让编程 Agent 离线读取设计稿
figlens 从本地 .fig 文件列出画框并打包设计资源，让云端编程 Agent 无需安装 Figma、登录或配置 API 密钥即可读取。演示展示了读取设计包、生成 HTML/CSS 并在浏览器检查结果的流程。
AI 深度解读
云端 coding agent 能读到源码，却未必能拿到设计稿。作者做的 figlens，尝试把 Figma 设计变成可随文件交付的本地资料包：设计师导出 .fig，agent 读取布局、文字、变量和素材，再照着参考图实现页面。
它解决的是设计信息如何送进执行环境。读取设计的机器不需要安装 Figma、登录账号或配置 API key，但「离线」只覆盖设计解析，不代表整个 AI 编程过程都能断网。
把设计稿打包，agent 才有具体依据
figlens 的交付单位是选定画框的 bundle。里面包含布局与文本数据、绑定变量、图片和 SVG 素材、参考渲染图，以及缺失素材清单。
这些信息各有用途：布局数值减少尺寸猜测，素材文件避免临时找图标，参考图帮助检查视觉结果。大白话理解，就是把 agent 要用的设计资料收进一个压缩包。
字体文件不在包里。这会直接影响还原效果，不能因为布局数值齐全，就认定页面能完全一致。
作者展示了一次 Pi 在 Orca 中的实际构建：读取本地设计包，编写 HTML/CSS，再打开浏览器检查结果。成品使用了包中的 19 个 SVG 图标，包含本地 Share 对话框和输入区域。
演示采用社区设计 MCP Apps for Claude 的「List views」画框。由于缺少 Anthropic 字体，页面改用 System sans 和 Georgia；回复只留在当前页面，刷新后重置。视频长 45 秒，以 8 倍速展示，画面来自实际窗口快照。
这证明流程能够跑通，但演示中的交互仍是本地效果。
从导出到交付，只需要选中一个画框
先在 Figma 中执行 File > Save local copy，取得 .fig 文件。安装 Node.js 18+ 后，用下面的命令查看画框树：
npx @runkids/figlens tree design.fig --depth 2
注意 --depth 2 控制树的展示深度，后续需要从输出中选择画框 ID。
选好后，再把对应画框打包：
npx @runkids/figlens bundle design.fig 12:345 frame.zip
这里的 12:345 必须替换成实际画框 ID，frame.zip 是交给 agent 的产物。
作者建议让 agent 先将压缩包解到独立目录，读取 context.md，按项目已有技术栈与约定实现页面，使用包内布局值和素材，最后对照 references/screen.png 检查结果。
支持 skills 的 agent 还可以通过 npx skills add runkids/figlens --skill figlens 安装技能；工具也提供本地 stdio MCP server。
首次运行 npm 启动器会下载并缓存原生二进制，也可以直接安装原生发行版。使用者不需要 Rust 或 Docker。
「离线」和「0.47 秒」各自覆盖什么
figlens 的离线能力，指读取本地设计时不调用 Figma API。
AI 服务、首次二进制下载、项目依赖安装，仍可能需要网络。只有 Figma URL 也不够，必须拿到保存的 .fig；设计更新后，还得重新导出。
作者提供了一组性能实测：对一个 57.5 MiB 文件提取指定画框，五次热运行的耗时中位数为 0.47 秒。画框含 153 个节点，产出 25 个 SVG 素材，没有缺失素材。
测试使用 figlens 0.1.2，在 ARM64 Docker 容器中运行预编译二进制。这个成绩只计算 figlens bundle，不包含 AI 写代码的时间。热运行也不能代表首次下载和首次执行的体验。
我的判断
我认可它把设计交付做成明确文件的思路。对运行在云端或无图形界面环境里的 agent，拿到一个包含数值、素材和参考图的包，比只收到链接更容易开始工作。
与只给截图相比，bundle 多了结构化信息；与直接连接 Figma API 的方式相比，它减少了读取端的账号和密钥要求，同时把「更新设计副本」变成了交付方要维护的步骤。设计频繁变化时，这个成本需要算进去。
局限也很明确：.fig 格式没有公开文档，作者承认渲染存在已知缺口，但原文没有展开哪些设计特性会受影响。缺字体也已经在演示里出现。
实际演示证明流程可用，单组提取测速还不足以证明开发效率更高。
作者没有提供与截图交付、API 读取等方式的对照数据，也没有量化页面还原误差。当前更适合把它当成一个值得试用的交付选项。
能拿来做什么
- 在云端前端开发任务中，先选一个代表性画框生成 bundle，让 agent 按现有组件和样式约定实现，再对照参考图验收。
- 交付设计包时，附上导出时间和对应任务，设计变更后重新生成，避免 agent 持续使用旧副本。
- 开工前检查缺失素材清单和字体可用性，把替代字体写进任务要求，减少后续返工。
- 用自己的复杂画框试跑一次，重点检查布局、SVG 和参考渲染的差异，再决定是否纳入日常 AI 编程流程。