Turns an HTML design mockup into native, editable Figma layers — real frames, real text, real vector paths, not a screenshot — and verifies the result by pixel-diffing every screen against the original.
The deliverable is a local Figma plugin the recipient imports once. Figma's
.fig format is closed and its REST API is read-only for file contents, so a
plugin is the only supported way to author genuinely native layers offline.
Install
npx niaskills add nia/html-to-figma
Add -g to install into ~/.claude/skills/ and have it everywhere. Or just
copy the folder:
cp -R html-to-figma ~/.claude/skills/
Restart Claude Code so it picks up the new skill. Then just say "convert this HTML to Figma" and point at a file.
Requirements
Node 22+ and a local Chrome/Chromium. That's it — no package.json,
no npm packages, nothing to install.
Manual use
S=~/.claude/skills/html-to-figma/scripts
node $S/probe.js /path/to/design.html # suggests the screen selectors
# → write figma.config.json from what it reports
node $S/extract.js && node $S/build-plugin.js && node $S/verify.js
probe.js renders the design and reverse-engineers which element repeats once
per screen, so it works on designs it has never seen. Configuration lives in a
figma.config.json in the working directory — see SKILL.md for its shape.
Then: Figma desktop app → Plugins → Development → Import plugin from
manifest… → pick the generated figma-plugin/manifest.json → run it and
click Import. Full instructions in references/figma-import.md.
Known limits
Absolute positioning (no auto-layout or components are inferred), no raster
images, scroll regions captured at their rendered scroll position, and
canvas/masks/blend modes approximated. Fonts not installed locally fall back
to Inter, and the plugin reports every substitution.
Build using Nia IDE (Powered by Nia Code) — property of Naslabs.ai (it's free to use).