How to use Claude to decode Figma scenegraph data
The author reports a working Figma binary-protocol decoder used daily for several days, supporting scenegraph extraction, clean SVG exports and design-to-HTML mapping.
news.ycombinator.com
Prompt to try
Editorial adaptation, not the source author’s exact prompt. Replace bracketed inputs and review tool permissions first.
Help investigate [captured binary protocol frames] from [design tool]. Identify frame schemas and vector structures, document confirmed findings as Kaitai Struct specifications, and build a decoder producing [scenegraph JSON fields]. Keep uncertain interpretations explicit and use [sample fixtures] for comparison.
Reach people exploring AI agents
See placements →What happened
The author reports a working Figma binary-protocol decoder used daily for several days, supporting scenegraph extraction, clean SVG exports and design-to-HTML mapping.
Reported by allan_s on Hacker NewsHow the agent did it
- Used Claude to reverse-engineer the fig-wire frame format.
- Decoded the commandsBlob and vectorNetworkBlob vector formats.
- Documented all three formats as Kaitai Struct specifications.
Where a person stepped in
The author reports daily use of the tool for several days; the post does not describe a formal code-review process.
A person approved each step before the agent continued.
Allan Simon reports using Claude to reverse-engineer Figma’s internal binary WebSocket protocol and build a scenegraph extraction tool. The author wanted to explore designs from AI coding tools without repeatedly encountering REST API rate limits. They attribute most of the code, the README and the binary-format investigation to Claude.
The tool captures the Kiwi-encoded frames that Figma sends when a browser opens a file, using Chrome DevTools Protocol. It decodes those frames into structured JSON containing nodes, vector paths and styles. The reverse-engineering covered the fig-wire frame format and two undocumented vector formats: commandsBlob for prepared SVG path commands and vectorNetworkBlob for editable path data.
All three formats were documented as Kaitai Struct specifications. The project shipped as a zero-dependency JavaScript library, a CLI, an MCP server and a Claude Code plugin, alongside sample fixtures and binary specifications.
The author says they had been using it daily for several days. Reported uses include clean SVG and image extraction, mapping Figma content to exported HTML and identifying design problems that prevent layouts resizing correctly.
Who it's for: Developers investigating design-data interoperability who can inspect binary formats and assess extracted scenegraph information.
Prompt
Suggested prompt (written by Agents In Use, not the author's)
Source: Hacker News · allan_s
Frequently asked questions
How does the tool obtain scenegraph data?
It captures Kiwi-encoded WebSocket frames through Chrome DevTools Protocol and decodes them into structured JSON rather than using Figma’s REST API.
Which formats were documented?
The author reports Kaitai Struct specifications for fig-wire, commandsBlob SVG path commands and vectorNetworkBlob editable path data.
More details
Remaining steps
- Shipped a JavaScript library, CLI, MCP server and Claude Code plugin.
About this account
The agent generated code from the author’s instructions, with the author directing the work.
Platform: Hacker News. Attribution: https://news.ycombinator.com/item?id=47607324. Prompt: Suggested (written by Agents In Use, not the author's). Sourced by the Agents In Use pipeline.
Credit: allan_s on Hacker News
Source published 1 Apr 2026
Source checked 14 Oct 2026
Tools and topics
Claude · Chrome DevTools Protocol · Kaitai Struct · Figma
AI coding
Editorial completeness: 100/100. Measures documented fields, not agent performance or verified outcomes.