brianleach

Claude To Figma — Design skill for Claude Code

Design community

Turn Claude Design HTML exports into fully editable Figma files — semantic frames, auto-layout, components, and tokens.

How to install Claude To Figma

This entry records only its repository, not the path inside it, so there is no exact command to give. Open brianleach/claude-to-figma and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude To Figma does

Turn Claude Design HTML exports into fully editable Figma files — semantic frames, auto-layout, components, and tokens. Not a screenshot.

Alternatives in Design

Brainstorming — Transform rough ideas into fully-formed designs through structured questioning and alternative exploration 27.9k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★

README

claude-to-figma

[![CI](https://github.com/brianleach/claude-to-figma/actions/workflows/ci.yml/badge.svg)](https://github.com/brianleach/claude-to-figma/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE) [![Node: >=20](https://img.shields.io/badge/node-%3E%3D20-brightgreen.svg)](https://nodejs.org)

**Convert [Claude Design](https://claude.ai/design) HTML exports into fully editable Figma files** — real frames, real auto-layout, real components, real design tokens. Not a pixel-perfect screenshot importer. Not a raster trace. A proper semantic translation from the DOM into Figma's scene graph.

*Dogfood example: the [landing page for this project](./examples/landing/) was generated in Claude Design, converted through this CLI, and shipped in the repo — [browser screenshot](./examples/landing/screenshots/browser.png) · [IR JSON](./examples/landing/claude-to-figma.ir.json) · [Figma file](./examples/landing/claude-to-figma.fig). The Figma render isn't yet at parity with the browser; the [known issues](./examples/landing/README.md#known-issues-in-the-current-render) are the next polish target.*

**Status:** M1–M8 shipped on `main` — full pipeline from Claude Design HTML to an editable Figma scene with cascaded styles, yoga-computed geometry, real auto-layout, component detection with text overrides, token extraction (paint + text styles), and a real-world testing harness. Documented limits live in [`LIMITATIONS.md`](./LIMITATIONS.md).

Why this exists

[Claude Design](https://claude.ai/design) can export what you make to **Canva, PDF, PPTX, and HTML** — but not to Figma. A lot of design teams, and most product teams, live in Figma. The obvious workaround is "screenshot the HTML and drop the PNG into Figma," but that produces a dead artifact: you can't edit a text style, you can't swap a button, you can't reuse a component. The moment a designer wants to iterate, they rebuild th