Add to Claude Code
118 addsInstall 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
Paste into Claude Code to add this skill.
How to add
Full guide →Click Add, then paste into Claude Code. Claude will save it to the right location for you.
Target: .claude/commands/<name>.md