From rune
Figma visual intent extractor — MCP server knowledge for the 4 Figma tools. figma_to_react() produces REFERENCE CODE (~50-60% match), NOT production code. Its primary role in the design-sync pipeline is as a search input: the generated code is analyzed for component intent, which drives library MCP searches when a UI builder is available. Without a builder, it serves as a starting point for direct implementation. Builder protocol role: figma-to-react provides baseline visual extraction; builder MCPs (UntitledUI, shadcn/ui, custom) enhance with library-specific component matching via Phase 1.5 Component Match in design-sync. When a builder is active, figma_to_react() output is consumed as search input — not applied directly. Use when agents need to fetch Figma designs, inspect node properties, list components, or extract visual intent from design files. Trigger keywords: figma, design, react, component, tailwind, MCP, design-to-code, figma URL, figma API, component extraction, visual intent.
npx claudepluginhub vinhnxv/rune --plugin runeThis skill uses the workspace's default tool permissions.
Extracts visual intent from Figma designs and generates reference React + Tailwind CSS v4 code via 4 MCP tools.
Fetches Figma design context, screenshots, variables, and assets via MCP server, translates nodes to React/Tailwind code adapting to project conventions. Activates for Figma URLs, node IDs, design-to-code, or MCP setup.
Generates production-ready React, Vue, or HTML/CSS code from Figma components or frames via Figma MCP server with Code Connect support. For design-to-code workflows.
Extracts components and design tokens from Figma, converts designs to React components, exports tokens as CSS/JSON, and automates design-to-code sync. Ideal for React apps using Figma designs.
Share bugs, ideas, or general feedback.
Extracts visual intent from Figma designs and generates reference React + Tailwind CSS v4 code via 4 MCP tools.
CRITICAL:
figma_to_react()output is REFERENCE CODE (~50-60% match). It is NOT production-ready implementation. When a UI builder MCP is available, this output is analyzed for component intent and used as search queries against the real component library — NOT applied directly.
WITHOUT builder (fallback):
figma_to_react() → reference code → workers apply directly → ~50-60% match
WITH builder (preferred):
figma_to_react() → reference code → ANALYZE intent → SEARCH library MCP
→ MATCH real components → workers import REAL code → ~85-95% match
Example: <nav className="w-64"><a>Dashboard</a></nav> is analyzed as:
{ type: "sidebar", layout: "vertical", items: ["Dashboard"], icons: false }
→ search_components("sidebar navigation") → SidebarNavigation component
→ get_component("SidebarNavigation") → REAL component code
FIGMA_TOKEN is optional when using this MCP server via the Rune figma-to-react MCP.
The Rune MCP server bundles its own Figma API access and works without a personal token.
FIGMA_TOKEN is required only when:
figma-context MCP server entryscripts/figma-to-react/cli.py CLI directly against the Figma REST API# Only needed for Official MCP or direct CLI usage:
export FIGMA_TOKEN="figd_..."
Fetch a Figma design and return its parsed intermediate representation (IR) tree.
figma_fetch_design(url="https://www.figma.com/design/abc123/MyApp?node-id=1-3")
Parameters:
url (required): Full Figma URLdepth (optional, default 2): API traversal depthmax_length / start_index: Pagination for large responsesReturns: JSON with file_key, node_count, and tree (IR structure).
Inspect detailed properties of a specific Figma node including fills, strokes, effects, auto-layout, and text styles.
figma_inspect_node(url="https://www.figma.com/design/abc123/MyApp?node-id=1-3")
Parameters:
url (required): Figma URL with ?node-id=...Returns: JSON with full node property detail (fills, strokes, effects, layout, text).
List all COMPONENT, COMPONENT_SET, and INSTANCE nodes in a Figma file. Detects duplicate instances (same component ID used multiple times).
figma_list_components(url="https://www.figma.com/design/abc123/MyApp")
Returns: JSON with components, instances, and duplicate_instances.
End-to-end conversion: Figma URL to React + Tailwind CSS code.
figma_to_react(
url="https://www.figma.com/design/abc123/MyApp?node-id=1-3",
component_name="MyButton",
extract_components=true
)
Parameters:
url (required): Figma URL (include ?node-id=... for specific component)component_name (optional): Override React component nameuse_tailwind (optional, default true): Generate Tailwind CSS classesextract_components (optional, default false): Extract repeated instances as separate componentsmax_length / start_index: PaginationReturns: JSON with main_component (React code string) and optionally extracted_components.
The CLI (scripts/figma-to-react/cli.py) also supports direct code output without JSON wrapping:
--code — Raw TSX to stdoutpython3 cli.py react URL --code # pipe-friendly raw TSX
python3 cli.py react URL --code > SignUp.tsx # redirect to file
--write PATH — Write .tsx file directly# Auto-name from component (e.g., creates ./components/LoginForm.tsx)
python3 cli.py react URL --write ./components/
# Explicit filename
python3 cli.py react URL --write ./SignUp.tsx
Validation: --code and --write are mutually exclusive. Neither can be combined with --output.
figma_list_components(url) to discover available componentsfigma_inspect_node(url?node-id=X) to understand a specific nodefigma_to_react(url?node-id=X) to produce reference code (~50-60% match)figma_list_components(url) to discover componentsfigma_to_react(url?node-id=X) to extract visual intent as reference codesearch_components("sidebar navigation"))get_component(name)When running /rune:design-sync, the figma-to-react MCP tools are used in Phase 1 (Design Extraction) to produce a reference code artifact. This reference code is stored as tmp/design-sync/{timestamp}/figma-reference.tsx and serves as visual intent input for Phase 1.5 (Component Match) when a UI builder is available.
Role in design-sync pipeline:
figma_to_react() → figma-reference.tsx (reference artifact, ~50-60% match)When running /rune:work or /rune:strive directly, rune-smith worker Ashes also have access to these tools. In that context, treat figma_to_react output as reference only — use it to understand visual intent, not as final implementation code.
Cache TTL environment variables (optional):
FIGMA_FILE_CACHE_TTL (default: 1800 seconds / 30 min)FIGMA_IMAGE_CACHE_TTL (default: 86400 seconds / 24 hr)