Real frames, real auto-layout, real components — not a screenshot.
Design teams live in Figma. The obvious workaround is to screenshot the HTML and paste the PNG — but that produces a dead artifact. No editable text, no swappable components, no design system carry-over.
The moment a designer wants to iterate, they rebuild the entire thing by hand. Every spacing decision, every token, every component boundary — re-derived from a flat image.
Standard HTML export. No special setup, no plugin, no flags. Whatever you'd download today.
page.html + assets/
One command. Resolves CSS, computes layout with yoga, detects components, extracts design tokens.
claude-to-figma convert page.html \
-o page.ir.json --hydrate
Builds a real scene graph: frames, auto-layout, components with text overrides, paint and text styles in your local styles panel.
⌘V → Build → done.
Every <div> becomes a FrameNode. Change the text — it stays text.
display:flex; gap:16px; justify-content:space-between becomes a horizontal auto-layout frame.
Six identical card markups become one Card component plus six instances. Edit the master, all six update.
Repeated colors become color/primary. Repeated text combos become heading/lg, body/md.
"Both halves are dumb. The IR is the product. Swap the plugin for a Sketch or Penpot builder later — only that half changes."
Open source. MIT licensed. The plugin install lives inside the repo's packages/plugin folder.