Install this Claude Code skill.
Name: Figma to Code Converter
Save to: ~/.claude/skills/figma-to-code-converter.md

---
---
name: Figma to Code Converter
description: Convert a Figma frame or component into React + Tailwind code
---

Convert this Figma design to code: $ARGUMENTS

## Prerequisites

This skill requires the Figma MCP server to be configured with a valid access token.

## Instructions

1. Parse the input (expect either a Figma URL or file key + node ID pair)
2. Use `get_file_nodes` to fetch the target frame/component
3. Analyze the design structure:
   - Layout direction (horizontal/vertical to flex-row/flex-col)
   - Spacing, padding, gaps (map to Tailwind spacing scale)
   - Colors (map to closest Tailwind color or use arbitrary values)
   - Typography (font size, weight, line height)
   - Border radius, shadows, opacity
4. Generate semantic React + Tailwind code:
   - Use semantic HTML elements (nav, main, section, article, button)
   - Use Tailwind utility classes, not inline styles
   - Extract repeated patterns into sub-components
   - Add responsive breakpoints where the layout implies them
5. If the design includes images, use `get_image` to export them and note the paths

## Output

Return a single React component file with:
- Props interface for any dynamic content (text, images, handlers)
- Tailwind classes for all styling
- Comments noting any design decisions or ambiguities

## Constraints

- Do NOT generate pixel-perfect absolute positioning: use flexbox/grid
- Round values to the nearest Tailwind scale step (e.g., 13px to `gap-3`)
- If a color doesn't match Tailwind's palette, use the nearest named color + a comment
- Flag any interactions (hover, click, animation) that need implementation