Figma to Code

Pixel-perfect design-to-code conversion from Figma using the Figma MCP server. Use when converting Figma designs into code with 1:1 accuracy.

Installation

Clone and use anywhere, or install in Claude Code. CLI tool coming soon for npm/npx installation.

Clone the repository and access all skills:

git clone https://github.com/hyperfx-ai/agentfx-skills.git

Included files:

@agentfx/skills/startup-credits/SKILL.md
@agentfx/skills/startup-credits/references/program-database.md
@agentfx/skills/startup-credits/references/application-workflows.md
@agentfx/skills/startup-credits/references/verification-checklist.md

SKILL.md

Systematically converts Figma designs into pixel-perfect code using the Figma Model Context Protocol (MCP) with an iterative comparison workflow.

## When to Use This Skill

This skill should be used when:
- Given a Figma design URL to implement in code
- Converting Figma components, frames, or pages into frontend code
- Building UI that must match Figma designs exactly
- Extracting design tokens, variables, and styles from Figma
- Maintaining 1:1 parity between Figma designs and code implementation

## How It Works

1. **Parse Figma URL** - Extract file key and node ID
2. **Get Design Context** - Use MCP to fetch design data
3. **Generate Code** - Create component implementation
4. **Compare & Iterate** - Screenshot comparison for accuracy
5. **Refine** - Adjust until pixel-perfect match

## Requirements

- Figma MCP server installed and configured
- Access to Figma files (public or with token)
- Screenshot capability for comparison

View the complete implementation on [GitHub](https://github.com/hyperfx-ai/agentfx-skills/tree/main/figma/figma-to-code).