Best for
- Frontend developers
- Design engineers
- Teams prototyping with Claude Code
D
Design To Code
Community
Convert Figma designs and screenshots to code components (React, Svelte, Vue)
GitHub source repository ↗
27FMRS · D
This server focuses on design-to-code conversion with clear functionality, but it's community-maintained and not official. Use with caution regarding credentials and generated code quality.
design-to-code is an MCP server that converts Figma design files and screenshots into usable frontend components, supporting frameworks like React, Svelte, and Vue. It is part of the Claude Code plugin marketplace under the Design category, runs over stdio, and includes built-in accessibility features. The server resides in the plugins/mcp/design-to-code subfolder of the jeremylongshore/claude-code-plugins-plus-skills repository and is distributed as an npm package.
Tools
convert_design_to_code
Converts a Figma design or screenshot to a code component in the specified framework.
analyze_design_assets
Analyzes design assets to extract styles, layout, and component structure.
export_code_component
Exports a design element as a reusable code component.
list_project_components
Lists components that have been converted in the project.
get_figma_token
Gets the configuration status of the Figma access token.
Setup
Ensure Node.js and npm are installed. Then add the server in your MCP client configuration: set mcpServers.design-to-code with command 'npx' and args ['-y', '@claude-code-plugins-plus/design-to-code']. Alternatively, in Claude Code, add the marketplace with '/plugin marketplace add jeremylongshore/claude-code-plugins' and then '/plugin install design-to-code@claude-code-plugins-plus'.
claude_desktop_config.json
{
"mcpServers": {
"design-to-code": {
"command": "npx",
"args": [
"-y",
"@claude-code-plugins-plus/design-to-code"
]
}
}
}
Fit and risk
Not for
- Non-developer users
- Scenarios requiring complex interaction logic
- Production-grade code generation (human review still needed)
Required permissions
- Access to Figma files (requires Figma API token)
- Read local screenshot files
- Generate code files (may write to disk)
Risks and side effects
- Requires a Figma token, which could expose sensitive designs
- Generated code may include insecure dependencies or lack optimization
- Third-party server not officially audited, supply chain risk
Troubleshooting
- Ensure the Figma token is valid and not expired
- Check that the npm package exists and the version is correct
- Verify the MCP client configuration for command and arguments
- Inspect server logs for detailed error messages
Use cases
Automatically convert Figma designs to React components
Convert UI screenshots to Svelte or Vue components
Quickly generate working frontend code during design iterations
Supported clients
Claude DesktopFull support
Claude CodeFull support