Ncompose

Convert Figma designs into production-ready UI components for React, Vue, Svelte, Angular, and Solid.

nCompose takes a Figma URL and generates framework-native code with proper CSS, accessibility, icons, and variant support. It uses LLM intelligence to interpret design intent and the Mitosis compiler to target multiple frameworks from a single intermediate representation.

https://github.com/user-attachments/assets/a9d9b98c-9bec-4cdb-96c6-6eec151be67a

nCompose demo — Google Drive

Features

• Multi-framework output — One Figma design generates code for React, Vue, Svelte, Angular, and Solid simultaneously via Mitosis
• Variant-aware — Component sets with multiple variants (size, style, state) produce a single component with props, conditional CSS, and interactive states
• Multi-section pages — Full page designs (header, hero, features, footer) are split into sections, processed in parallel, and stitched into one component
• Chart detection — Pie, line, bar, and area charts are detected automatically and converted to interactive Recharts components
• Icon handling — SVG icons are exported from all variants, deduplicated by position + shape + color, and embedded with proper conditional rendering
• Accessibility — Generated code is validated with axe-core for WCAG compliance (serious/critical violations trigger auto-fix)
• Fidelity validation — CSS coverage, text content, layout structure, BEM consistency, and semantic HTML are validated against the Figma source
• Live preview — WebContainer-powered Vite dev server in the browser with hot reload, or server-rendered static preview with full variant grid
• Visual edit mode — Click any element in the preview to target it, then describe changes in natural language or edit CSS properties directly
• Iterative refinement — Chat with the LLM to refine generated code after initial conversion
• Template wiring — Wire generated components into a starter app with Tailwind CSS, cn() utility, and CSS variables
• GitHub push — Push generated code directly to GitHub via OAuth
• Security hardened — SSRF protection, SVG sanitization, prompt injection defense, rate limiting, and security headers

Getting Started

Prerequisites

• Node.js 22+
• Figma Personal Access Token — Generate here
• LLM API Key — At least one of: DeepSeek (recommended) or Anthropic (Claude)

Installation

git clone https://github.com/nesterlabs-ai/nCompose.git
cd nCompose
npm install

Quick Start

Web UI (recommended):

npm run web

Open http://localhost:3000 — paste a Figma URL, select frameworks, and click Convert.

CLI:

npm run dev -- convert "https://www.figma.com/design/XXXX/...?node-id=123-456" \
  -f react,vue,svelte \
  --llm deepseek \
  -o ./output

Usage

CLI Reference

ncompose convert <url> [options]

Arguments:
  url                          Figma design URL with node-id parameter

Options:
  -f, --frameworks <list>      Comma-separated frameworks: react,vue,svelte,angular,solid
                               (default: react)
  --llm <provider>             LLM provider: deepseek, claude
                               (default: deepseek)
  -o, --output <dir>           Output directory (default: ./output)
  --template                   Wire into starter app with Tailwind
  --preview                    Open preview after conversion

The Web UI is not a ncompose subcommand — start it from the repo with npm run web (see Quick Start). Port defaults to 3000 (override with the PORT environment variable).

After npm run build, you can also run npx ncompose or npx figma-to-code (backwards-compatible alias).

Web UI

The web interface provides a full-featured development experience:

• Live preview — WebContainer boots a Vite dev server in the browser with hot reload
• Monaco editor — VS Code's editor with syntax highlighting, multi-tab editing, and save-to-server
• Variant grid — Component set previews show all variant combinations
• Project sidebar — Recent projects with thumbnails, click to restore
• Visual edit — Click elements in the preview, then describe changes or edit CSS directly
• Chat refinement — Iteratively refine code by chatting with the LLM
• GitHub push — Push to GitHub via OAuth
• Download — ZIP download of all generated files
• Light/dark theme — Toggle with persistence

LLM Providers

We recommend using DeepSeek for conversions — it offers the best balance of speed, cost, and output quality.

How It Works

Pipeline Paths

Validation Pipeline

Every generated component passes through up to 6 validators:

1. Accessibility — axe-core WCAG audit (serious/critical)
2. BEM Consistency — CSS class names in JSX match the stylesheet
3. Semantic HTML — Correct elements for detected component type
4. CSS Fidelity — CSS properties match Figma design data
5. Text Fidelity — Text content from Figma appears in output
6. Layout Fidelity — Layout structure matches Figma hierarchy

Failures are fed back to the LLM for automatic correction (up to 3 retries).

Output Structure

output/
└── ComponentName-{sessionId}/
    ├── ComponentName.lite.tsx       # Mitosis source
    ├── ComponentName.jsx            # React
    ├── ComponentName.vue            # Vue
    ├── ComponentName.svelte         # Svelte
    ├── ComponentName.ts             # Angular
    ├── ComponentName.tsx            # Solid
    ├── ComponentName.meta.json      # Variant metadata
    ├── ComponentName.fidelity.json  # Validation report
    ├── assets/
    │   └── *.svg                    # Exported icons
    └── app/                         # Wired starter app (--template)

Roadmap

• Publish to npm as a standalone CLI package
• Tailwind utility class output mode (alongside BEM CSS)
• Storybook export with variant stories auto-generated
• Additional framework targets (Qwik, Lit)

Contributing

Contributions are welcome. See CONTRIBUTING.md for development setup, branch naming, commit conventions, and PR process.

License

MIT — Nester Labs