Servidor MCP que conecta asistentes de IA con Figma para extraer tokens de diseño, crear y editar diseños, y comprobar la paridad entre diseño y código y la accesibilidad.
3,2 mil+194 esta semana287TypeScriptMITBien mantenidoActualizado hace 9 días
DouyinFE/semi-design
Una biblioteca de componentes de React y un sistema de diseño con más de 80 componentes, integración de Figma a código y más de 3000 tokens de diseño.
- Estrellas
- 10,470
- Forks
- 853
- Issues abiertos
- 626
- Último commit
- anteayer
¿Qué es?
Semi UI es una biblioteca de componentes de React que incluye un sistema de diseño, pensada para equipos que buscan conectar diseño y desarrollo. Incluye más de 80 componentes con compatibilidad con interacciones de teclado, gestión del foco y ARIA, además de internacionalización, manejo de zonas horarias y RTL, y compatibilidad con SSR.
El proyecto ofrece un flujo de diseño a código mediante un plugin de Figma, que puede generar JSX con SCSS, Emotion o Tailwind, o un DSL de JSON Schema. En la dirección de código a diseño, genera un UI Kit de Figma que sigue los mismos temas que el código. Semi DSM, la parte de gestión del sistema de diseño, ofrece más de 3000 tokens de diseño para que los equipos definan su propio sistema visual sobre Semi UI.
La biblioteca está escrita en TypeScript, utiliza una arquitectura Foundation/Adapter y puede empaquetarse como web components para escenarios que requieren aislamiento del DOM. Se instala desde npm como @douyinfe/semi-ui.
Funciones clave
- 01Más de 80 componentes de React con interacciones de teclado y compatibilidad con ARIA
- 02Plugin de Figma que convierte diseños en JSX con SCSS, Emotion o Tailwind
- 03Generación de un UI Kit de Figma a partir del código, que coincide con sus temas
- 04Más de 3000 tokens de diseño para personalizar un sistema de diseño
- 05Tipos de TypeScript, compatibilidad con SSR y soporte para RTL e internacionalización
Casos de uso
- Crear dashboards de administración o aplicaciones React de back office con un conjunto de componentes listo para usar
- Convertir rápidamente diseños de Figma en código React con el plugin oficial
- Mantener un sistema compartido de tokens de diseño sincronizado entre diseño y código
- Crear extensiones de navegador o widgets de SDK que necesiten aislar el DOM mediante web components
Inicio rápido
- 1
Instala el paquete con npm
npm install @douyinfe/semi-ui - 2
Importa componentes del paquete y muéstralos en una aplicación React, como en el ejemplo del README
Antes de usarlo
- Es una biblioteca de React, por lo que solo sirve para proyectos basados en React.
- El README indica que solo son compatibles las 2 versiones más recientes de los principales navegadores modernos.
Temas
#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design
Preguntas frecuentes
- ¿Qué es semi-design?
- Una biblioteca de componentes de React y un sistema de diseño con más de 80 componentes, integración de Figma a código y más de 3000 tokens de diseño. Semi UI es una biblioteca de componentes de React que incluye un sistema de diseño, pensada para equipos que buscan conectar diseño y desarrollo. Incluye más de 80 componentes con compatibilidad con interacciones de teclado, gestión del foco y ARIA, además de internacionalización, manejo de zonas horarias y RTL, y compatibilidad con SSR.
- ¿semi-design es gratuito? ¿Qué licencia tiene?
- semi-design es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿semi-design sigue mantenido?
- Mantenimiento activo. El último commit de semi-design fue el 5 nov 2026.
- ¿Para qué puedo usar semi-design?
- Crear dashboards de administración o aplicaciones React de back office con un conjunto de componentes listo para usar Convertir rápidamente diseños de Figma en código React con el plugin oficial Mantener un sistema compartido de tokens de diseño sincronizado entre diseño y código Crear extensiones de navegador o widgets de SDK que necesiten aislar el DOM mediante web components
- ¿Cómo se instala semi-design?
- Instala el paquete con npm: npm install @douyinfe/semi-ui Importa componentes del paquete y muéstralos en una aplicación React, como en el ejemplo del README
- ¿Dónde consigo semi-design?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/DouyinFE/semi-design
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Colección seleccionada de archivos DESIGN.md extraídos de sitios de marcas para que los agentes de programación con IA generen interfaces que se ajusten a esos sistemas de diseño.
125,9 mil+1,2 mil esta semana13,9 milMITActualizado hace 10 días
Una CLI que permite a un asistente de IA crear y editar diseños reales y editables en tu aplicación local Figma Desktop, sin necesidad de una clave de API.
1,1 mil+11 esta semana132JavaScriptMITBien mantenidoActualizado hace 17 días
Skills de Claude Code para llevar diseños de Figma a una base de código y devolver el estado del código a Figma, además de una skill para gobernar el sistema de estilos.
582TypeScriptMITActualizado hace 3 meses
Plugin de Figma que convierte un diseño seleccionado en código editable para HTML, React, Svelte, Tailwind, Flutter o SwiftUI, y se ejecuta localmente.
5,3 mil+5 esta semana507TypeScriptGPL-3.0Bien mantenidoActualizado hace 3 meses
Biblioteca de componentes de UI para React y lenguaje de diseño de nivel empresarial para crear aplicaciones web.
100,1 mil+80 esta semana54,6 milTypeScriptMITBien mantenidoActualizado anteayer