UI Design to Code
Design-to-code artifact pipeline for UI screenshots, Figma node data, and visual review.
Servidor MCP · de Kinglions
Resumo
UI Design to Code é um servidor MCP publicado por Kinglions. Marketplaces que lemos e que o listam: 2 (Official MCP Registry, Community GitHub marketplaces). Vimos pela primeira vez em 2026-10-11 e não registramos mudanças desde então. Conforme nossa passagem pelos marketplaces em 2026-10-15.
O que pede
- Roda na sua máquina
Nenhum dos marketplaces que lemos publica as ferramentas ou as configurações que ele pede.
O que declara, pede e executa, por completo
Instale apenas plugins de desenvolvedores em quem você confia. Mostramos o que os marketplaces publicam e não testamos plugins.
Pacote
npm ui-design-to-code-mcp (ui-design-to-code-mcp no npm)
- Downloads do npm por semana: 62 (2026-10-13)
- Downloads do npm por mês: 556 (2026-10-13)
- Última versão no npm: 0.1.13, publicada em 2026-06-26
Nenhuma vulnerabilidade conhecida no OSV para 0.1.12 (verificado em 2026-10-14)
Os dados do npm vêm do registro público do npm (registry.npmjs.org, api.npmjs.org). Cada número é do próprio registro e nunca é somado a outro. Um registro que não publica um número não mostra nenhum: sem número não é zero. Os registros de vulnerabilidades vêm do OSV.dev (CC BY 4.0) e dizem respeito apenas à versão declarada; uma listagem sem versão declarada não recebe resposta. Não analisamos código.
Funciona com
- Claude Code
- Codex
- Cursor
- VS Code
- Copilot CLI
Um link de um clique abre o cliente, que pede confirmação antes de adicionar o servidor.
Pelos marketplaces que o listam e pelo transporte MCP que declara, conforme cada cliente documenta. Não testamos plugins.
Conectar
Comandos e configurações gerados apenas a partir do que os marketplaces declaram. Não os executamos por você e não testamos plugins.
Como servidor MCP local: pacote npm
Gerado a partir do que Official MCP Registry declara.
claude mcp add --transport stdio ui-design-to-code-mcp -- npx -y ui-design-to-code-mcp[mcp_servers.ui-design-to-code-mcp]
command = "npx"
args = ["-y", "ui-design-to-code-mcp"]{
"mcpServers": {
"ui-design-to-code-mcp": {
"command": "npx",
"args": [
"-y",
"ui-design-to-code-mcp"
]
}
}
}Como plugin do Codex
Gerado a partir do que Community GitHub marketplaces declara.
codex plugin marketplace add kinglions/ui-design-to-code-mcpDepois abra /plugins no Codex e instale ui-design-to-code a partir desse marketplace.
Onde está publicado
| Marketplace | Status | Versão | Números | Verificado | Visto pela primeira vez |
|---|---|---|---|---|---|
| Official MCP Registry (Abrir o registro) | Listado | 0.1.12 | Downloads por mês (npm): 556 Downloads por semana (npm): 62 Forks (GitHub): 0 Estrelas (GitHub): 0 |
Sem marcação |
Cada número é do próprio marketplace e nunca é somado entre marketplaces. Um marketplace que não publica números não mostra nenhum: sem número não é zero.
Também listado em um marketplace da comunidade
| Marketplace | Repositório | Estrelas (GitHub) |
|---|---|---|
| ui-design-to-code | kinglions/ui-design-to-code-mcp | 0 |
O que o pacote contém
Conforme publicado em Community GitHub marketplaces.
Servidores MCP: 1
ui_design_to_code
O que mudou
- Apareceu em um novo marketplace: Community GitHub marketplaces
- Community GitHub marketplaces: apareceu
Plugins semelhantes
Produtos cujos próprios nomes, descrições, ferramentas e skills são os mais próximos deste pelo significado, em todos os marketplaces que lemos. A proximidade é ordenada apenas dentro desta lista.
-
Connect AI coding agents to Anima Playground, Figma, and your design system.
-
Figma-Context-MCP io.github.GLips/Figma-Context-MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
-
MCP server enabling AI assistants to interact with Figma designs via natural language commands
-
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
-
figma-designer io.github.a1245582339/figma-designer
Give AI agents full read & write access to Figma — 50+ tools for design automation
-
Generates React components and design frameworks from visual layouts.
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Translate HTML prototypes into Figma using your design system's real components and tokens.
-
canicode io.github.let-sunny/canicode
Analyze Figma designs for dev & AI readiness. 39 rules, scoring, HTML reports.
-
Figma designs pulled once into a local vault; AI agents read them offline with no rate limits
Plugins semelhantes por marketplace
A mesma pergunta feita a cada marketplace separadamente: existe lá um equivalente deste plugin?
Listado em Claude Code: claude-plugins-community (5)
-
Connect Claude Code to Figma with 46 MCP tools, 20 specialized skills, and 8 commands. Read, write, and analyze Figma designs directly — no REST API token required. Privacy-first…
-
Build frontend on autopilot. Pixel-perfect Figma-to-code with autonomous refinement.
-
pluginos-figma-operations-platform
Run any Figma operation from any LLM agent at ~230 tokens per call instead of ~28,000 — a 15× cost reduction on real design workflows. PluginOS bridges your Figma files to Claude…
-
AI-powered design generation in Figma using your real design system. Bridge extracts your DS (components, tokens, styles), writes validated specs, and generates production-ready…
-
Generate React code and build Figma designs with the Rayden UI component library. Includes full component API reference, design tokens, craft rules, anti-patterns, and layout…
Listado em Claude Code: claude-plugins-official (5)
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Design or redesign frontend UI and marketing graphics on the Superdesign infinite canvas. Reads your codebase for context, sets up a design system, and generates branchable design…
-
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
-
Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button. Includes templates for design…
-
Skills for creating MCP Apps with the MCP Apps SDK
Listado em Claude: knowledge-work-plugins (5)
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Accelerate design workflows — critique, design system management, UX writing, accessibility audits, research synthesis, and dev handoff. From exploration to pixel-perfect specs.
-
Harness Adobe's creative AI-powered tools to edit images, automate design workflows, and bring creative visions to life — from background removal to vectorization and professional…
-
Unity's official plugin for Claude Code, with curated skills for game development, monetization, and performance optimization.
-
AI-first project auditor and re-engineer based on the 9 design principles and 7 design patterns from the TechWolf AI-First Bootcamp
Listado em Codex: openai-curated (openai/plugins) (5)
-
Figma workflows for design implementation, Code Connect templates, and design system rule generation.
-
Use MagicPath to find, inspect, install, create, and edit UI components from Codex.
-
The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore…
-
Build web apps with frontend asset design, browser testing, UI components, payments, and database guidance.
-
Build iOS apps with workflows for App Intents, SwiftUI UI work, Simulator mirroring in the Codex in-app browser, performance profiling, leak investigation, and simulator debugging.
Listado em Community GitHub marketplaces (5)
-
Connect AI coding agents to Anima Playground, Figma, and your design system.
-
canicode io.github.let-sunny/canicode
Analyze Figma designs for dev & AI readiness. 39 rules, scoring, HTML reports.
-
Validate AI-built front-ends against Figma by tokens and geometry, not pixels.
-
figma-mcp-rust io.github.alvinindra/figma-mcp-rust
Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.
-
figma-mcp-rs io.github.jirayusueb/figma-mcp-rs
Figma/FigJam MCP server with read/write via plugin — no API token, no limits. 78 tools.
Listado em Copilot CLI: github/awesome-copilot (5)
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Model, visualize, and deploy applications with Radius from the GitHub Copilot app and CLI.
-
Capture, annotate, and embed screenshots and animated GIF demos in pull request descriptions. Includes Playwright-based UI capture, PIL image annotations, PR embedding workflows…
-
SAPUI5 / OpenUI5 plugin for GitHub CoPilot. Create and validate UI5 projects, access API documentation, run UI5 linter, get development guidelines and best practices for UI5…
-
Equips AI coding agents with knowledge and tooling for working with UI theme designer, the SAP Design System, and SAP Fiori design tokens.
Listado em Copilot CLI: github/copilot-plugins (5)
-
Build Power Apps Canvas Apps using the Canvas Authoring MCP server.
-
Toolkit for building Microsoft 365 Copilot declarative agents — scaffolding, JSON manifest development, and capability configuration.
-
mcp-apps
Generate MCP App widgets for MCP tools. Produces self-contained HTML widgets using the MCP Apps protocol.
-
code-apps-preview
Build and deploy Power Apps code apps using React, Vite, and Power Platform connectors.
-
model-apps
Build and deploy Power Apps generative pages for model-driven apps with specialist agents for planning, entity creation, and parallel code generation. Requires PAC CLI >= 2.7.0…
Listado em Cursor: cursor/plugins (5)
-
Render PR diffs as review canvases grouped by importance.
-
Build apps, scripts, and automations with the TypeScript SDK.
-
Render documentation as a navigable canvas.
-
Skills for building on the Cursor Origin API. Fetch the live spec first, then follow the Origin rules for credentials, scopes, webhooks, paging, and errors. Includes a skill that…
-
Generate presentations, documents, and webpages.
Listado em Docker MCP Catalog (5)
-
Generate images, video, and audio with Glif's media-generation agent
-
next-devtools-mcp is a Model Context Protocol (MCP) server that provides Next.js development tools and utilities for AI coding assistants.
-
MCP server for terminal commands, file operations, and process management
-
Stop stitching context for Copilot and Cursor. With Sequa MCP, your AI tools know your entire codebase and docs out of the box.
-
MCP server for AI access to SmartBear tools, including BugSnag, Reflect, Swagger, PactFlow, QTM4J.
Listado em Official MCP Registry (5)
-
Connect AI coding agents to Anima Playground, Figma, and your design system.
-
Figma-Context-MCP io.github.GLips/Figma-Context-MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
-
MCP server enabling AI assistants to interact with Figma designs via natural language commands
-
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
-
figma-designer io.github.a1245582339/figma-designer
Give AI agents full read & write access to Figma — 50+ tools for design automation
Encontrados pelo significado, não por código ou repositório em comum: plugins semelhantes continuam sendo produtos distintos, e isto não é uma avaliação nem uma recomendação.
Este plugin é seu?
Adicione-o aos seus projetos e prove que o mantém com um arquivo no repositório, um arquivo no seu domínio ou um registro DNS. Você recebe alertas quando um marketplace o publica, o remove, muda a marca de verificado ou o que ele pede, e o endpoint remoto passa a ser monitorado como um serviço web.
Dados de Official MCP Registry. Dados de Community GitHub marketplaces. Os números vêm das nossas próprias passagens regulares pelos marketplaces, última leitura em . Não publicamos dados de contato dos editores de plugins.