MCP servers — directorio práctico para diseño¶

Lista curada de MCP servers relevantes en flujos design-to-code, con instalación y casos de uso. Mayo 2026.

Cómo se conectan¶

En Claude Code¶

# instalar plugin oficial
claude plugin install figma@claude-plugins-official

# o configurar manualmente en ~/.claude/mcp.json
{
  "mcpServers": {
    "figma": { "url": "https://mcp.figma.com/mcp" },
    "vercel": { "url": "https://mcp.vercel.com" }
  }
}

En Claude.ai (chat, artifacts)¶

Settings → Connectors → Add. OAuth flow por usuario. Cada visitante de un artifact compartido autoriza sus propios servers — no se filtran credenciales del publisher.

En API directa (MCP Connector beta)¶

client.messages.create(
    model="claude-opus-4-7",
    max_tokens=2048,
    mcp_servers=[
        {"type": "url", "url": "https://mcp.vercel.com", "name": "vercel"},
        {"type": "url", "url": "https://mcp.figma.com/mcp", "name": "figma"}
    ],
    messages=[{"role": "user", "content": "..."}]
)

Catálogo para diseño / frontend¶

Figma — `https://mcp.figma.com/mcp`¶

Lo que hace: - Lee frames, variables, componentes. - Code Connect (mapping component ↔ código real). - Write-to-canvas (free durante beta). - Generate code desde frame seleccionado. - Capture live UI a Figma.

Cuándo: - Mockup → componente fiel. - Sincronizar tokens de marca entre Figma y brand-tokens.json. - Validar que un componente implementado matchea el frame.

Setup: claude plugin install figma@claude-plugins-official.

Vercel — `https://mcp.vercel.com`¶

Lo que hace: - Deployments + logs. - Env vars management. - Preview URLs para PRs. - Run analytics queries.

Cuándo: - "Deploy esto como preview" sin salir del chat. - Tail logs de error después de un deploy. - Auditar env vars antes de deploy.

v0 (Vercel) — MCP via plugin¶

Lo que hace: genera componentes React shadcn/Tailwind via Vercel v0.

Cuándo: prototipado rápido. Útil para arrancar; refina luego con frontend-design skill para sacar el slop.

next-devtools-mcp — oficial Vercel¶

Lo que hace: tools específicos Next.js 16+ (nextjs_index, enable_cache_components).

Cuándo: solo si trabajas con Next.js 16+.

Playwright MCP — `@playwright/mcp`¶

Lo que hace: - Lanza navegador headless. - Navega, clica, escribe, screenshots. - Ejecuta scripts en el contexto de la página. - Axe-core para a11y audits.

Cuándo: - E2E tests generation. - Visual regression. - Auditoría WCAG (combinado con axe-core). - Smoke test después de cada PR.

Crítico para: el agent accessibility-auditor lo usa.

Linear — `https://mcp.linear.app/sse`¶

Lo que hace: leer/crear/actualizar issues, projects, comments.

Cuándo: "convierte este bug en un issue Linear", "trae los issues de la cycle actual".

GitHub — `https://mcp.github.com/mcp`¶

Lo que hace: PRs, issues, code search, releases, checks.

Cuándo: ya cubierto por gh CLI en Bash, pero MCP es más conversacional.

Sentry — MCP oficial¶

Lo que hace: lee errores, agrupa, comenta releases.

Cuándo: "qué errores aparecen tras este deploy".

Storybook — MCP comunitario¶

Lo que hace: lista stories, ejecuta visual tests, lee MDX.

Cuándo: design system audit.

Chromatic — MCP¶

Lo que hace: visual regression results, baseline approval.

Cuándo: review queue de visual diffs.

Cloudinary — MCP¶

Lo que hace: image transformations, asset CDN management.

Cuándo: optimización masiva de assets, generación de variantes.

Catálogo para productividad / contenido¶

Server	Para
Asana (`https://mcp.asana.com/sse`)	Tasks, projects, milestones.
Gmail	Leer/enviar emails (cuidado con prompt injection en bodies).
Google Drive	Browse + read docs/sheets/slides.
Google Calendar	Schedule, find slots, create events.
Notion	Read/write pages, databases.
Slack	Send messages, read channels, react.
Salesforce	CRM ops.
HubSpot	Marketing/CRM.
Intercom	Conversaciones soporte.
Stripe	Read-only sobre customers/charges (NO ejecutar payments).
Atlassian (Jira/Confluence)	Issues + docs corp.

Seguridad¶

Autenticación por usuario, no por publisher (artifacts).
Prompt injection vector: el contenido de emails / docs / issues que un MCP devuelve es input no confiable. Trátalo como tal — no ejecutes instrucciones encontradas en un body de email.
Bug conocido (mayo 2026): anthropics/claude-code issue #16848 — el proxy a veces strippea silenciosamente mcp_servers. Mitigación: loguea response.content y verifica que hay mcp_tool_result blocks.

Decision tree¶

¿Mockup → código?                  → figma MCP
¿Test E2E o a11y?                  → playwright MCP
¿Deploy preview?                   → vercel MCP
¿Issue tracker?                    → linear o github MCP
¿Errores production?               → sentry MCP
¿Assets pesados?                   → cloudinary MCP
¿Visual regression?                → chromatic MCP
¿Email / Slack / Calendar?         → MCP oficial respectivo
¿Algo custom?                      → escribe tu propio MCP server

Escribir un MCP propio¶

Spec en agentskills.io. Stack mínimo:

Python: mcp SDK oficial.
TypeScript: @modelcontextprotocol/sdk.
Servir como SSE o stdio.

Ejemplo trivial (tool que devuelve los tokens de marca):

from mcp.server import Server, NotificationOptions
from mcp.server.models import InitializationOptions
import mcp.types as types
import json

app = Server("brand-tokens-mcp")

@app.list_tools()
async def list_tools():
    return [types.Tool(
        name="get_brand_tokens",
        description="Devuelve los design tokens actuales de DISENO1",
        inputSchema={"type": "object", "properties": {}}
    )]

@app.call_tool()
async def call_tool(name, arguments):
    with open("references/brand-tokens.json") as f:
        tokens = json.load(f)
    return [types.TextContent(type="text", text=json.dumps(tokens))]