UI Design System Builder

Configure tokens, escolha variacoes e gere um CSS unico.

Use Tailwind apenas para o app do gerador. O CSS final usa somente variaveis, pronto para copiar em qualquer projeto.

HTML + CSS + JS puros Tailwind para o builder Exporta design-system.css e HTML de exemplo

Preview de tema

Usa data-theme no <html>

Card de exemplo

Usa as variaveis geradas para cores, sombras e raio.

Preencha os tokens abaixo e gere o CSS no final.

Configuracoes globais

Tokens do Design System

Preview rapido

Card

Titulo

Badge

Este preview usa o CSS gerado dinamicamente com os tokens atuais.

Componentes

Selecione ate 5 variacoes por tipo

Gerar CSS unico

design-system.css + HTML de exemplo

CSS final

HTML de documentacao (exemplos)

Pronto.