·figma-to-spirit
*

figma-to-spirit

alma-oss/spirit-design-system

Convierta diseños de Figma a código React utilizando componentes Spirit Web. Úselo cuando trabaje con diseños de Figma, implemente la interfaz de usuario a partir de archivos Figma, convierta diseños automáticos de Figma a código o cuando el usuario mencione Figma, componentes Spirit o conversión de diseño a código.

7Instalaciones·3Tendencia·@alma-oss

Instalación

$npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit

SKILL.md

CRITICAL: Match Figma layer hierarchy exactly. Each Figma autolayout layer should have a corresponding Spirit layout component.

| "Design Block" or main page section | Section | | Need to constrain content width | Section containerProps={{ size: "..." }} | | Full-width section content | Section hasContainer={false} |

Important: Section includes Container by default - don't nest another Container inside.

Convierta diseños de Figma a código React utilizando componentes Spirit Web. Úselo cuando trabaje con diseños de Figma, implemente la interfaz de usuario a partir de archivos Figma, convierta diseños automáticos de Figma a código o cuando el usuario mencione Figma, componentes Spirit o conversión de diseño a código. Fuente: alma-oss/spirit-design-system.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit
Categoría
*Creatividad
Verificado
Primera vez visto
2026-02-11
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es figma-to-spirit?

Convierta diseños de Figma a código React utilizando componentes Spirit Web. Úselo cuando trabaje con diseños de Figma, implemente la interfaz de usuario a partir de archivos Figma, convierta diseños automáticos de Figma a código o cuando el usuario mencione Figma, componentes Spirit o conversión de diseño a código. Fuente: alma-oss/spirit-design-system.

¿Cómo instalo figma-to-spirit?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/alma-oss/spirit-design-system

Detalles

Categoría
*Creatividad
Fuente
skills.sh
Primera vez visto
2026-02-11

Skills Relacionados

Ninguno