design-to-code

Featured mcp v1.0.0 by Jeremy Longshore

Convert Figma designs and screenshots to React/Svelte/Vue components with built-in accessibility

3 MCP Tools
MIT License
Free Pricing

Installation

Open Claude Code and run this command:

/plugin install design-to-code@claude-code-plugins-plus

Use --global to install for all projects, or --project for current project only.

What It Does

Convert Figma designs and screenshots to production-ready code components

Transform design files into React, Svelte, or Vue components with built-in accessibility.

Features

  • Figma Parser - Extract components from Figma JSON exports
  • Screenshot Analysis - Analyze UI layouts from images
  • Code Generation - React, Svelte, Vue components
  • A11y Built-in - ARIA labels, semantic HTML, keyboard navigation
  • Style Extraction - Colors, typography, spacing

How It Works


// 1. Parse Figma design
const design = await parse_figma({
  json: figmaExport,
  framework: 'react'
});

// 2. Generate component
const component = await generate_component({
  layout: design.layout,
  framework: 'react',
  includeA11y: true
});

// Result: Production-ready React component with accessibility

Ready to use design-to-code?