/ Directorio / Playground / Claude Code Design Skills
← Todos los servidores ↗ GitHub
● Comunidad scoobynko ⚡ Instantáneo

Claude Code Design Skills

por scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js de la manera correcta: reutilización de componentes primero, las variantes de Figma se asignan a los accesorios, TypeScript estricto, todo de forma predeterminada.

scoobynko/claude-code-design-skills es un paquete de habilidades de Claude Code para flujos de trabajo de diseño a código. La habilidad insignia 'Figma to Code' convierte los diseños de Figma en código React/Next.js listo para producción con reglas explícitas: prefiera reutilizar componentes existentes, mapee variantes de Figma a accesorios escritos, aplique límites frontend/backend y conecte todo desde el principio. Se combina con Figma MCP; se centra menos en la perfección de píxeles que en producir código que su equipo realmente fusionará.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

claude-code-design-skills.replay ▶ listo
0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Claude Code Design Skills

Crear una nueva página a partir de un marco de Figma.

👤 Ingenieros frontend que convierten diseños en código ⏱ ~45 min intermediate

Cuándo usarlo: Tienes un marco Figma listo y quieres un código React/Next.js que se ajuste a tu base de código.

Requisitos previos
  • Configuración de Figma MCP — Instale Figma MCP y proporcione una PAT
  • Habilidad instalada — git clone en ~/.claude-code/skills/
Flujo
  1. Señalar el marco
    Convierta este marco de Figma en una página Next.js: <figma URL>. Reutilice componentes de src/components/.✓ Copiado
    → El agente realiza un inventario de los componentes existentes antes de escribir otros nuevos.
  2. Variantes del mapa de accesorios
    Asigne las variantes de Figma a accesorios escritos (tamaño, intención, deshabilitado).✓ Copiado
    → Tipos de TS generados; no cualquiera
  3. datos simulados
    Utilice datos simulados; No inventes llamadas API. Mantenga el backend fuera.✓ Copiado
    → Limpie el componente sin recuperación con un archivo simulado

Resultado: Una página real de Next.js fusionada en un PR, sin reescritura por parte del revisor.

Errores comunes
  • Generando una biblioteca de componentes paralela junto a la existente — Comience con 'enumerar los componentes existentes' para que el agente reutilice lo que hay allí
Combinar con: figma · magic-ui-mcp

Sincronizar los accesorios de un componente con las variantes de Figma

👤 Equipos que mantienen un sistema de diseño. ⏱ ~25 min intermediate

Cuándo usarlo: Designer agregó una nueva variante en Figma y el código debe actualizarse.

Flujo
  1. Diferencia Figma contra el componente.
    Compare las variantes de Button (Figma) con los accesorios src/components/Button.tsx.✓ Copiado
    → Lista clara de delta: nueva variante, variante renombrada, etc.
  2. aplicar la diferencia
    Actualice Button.tsx para incluir la nueva variante 'fantasma'; preservar la API.✓ Copiado
    → Actualización escrita con un valor predeterminado que no interrumpe a las personas que llaman

Resultado: La deriva del sistema de diseño se cerró sin romper a los consumidores.

Convierta un flujo Figma con semántica correcta y gestión de enfoque

👤 Ingenieros frontend preocupados por la accesibilidad ⏱ ~45 min intermediate

Cuándo usarlo: Necesita un cuadro de diálogo/menú/formulario que pase la revisión de un lector de pantalla.

Flujo
  1. Pregunta por el flujo en código
    Cree el cuadro de diálogo de pago desde Figma: respete la trampa de enfoque, escape, movimiento reducido.✓ Copiado
    → Roles adecuados, etiquetado, gestión de enfoque, Esc-to-close
  2. Ejecutar la auditor
    Ejecute la habilidad claude-design-auditor en el resultado.✓ Copiado
    → Puntuación A11y ≥ 85

Resultado: Implementación accesible sin necesidad de tomar de la mano cada componente.

Combinar con: claude-design-auditor-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

claude-code-design-skills + figma

Tire de los marcos de Figma a través de MCP; convertir a través de esta habilidad

Recupera el cuadro X de Figma; Utilice la habilidad para convertir con la reutilización de componentes existentes.✓ Copiado
claude-code-design-skills + magic-ui-mcp

Asigne patrones de Figma a los componentes de Magic UI donde existan

Cuando Figma use un héroe desenfocado, use el desvanecimiento borroso de Magic UI en lugar de escribir uno.✓ Copiado
claude-code-design-skills + claude-design-auditor-skill

Verificar que el código generado pase la auditoría de 18 reglas

Después de la conversión, ejecute el auditor de diseño y corrija cualquier resultado ALTO.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
figma-to-code (SKILL) Figma frame URL + repo conventions Convertir un diseño en código que se ajuste a su base de código 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Ninguno por la habilidad; Figma MCP tiene su propia cuota
Tokens por llamada
Marco Figma + código existente + salida: puede ser grande; alcance el marco con precisión
Monetario
Gratis
Consejo
Convierta un cuadro a la vez; Las selecciones gigantes desperdician contexto y energía de revisión.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Figma PAT pertenece a Figma MCP, no a esta habilidad
Salida de datos: Ninguno de la habilidad; las llamadas de red ocurren en Figma MCP

Resolución de problemas

Errores comunes y soluciones

El agente escribe un nuevo botón en lugar de reutilizar el existente

Enumere explícitamente el directorio de componentes del repositorio en el mensaje.

Verificar: Include 'check src/components/ first' in the request
Accesorios faltantes para una variante más nueva de Figma

Solicite una diferencia variante antes de realizar la conversión; actualice el componente en lugar de bifurcarlo.

Verificar: Agent output includes a 'variants' section
Tipos demasiado sueltos (cualesquiera en todas partes)

Requerir 'no ninguno; fallará ruidosamente si no se puede escribir una variante".

Verificar: Search the diff for ': any'

Alternativas

Claude Code Design Skills vs otros

AlternativaCuándo usarlaContrapartida
magic-ui-mcpQuieres componentes animados prediseñados, no un convertidor FigmaPrimero la biblioteca, no el diseño
claude-design-auditor-skillQuiere evaluar la calidad del diseño, no generar códigoAuditar, no producir
hue-brand-skillNecesitas un lenguaje de diseño, no una conversión de cuadrosPrimero el sistema, no el fotograma

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills