design-to-code
Convert Figma designs and screenshots to React/Svelte/Vue components with built-in accessibility
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