@atc-group/figma-tool

Claude-Code slash commands + scripts for the Figma-to-code pipeline. One command drops the whole toolbelt into any Vite/React/Tailwind v4 project.

What you get

• .claude/commands/figma-implement.md — /figma-implement <figma-url> slash command: fetch design, download assets, split components, fix gradients/fonts, render, compare via Gemini, iterate.
• .claude/commands/figma-responsive.md — /figma-responsive <figma-url> slash command: everything above, plus responsive scaling across 6 breakpoints (768 → 1440) and HTML + PDF reports.
• .claude/commands/figma-make-reports.md — /figma-make-reports <slug> [name] slash command: regenerate the 6 screenshots + dom-report.html + PDF for an already-responsive screen, without re-running the full pipeline.
• .tools/convert-gradient.mjs — reconstructs DEV-panel gradients from Figma MCP output (fixes sign-stripped stops + normalized angles).
• .tools/gemini-compare.sh — vision diff between Figma screenshot and your live implementation.
• .tools/gemini-responsive.mjs — vision diff across all 6 breakpoints.
• scripts/responsive-check.mjs — Playwright captures 6 PNGs + 1 self-contained DOM snapshot.
• scripts/responsive-report.mjs — builds self-contained dom-report.html (6 iframes sharing a blob URL) + <slug>-responsive.pdf (6 landscape pages).

Install

Local dev install (one-time), then use anywhere:

cd ~/core/figma-tool && npm link

Per-project setup (from target project root):

figma-tool init
npm i -D playwright gradient-parser
npx playwright install chromium
figma-tool doctor

init skips files that already exist. To refresh everything from the template cache:

figma-tool update     # == init --force

Commands

figma-tool init   [--target <dir>] [--force] [--no-hint]   copy templates (skip existing unless --force)
figma-tool update [--target <dir>] [--no-hint]             alias for init --force
figma-tool doctor [--target <dir>]                         verify target project is wired up
figma-tool list                                            print bundled template tree

doctor checks (all read-only):

• peer deps (playwright, gradient-parser) in target package.json
• index.html anti-FOUC --scale script
• src/hooks/useViewportScale.ts
• all 6 @theme breakpoints in src/index.css (--breakpoint-xs/sm/base/md/lg/xl)
• slash commands present under .claude/commands/
• Playwright chromium binary cached (soft-warn; macOS path only)

Exits 1 if any hard check fails.

Screen slug convention

Every script paths via SCREEN_SLUG + SCREEN_NAME env vars, derived from the Figma node's name field via get_metadata:

NAME = metadata.name                         // e.g. "Payment/ItemList"
SLUG = NAME.toLowerCase()
           .replace(/[^a-z0-9]+/g, '-')
           .replace(/(^-|-$)/g, '')
           .replace(/-+/g, '-')              // → "payment-itemlist"

The slash commands set these automatically (Phase 0.5). When invoking scripts manually:

export SCREEN_SLUG=payment-itemlist SCREEN_NAME="Payment · Item List"
node scripts/responsive-check.mjs
node scripts/responsive-report.mjs

Output lives under review/$SCREEN_SLUG/.

Source of truth

Templates come from the figma-2 project, where they're actively maintained. Run the sync script after upstream edits:

npm run sync
# or manually:  bash scripts/sync-from-figma2.sh
# override source:  FIGMA_TOOL_SRC=/path/to/figma-2 bash scripts/sync-from-figma2.sh

Smoke test

npm run smoke    # end-to-end: init / second-init / update / list / doctor

What's new

See CHANGELOG.md.

License

MIT — see LICENSE.