Design to Code
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
Installation
/plugin install design-to-code@claude-code-plugins-plus
3 MCP Tools
1. parse_figma
Extract components from Figma JSON export.
{
"json": "{\"name\": \"Button\", ...}",
"framework": "react"
}
2. analyze_screenshot
Analyze screenshot layout and extract UI elements.
{
"imagePath": "/path/to/screenshot.png",
"framework": "svelte"
}
3. generate_component
Generate code from layout specification.
{
"layout": {
"type": "container",
"children": [...]
},
"framework": "react",
"includeA11y": true
}
Quick Start
// 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
Accessibility Features
All generated components include:
- ARIA labels - Screen reader support
- Semantic HTML - Proper element usage
- Keyboard navigation - Tab order, focus states
- Color contrast - WCAG AA compliance checking
Supported Frameworks
- React - JSX with hooks
- Svelte - Single-file components
- Vue - Composition API
License
MIT License
Made with ️ by Intent Solutions
