figma-to-tailwind
Convertir Variables de Figma a Tailwind CSS
Figma MCP genera código con variables propietarias como var(--spacing-4) que crean problemas de mantenimiento. Esta habilidad proporciona reglas de conversión claras para transformar estas variables en clases estándar de Tailwind CSS para un código frontend más limpio y fácil de mantener.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "figma-to-tailwind". Convertir este componente de Figma MCP con px-[var(--spacing-4,16px)] py-[var(--spacing-2,8px)] rounded-[var(--border-radius-rounded-md,8px)]
Resultado esperado:
- Convertido a: px-4 py-2 rounded-md
- Notas de conversión:
- • spacing/4 → px-4 (unidad base 16px × 4)
- • spacing/2 → py-2 (unidad base 8px × 2)
- • border-radius/rounded-md → rounded-md
Usando "figma-to-tailwind". Convertir tipografía con estilos inline: fontFamily, fontSize, fontWeight desde variables de Figma
Resultado esperado:
- Convertido a: clase de utilidad text-h5
- Nota: Tipografía se mapea a clases text-* personalizadas definidas en tailwind.config.ts
Auditoría de seguridad
SeguroThis skill is purely a documentation/guide file (281 lines of documentation + 176 lines of metadata) with no executable code. All 98 static findings are false positives: MCP tool references were misidentified as shell commands, SHA256 hashes were flagged as weak crypto, and file path references were misclassified as filesystem access. The skill provides conversion guidelines only.
Factores de riesgo
⚙️ Comandos externos (70)
🌐 Acceso a red (1)
📁 Acceso al sistema de archivos (1)
Puntuación de calidad
Lo que puedes crear
Limpiar salida de Figma MCP
Transformar código generado por Figma MCP con variables propietarias a clases estándar Tailwind para uso en producción
Automatizar implementación de diseño
Aplicar reglas de conversión automáticamente después de llamadas Figma MCP para producir código limpio y conforme a estándares
Validar uso de tokens de diseño
Verificar si el código sigue estándares de conversión e identificar uso directo de variables Figma que necesita refactorización
Prueba estos prompts
Convierte las variables de Figma en este código a clases estándar de Tailwind CSS usando la habilidad figma-to-tailwind. Enfócate en conversiones de espaciado, tamaño, border-radius y tipografía.
Revisa la conversión contra frontend/lib/figma-tailwind-map.ts para asegurar que las clases Tailwind coincidan con los valores originales de las variables de Figma.
Identifica cualquier variable de Figma que no pueda ser mapeada a clases estándar de Tailwind y sugiere adiciones apropiadas a tailwind.config.ts.
Transforma este componente de Figma MCP: convierte todas las variables de espaciado/ancho/alto a clases Tailwind, reemplaza estilos de tipografía inline con clases text-*, e identifica colores que deben permanecer como variables CSS.
Mejores prácticas
- Siempre referenciar el archivo figma-tailwind-map.ts antes de convertir para asegurar mapeo preciso de valores
- Verificar valores de variables Figma contra clases Tailwind reales - no depender solo de similitud de nombres
- Ejecutar verificaciones de linter y compilación después de la conversión para asegurar sin regresiones
Evitar
- Usar variables de Figma directamente en className como px-[var(--spacing-4)] en lugar de convertir a px-4
- Crear clases de utilidad personalizadas en globals.css para envolver variables Figma en lugar de usar Tailwind estándar
- Convertir tipografía usando estilos inline en lugar de aplicar clases de utilidad text-*