Design To Code

Community

Convert Figma designs and screenshots to code components (React, Svelte, Vue)

How to install ↓ Compare GitHub source repository ↗

Category: Dev Tools #422 of 438
Stars: ★ 2.8k Very popular
Transport: stdio (local process)
Runtime: Node.js
Credentials: Optional API key
License: MIT
Last commit: today
Tools: 5

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.

Strongest · Maintenance 10/20 Weakest · Reliability 3/20

Reliability

3/20

Security and permissions

4/20

Maintenance

10/20

Documentation

4/20

Setup experience

6/20

Why each score

Reliability 3/20: Only the manifest and the marketplace-level README were supplied; no source code, tests, CI workflows, or tool list for plugins/mcp/design-to-code were available. The manifest declares an npm package with stdio transport and a feature description, but nothing verifies that the process starts cleanly, completes the MCP initialization and tool-list handshake, or that the declared Figma/screenshot-to-code behavior matches real tools. With missing evidence treated as a deduction and uncertainty rounded down, the reliability score is very low.
Security and permissions 4/20: No source code was available to review, so credential handling, least-privilege configuration, data boundaries, and confirmation flows cannot be assessed. The service handles design data and screenshots, and a Figma integration would typically need API tokens, but no data-flow or permission-scope disclosure is present in the supplied material. No red-line issues (malware, credential theft, covert exfiltration, destructive defaults) were found, but absence of evidence is not evidence of safety, so the score is low.
Maintenance 10/20: The repository is not archived, the manifest declares an MIT license, and the README claims active releases and validator-gated PR checks, but the static review cannot confirm that these apply to the design-to-code server package specifically. There is no per-plugin changelog, security-response channel, or dependency-update evidence. Repo-level popularity is a discovery signal only and adds no points. The score reflects the active-but-governance-gaps anchor.
Documentation 4/20: The supplied documentation consists of a one-line description in the manifest and a short entry in the README category table. There are no tool-parameter references, authentication guides, rate/cost limits, troubleshooting guidance, or client configuration examples for this server. The generic ccpi installation and /plugin marketplace add commands in the repo README name an install entry point but do not document this server's behavior. The score sits just above the contradicts-capability floor.
Setup experience 6/20: The manifest provides an npm package identifier and stdio transport, and the repo README shows marketplace-add and ccpi install commands, making a setup path plausible. However, there is no per-server client configuration example, no platform-compatibility note, and no verifiable execution evidence (CI or committed tests) to lift the score above the static-review cap. Manual integration steps are implied rather than documented, so the score is modest.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessUses the network

Best for

Frontend developers
Design engineers
Teams prototyping with Claude Code

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

Setup

Before you start

Runtime：Node.js

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"
      ]
    }
  }
}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json

{
  "servers": {
    "design-to-code": {
      "command": "npx",
      "args": [
        "-y",
        "@claude-code-plugins-plus/design-to-code"
      ]
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal

claude mcp add design-to-code -- npx -y @claude-code-plugins-plus/design-to-code

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

After connecting the design-to-code server in your client, confirm the tool list shows convert_design_to_code, analyze_design_assets, and the other three tools; or ask the AI to call get_figma_token to confirm Figma credential status.

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

Things to try

Once connected, you can ask your AI assistant things like:

Convert this Figma design into a React component
Analyze the assets in this design screenshot
List all components in my Figma project
Export the generated component as a Svelte component

Tools 5

convert_design_to_code writes

Converts a Figma design or screenshot to a code component in the specified framework.

analyze_design_assets read-only

Analyzes design assets to extract styles, layout, and component structure.

export_code_component writes

Exports a design element as a reusable code component.

list_project_components read-only

Lists components that have been converted in the project.

get_figma_token read-only

Gets the configuration status of the Figma access token.

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 Desktop

Claude Code

Listed from the project's documentation, not tested by this site.

Overview

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.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 62.9k · Tools 2 Compare with this →

NPM Sentinel MCP Server 79 · B

AI-powered NPM package analysis MCP server

★ 18 · Tools 19 Compare with this →

MartinLoop MCP Server 79 · B

An independent control layer that gives AI coding agents budgets, brakes, and receipts

★ 410 Compare with this →

GitHub MCP Server 76 · B

GitHub's official MCP server for managing repos, issues, PRs, and workflows via natural language

★ 33.5k · Tools 15 Compare with this →

Compare with other MCP servers

More servers from this repository

Source revision ebea1067983c Data synced 2026-10-12 Read the FMRS scoring method