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

Necesita un cuadro de diálogo/menú/formulario que pase la revisión de un lector de pantalla. Implementación accesible sin necesidad de tomar de la mano cada componente.

Claude Code Design Skills — Instalar & Demo en vivo

Por qué usarlo

Características clave

Habilidad Figma-to-Next.js con prioridad de reutilización de componentes
Variante de Figma → mapeo de accesorios
Tipos estrictos de TypeScript listos para usar
Valores predeterminados de accesibilidad integrados
Patrones de datos simulados para la higiene de límites frontend/backend

Demo en vivo

Cómo se ve en la práctica

claude-code-design-skills.replay ▶ listo

0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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.

Flujo

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.
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
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

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.
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.

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

Herramienta	Entradas	Cuándo llamar	Coste
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

El código generado aún necesita revisión. "Pasa tipos" no significa "funciona correctamente en tiempo de ejecución".
No acepte ciegamente importaciones de componentes que no estén en su lista de permitidos; la habilidad prefiere la reutilización, pero aún posees la revisión.

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

Alternativa	Cuándo usarla	Contrapartida
magic-ui-mcp	Quieres componentes animados prediseñados, no un convertidor Figma	Primero la biblioteca, no el diseño
claude-design-auditor-skill	Quiere evaluar la calidad del diseño, no generar código	Auditar, no producir
hue-brand-skill	Necesitas un lenguaje de diseño, no una conversión de cuadros	Primero 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