AI Design Compiler — transforms Figma designs into clean, production-ready code for multiple frontend frameworks.

This is not a simple Figma-to-code converter. It is a full design compiler with an intermediate Design AST, AI optimization layer, plugin-based framework generators, and intelligent merge support for existing projects.

Figma
  ↓
Figma Parser
  ↓
Design Token Extraction
  ↓
Component Detection
  ↓
Intermediate Design AST
  ↓
AI Optimization Layer
  ↓
Framework Generator (Plugin)
  ↓
Production Code

# Install from npm (after publish)
npm i -g @figma-to-code/cli

# Or run without installing
npx @figma-to-code/cli login --figma-token <your-token>

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Login with Figma
pnpm exec design2code login --figma-token <your-token>

# Import a Figma file
pnpm exec design2code import --file <figma-file-key>

# Generate React components
pnpm exec design2code generate --framework react --scope component

# Generate with design system
pnpm exec design2code generate --framework flutter --scope feature --design-system design.md

# Preview without writing files
pnpm exec design2code generate --framework nextjs --scope screen --preview

# Merge into existing project
pnpm exec design2code generate --framework react --scope component --merge --project ./

Place a design.md in your project root to tell the compiler about your design system:

# Design System: My App

## Framework
- framework: react
- architecture: feature-first
- state: zustand
- ui: tailwind

## Colors
- primary: #6366F1

## Typography
- heading-lg: Inter 32px 700

## Components
- Button: src/components/Button

See examples/design.md for a complete example.

Design2Code AI includes an MCP server for direct use in Claude Desktop and Cursor:

{
  "mcpServers": {
    "design2code": {
      "command": "npx",
      "args": ["@figma-to-code/mcp-server"],
      "env": {
        "FIGMA_TOKEN": "your-figma-token"
      }
    }
  }
}

• design2code_generate — Generate code from Design AST or Figma
• design2code_import_figma — Import Figma file to Design AST
• design2code_parse_design_md — Parse design.md configuration
• design2code_detect_project — Detect existing project framework/architecture
• design2code_preview — Preview generated code

packages/
├── compiler-core/        # Main compiler orchestration
├── design-ast/           # Intermediate Design AST types
├── design-token-engine/  # Token extraction & transformation
├── component-detector/   # UI component pattern detection
├── figma-parser/         # Figma REST API → Design AST
├── ai-engine/            # AI optimization layer
├── merge-engine/         # Existing project merge & diff
├── generator-sdk/        # Plugin SDK for generators
├── generators/
│   ├── flutter/
│   ├── react/
│   ├── nextjs/
│   └── react-native/
├── cli/                  # Command-line interface
└── mcp-server/           # Claude/Cursor MCP integration

Every framework generator implements the Generator interface:

interface Generator {
  parse(context: GeneratorContext): Promise<GeneratorContext>;
  transform(context: GeneratorContext): Promise<GeneratorContext>;
  generate(context: GeneratorContext): Promise<GenerationResult>;
  postProcess(result: GenerationResult, context: GeneratorContext): Promise<GenerationResult>;
}

Adding a new framework requires only a new generator package — no core changes.

The merge engine:

• Detects project type (Flutter, React, Next.js, React Native)
• Understands folder structure, themes, and naming conventions
• Supports create, merge, replace, and preview diff modes
• Never blindly overwrites files

pnpm install
pnpm build
pnpm test
pnpm lint

MIT