flukelaster

Claude Design X Figma — Design skill for Claude Code

Design community

Figma plugin that scrapes any live URL and rebuilds it as native Figma frames — auto-layout, fills, strokes, typography.

How to install Claude Design X Figma

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

What Claude Design X Figma does

Figma plugin that scrapes any live URL and rebuilds it as native Figma frames — auto-layout, fills, strokes, typography. Built for piping Claude-generated UIs back into Figma.

Alternatives in Design

Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★
Design Dna — Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visu 624 ★

README

Claude Design → Figma

Scrape any live URL and rebuild it as native Figma frames.
Pipe Claude-generated UI prototypes back into Figma for design review — auto-layout, fills, strokes, typography, and all.

Plugin hero

Quick start · How it works · Usage · CLI · API · Tech

✨ Highlights

URL → Figma in one click. Paste a URL, scrape, convert. The result is real Figma nodes — not a flat screenshot.
Auto-layout aware. CSS flex/grid → Figma auto-layout, with proper spacing, padding, and alignment.
Style fidelity. Fills, strokes, gradients, shadows, radii, and typography mapped through a dedicated style resolver.
Local-only. Companion server binds 127.0.0.1; URLs never leave your machine.
Headless CLI. Same scrape pipeline, no browser required — useful for diffs, archival, or feeding other tools.

Before / after comparison

🚀 Quick start

# 1. Install (Playwright Chromium is needed for the scraper)
npm install
npx playwright install chromium

# 2. Start the local scraper
npm run serve
# → http://127.0.0.1:7777

Plugin bundles in `dist/` are committed and kept in sync by CI, so cloning + the steps above is enough — no `npm run build` required to use the plugin. Hack on `src/`? Run `npm run build` (or `npm run watch`) to rebuild locally; CI rebuilds on push to `main`.

Then in **Figma desktop**: