auxi-wardrobe

Figma Design Extraction — Design skill for Claude Code

Design community

REQUIRED first step whenever the input is a Figma URL or the task says "implement from design" / "match design" / "build this screen from Figma".

How to install Figma Design Extraction

Installs to ~/.claude/skills/auxi-wardrobe-auxi-all-in-figma-design-extraction/SKILL.md

Terminal

mkdir -p ~/.claude/skills/auxi-wardrobe-auxi-all-in-figma-design-extraction && curl -fsSL https://raw.githubusercontent.com/auxi-wardrobe/auxi-all-in/HEAD/.claude/skills/figma-design-extraction.md -o ~/.claude/skills/auxi-wardrobe-auxi-all-in-figma-design-extraction/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Figma Design Extraction does

name: figma-design-extraction description: REQUIRED first step whenever the input is a Figma URL or the task says "implement from design" / "match design" / "build this screen from Figma". Read the Figma file thoroughly via the Figma MCP — navigate the node tree, decode auto-layout, lift tokens/variables, enumerate variants, audit text and effect styles, and avoid common misreads. ALWAYS pair with figma-to-rn-workflow as the next step. Triggered automatically by mobile-dev when execution inv

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Clui Cc — A lightweight, transparent desktop overlay for Claude Code on macOS 956 ★