Flash DSM - O genoma de design com que seus agentes constroem.

Componha suas fundações. Cada componente e módulo acompanha. O genoma de design sabe onde cada um vive e o que muda junto quando algo muda.

Pule o Figma. Comece pelo design system.

O Figma - e toda ferramenta que começa pelo canvas - foi feito para desenhar imagens de um design system, não para construir um. Você pinta primeiro, depois faz engenharia reversa de um sistema por baixo e entrega um código que nunca bate direito. O Flash inverte a ordem: construa o sistema primeiro e vá direto para um código que realmente bate com o design. E como o sistema é legível por máquina, ele também serve de guardrail para tudo o que suas ferramentas de IA gerarem.

Cor, tipografia, espaçamento, componentes - tudo ligado.

Dê ao Flash um briefing, uma URL ou um arquivo do Figma e ele corta o molde para você: escalas de cor completas nos dois temas, um par tipográfico, espaçamento, raios, movimento e componentes que referenciam tudo isso. Esse é o ponto de partida, não o produto. O produto é o que você faz dele no editor.

Descreva

Escreva um prompt, cole a URL de um site no ar ou conecte um arquivo do Figma. Em qualquer caso, o Flash extrai o DNA do design.

Deixe com a sua cara

O Flash monta escalas completas de tokens - cores em claro e escuro, um par tipográfico, espaçamento, raios, sombras, movimento - e você edita tudo ali mesmo. Troque a fonte, reajuste uma escala, descarte as escolhas com que não concorda.

Publique

Exporte variáveis CSS, uma config do Tailwind ou JSON do Tokens Studio. Envie direto para o GitHub.

• Extraindo o DNA da marca
• Montando escalas de cor
• Combinando fontes
• Definindo espaçamento e raios
• Ajustando movimento e efeitos
• Mapeando componentes

+ 8–14 componentes específicos do domínio, mapeados para tokens

Um molde. Todos os tecidos que você quiser.

O molde do alfaiate guarda o caimento e as costuras. Nunca guarda a cor do tecido. É essa separação que deixa um único sistema vestir a empresa inteira.

O molde que todos compartilham

Estrutura é a parte que não deveria variar: do que um card é feito, como um botão espaça o texto, quais estados existem. O Flash guarda isso em um lugar só, então todo produto corta pela mesma forma.

O tecido que cada produto escolhe

Cor, tipografia, raio, movimento. O tema fica por cima da estrutura e troca sem encostar nela, então um time pode não parecer nada com o outro e ainda assim compartilhar cada componente.

Por que os sistemas travam

Publique um componente que também é um azul específico e o próximo time diz que aquele não é o azul dele e escreve o próprio. Dois meses depois você mantém dois sistemas. Manter o tecido separado é o que evita isso.

Um design system achata o trabalho?

Ele resolve as partes que ninguém deveria ficar redecidindo, e é isso que abre espaço para as partes que só você teria feito.

Cada design system é único

O Flash não entrega um template para você. Fundações, componentes e módulos - tudo feito para a sua marca, e não o contrário.

Seu próprio estilo

Cores, tipografia e espaçamento são definidos por você - nunca escolhidos de uma paleta pronta.

Arte, efeitos e movimento

Ilustrações, efeitos, animações e transições fazem parte do sistema, não são acréscimos avulsos pregados em uma única tela.

Componentes e módulos, do seu jeito

Crie novos componentes e módulos que combinam com a visão do seu produto. O Flash não prende você a uma biblioteca fixa.

Ainda sem logos de clientes.

O Flash é novo, e depoimentos são fáceis de juntar. Aqui vão três coisas que dá para conferir por conta própria antes de pagar qualquer coisa.

Abra os exemplos

Todo sistema desta página é público. Abra um, leia os tokens que ele gerou, faça um fork para a sua conta e desmonte. Nada disso é print.

Pegue os arquivos e vá embora

As exportações são tokens.css, uma config do Tailwind e JSON do Tokens Studio: arquivos simples que você poderia ter escrito à mão. Continuam funcionando com ou sem a gente.

Leia as datas

Cada correção e cada funcionalidade fica registrada com o dia em que foi publicada. Se o ritmo cair, você vai ver aqui antes que alguém avise.

Dúvidas?

O que é o Flash?

O Flash é um construtor de design systems. A partir de um prompt, da URL de um site no ar ou de um arquivo do Figma, ele monta uma arquitetura completa de tokens - escalas de cor em claro e escuro, pares tipográficos, espaçamento, raios, sombras, movimento - mais componentes específicos do seu domínio, mapeados para esses tokens. Você edita e depois exporta CSS, Tailwind, JSON do Tokens Studio ou envia para o GitHub.

Por que builders de IA precisam de um design system?

Ferramentas como Lovable, v0 e Bolt geram telas rápido, mas cada prompt novo inventa suas próprias cores e espaçamentos se nada os fixar. Um design system é essa camada de regras: entregue tokens legíveis por máquina a essas ferramentas e o resultado continua fiel à marca, mantém contraste acessível e bate com o código que você já publicou. O Flash constrói essa camada e a serve nos formatos que elas realmente leem - kit.md, arquivos de tokens e MCP.

Para quem é o Flash?

Design engineers - sozinhos ou em time - que respondem pela qualidade da UI mas não têm tempo de policiar um design system. Também feito para times de desenvolvimento que andam rápido e precisam de um sistema que acompanhe o ritmo das entregas.

O Flash é gratuito?

Sim, para começar. Toda conta cria um Genome, ou seja, um design system e tudo o que se baseia nele, de graça e sem cartão. Pro, Team e Studio adicionam pull de módulos, sincronização de atualizações, um Genome compartilhado e a entrega para clientes - veja na página de preços o que fica em cada plano.

Posso importar o que já tenho?

Conecte um arquivo do Figma, cole a URL de qualquer site no ar ou puxe do GitHub e do Storybook. O Flash extrai o DNA de design que já existe e o transforma em tokens estruturados e editáveis.

O Flash fica em sincronia com o Figma e com o meu código?

O que já é real hoje: importar do Figma, de uma URL ou de uma base de código; exportar CSS, Tailwind e JSON do Tokens Studio; enviar para o GitHub; mandar variáveis para o Figma pelo plugin do Flash. A sincronização mais profunda nos dois sentidos - mudanças voltando sozinhas do código e do Figma - está a caminho, e preferimos prometer menos a fingir que já está pronta.

O que posso exportar?

Formatos prontos para produção: tokens.css com propriedades customizadas de CSS, uma extensão do tailwind.config.js, JSON do Tokens Studio que vai e volta do Figma, e especificações de componentes. Você também pode enviar direto para o GitHub.

Ele gera código de verdade, usável?

As exportações são as mesmas variáveis CSS e tokens do Tailwind que você escreveria à mão, prontos para entrar na sua base de código. Sem runtime proprietário, sem lock-in.

Qual a diferença entre o Flash e os geradores de UI com IA?

Geradores de tela entregam mockups. O Flash entrega o sistema por baixo deles: escalas consistentes, tokens semânticos, os dois modos de cor e componentes que referenciam tokens em vez de valores fixos - assim, tudo o que você construir depois continua consistente.

O que o Flash gera é meu?

Totalmente. Cada token, especificação de componente e exportação pertence a você - use em trabalhos para clientes, produtos comerciais ou nas suas próprias ferramentas de design.