Um servidor MCP que conecta assistentes de IA ao Figma para extrair tokens de design, criar e editar designs e verificar a paridade entre design e código e a acessibilidade.
3,2 mil+225 esta semana293TypeScriptMITBem mantidoAtualizado há 9 dias
DouyinFE/semi-design
Biblioteca de componentes React e sistema de design com mais de 80 componentes, suporte à conversão de designs do Figma em código e mais de 3000 tokens de design.
- Estrelas
- 10,473
- Forks
- 854
- Issues abertas
- 626
- Último commit
- há 3 dias
O que é?
Semi UI é uma biblioteca de componentes React integrada a um sistema de design, voltada para equipes que querem aproximar design e desenvolvimento. Ela oferece mais de 80 componentes com suporte a interações pelo teclado, gerenciamento de foco e ARIA, além de internacionalização, suporte a fusos horários e RTL, e compatibilidade com SSR.
O projeto inclui um fluxo de conversão de design em código por meio de um plugin do Figma, que pode gerar JSX com SCSS, Emotion ou Tailwind, ou um DSL de JSON Schema. No sentido inverso, o fluxo Code-to-Design gera um UI Kit para Figma que segue os mesmos temas do código. O Semi DSM, componente de gerenciamento do sistema de design, disponibiliza mais de 3000 tokens de design para que as equipes definam seu próprio sistema visual com base no Semi UI.
A biblioteca é escrita em TypeScript, usa uma arquitetura Foundation/Adapter e pode ser empacotada como web components para cenários que exigem isolamento do DOM. A instalação é feita pelo npm, usando o pacote @douyinfe/semi-ui.
Recursos principais
- 01Mais de 80 componentes React com suporte a interações pelo teclado e ARIA
- 02Plugin do Figma que converte designs em JSX com SCSS, Emotion ou Tailwind
- 03Geração de um UI Kit para Figma com o fluxo Code-to-Design, alinhado aos temas do código
- 04Mais de 3000 tokens de design para personalizar um sistema de design
- 05Tipagens TypeScript, compatibilidade com SSR e suporte a RTL e internacionalização
Casos de uso
- Criar dashboards administrativos ou aplicações React de back-office com um conjunto de componentes pronto para uso
- Converter designs do Figma rapidamente em código React com o plugin oficial
- Manter um sistema compartilhado de tokens de design sincronizado entre design e código
- Criar extensões de navegador ou widgets de SDK que precisam de isolamento do DOM por meio de web components
Início rápido
- 1
Instale o pacote com npm
npm install @douyinfe/semi-ui - 2
Importe componentes do pacote e renderize-os em um app React, como no exemplo do README
Antes de usar
- É uma biblioteca React, então só se encaixa em projetos criados com React.
- O README lista suporte apenas às 2 versões mais recentes dos principais navegadores modernos.
Tópicos
#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design
Perguntas frequentes
- O que é semi-design?
- Biblioteca de componentes React e sistema de design com mais de 80 componentes, suporte à conversão de designs do Figma em código e mais de 3000 tokens de design. Semi UI é uma biblioteca de componentes React integrada a um sistema de design, voltada para equipes que querem aproximar design e desenvolvimento. Ela oferece mais de 80 componentes com suporte a interações pelo teclado, gerenciamento de foco e ARIA, além de internacionalização, suporte a fusos horários e RTL, e compatibilidade com SSR.
- semi-design é gratuito? Qual é a licença?
- semi-design é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
- semi-design ainda é mantido?
- Manutenção ativa. O último commit de semi-design foi em 5 de nov. de 2026.
- Para que posso usar semi-design?
- Criar dashboards administrativos ou aplicações React de back-office com um conjunto de componentes pronto para uso Converter designs do Figma rapidamente em código React com o plugin oficial Manter um sistema compartilhado de tokens de design sincronizado entre design e código Criar extensões de navegador ou widgets de SDK que precisam de isolamento do DOM por meio de web components
- Como instalar semi-design?
- Instale o pacote com npm: npm install @douyinfe/semi-ui Importe componentes do pacote e renderize-os em um app React, como no exemplo do README
- Onde consigo semi-design?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/DouyinFE/semi-design
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Coleção selecionada de arquivos DESIGN.md extraídos de sites de marcas, para que agentes de programação com IA gerem interfaces alinhadas a esses sistemas de design.
126 mil+1,2 mil esta semana14 milMITAtualizado há 10 dias
Uma CLI que permite a um assistente de IA criar e editar designs reais e editáveis no Figma Desktop local, sem precisar de uma chave de API.
1,1 mil+13 esta semana132JavaScriptMITBem mantidoAtualizado há 17 dias
Skills do Claude Code que levam designs do Figma para a base de código e sincronizam o código de volta para o Figma, além de uma skill para governança do sistema de estilos.
582TypeScriptMITAtualizado há 3 meses
Plugin do Figma que converte uma seleção de design em código editável para HTML, React, Svelte, Tailwind, Flutter ou SwiftUI, executado localmente.
5,3 mil+4 esta semana507TypeScriptGPL-3.0Bem mantidoAtualizado há 3 meses
Biblioteca de componentes de UI e linguagem de design para React, voltada à criação de aplicações web corporativas.
100,1 mil+77 esta semana54,6 milTypeScriptMITBem mantidoAtualizado há 9 horas