Se você já se cansou de repetir "use a nossa cor primária", "esse botão está diferente do resto" ou "padroniza os espaçamentos", este guia é para você. Vamos explicar o que é um Design System em linguagem simples, como ele funciona dentro da Lovable e o que fazer se o recurso nativo ainda não estiver no seu plano.
O que é um Design System em linguagem simples
Design System é o conjunto de decisões visuais e de componentes que o seu produto reutiliza sempre: cores, tipografia, espaçamentos, cantos arredondados, sombras, botões, campos de formulário, cards e por aí vai. Em vez de decidir tudo de novo a cada tela, você decide uma vez e reaplica.
Pense em uma caixa de peças padronizadas. Quando todo mundo monta com as mesmas peças, o resultado é coerente, mais rápido de produzir e muito mais fácil de manter.
Por que isso importa em projetos feitos com IA
- Evita inconsistência: sem padrão, cada tela nasce com um tom de azul e um tamanho de botão diferente.
- Evita repetição de instruções: você para de reescrever as mesmas regras de estilo em todo prompt.
- Reduz retrabalho: menos idas e vindas para acertar o visual significa menos consumo de créditos.
- Acelera novos projetos: o padrão já entra pronto no projeto novo.
- Profissionaliza a marca: produto consistente transmite confiança.
Se o seu objetivo é reduzir ciclos de tentativa e erro, vale combinar este guia com as práticas de como economizar créditos na Lovable.
Como os Design Systems funcionam na Lovable
Na Lovable, um Design System não é um arquivo solto: ele é um projeto dedicado, criado pelo fluxo próprio da plataforma, que serve como source of truth. Esse projeto pode ser aberto e editado como qualquer outro, e outros projetos da workspace se conectam a ele.
Os três pilares de um Design System
- Componentes: a sua biblioteca de componentes React, com botões, inputs, cards e tudo o que se repete.
- Esquema e guidelines: um esquema legível por máquina com tokens, catálogo de componentes e restrições, mais a documentação renderizada que a Lovable lê em cada geração.
- Instalação: as instruções de configuração e as dependências necessárias para o design system funcionar em qualquer projeto conectado.
A pasta .lovable na prática
O projeto de design system é dono de uma pasta especial chamada .lovable. Quando você publica uma release, a Lovable gera os arquivos que os projetos conectados vão ler.
- design-system.json: o esquema padronizado com tokens, catálogo de componentes com variantes, props e exemplos, além das restrições de stack. É a fonte da verdade.
- rules/components.md: o catálogo de componentes renderizado a partir do esquema.
- rules/design-tokens.md: a referência de tokens de cor, tipografia e espaçamento.
- rules/library-guidelines.md: requisitos de stack e regras de uso.
- system.md: instruções de instalação e a filosofia de design, escritas por você e preservadas entre releases.
O system.md pode ser editado pela aba de conhecimento nas configurações do projeto ou conversando com a Lovable. Os demais arquivos são regenerados a cada release. Em um projeto conectado, esses arquivos aparecem em .lovable/rules/libraries/ com o slug do design system, e os componentes ficam em src/design-system/ com o mesmo slug, prontos para importar.
Passo a passo para criar um Design System na Lovable
- No menu de mais (+) da caixa de prompt em lovable.dev, escolha Design e depois Use a design system.
- Na janela que abrir, selecione Create design system. Isso cria um projeto dedicado; dê a ele um nome claro, porque é esse nome que aparece na hora de conectar.
- Configure conversando pelo chat: descreva cores, tipografia, espaçamentos e componentes, ou traga uma biblioteca existente informando o pacote npm público ou a URL de um repositório Git público.
- Se os arquivos forem privados ou soltos, exporte e faça upload deles no projeto do design system; para pacotes privados, cadastre antes os build secrets na workspace.
- Revise a pasta .lovable, ajuste o system.md e peça correções quando algum componente não renderizar como esperado.
- Publique uma release. Só design systems liberados aparecem no seletor; os que ficam como rascunho não podem ser usados como base de um projeto novo.
- Conecte a um projeto existente: clique no nome do projeto na barra superior e escolha Design system, ou vá em Project settings, seção General, e use Attach design system.
Ao conectar, a Lovable copia os componentes e os arquivos de conhecimento para o projeto, junta as dependências no package.json e roda uma verificação silenciosa de configuração, corrigindo o que estiver faltando.
Quantos design systems dá para conectar e como funcionam as atualizações
- Um projeto pode estar conectado a no máximo um design system por vez. Para trocar, remova o atual em Project settings, seção General, usando o menu de três pontos e a opção Remove.
- Os design systems são versionados: cada release aumenta a versão e os projetos conectados registram em qual versão foram anexados.
- Quando você publica uma nova versão, os projetos conectados recebem um aviso de Update available no chat; ao aceitar, os arquivos antigos são substituídos pelos novos e a verificação de configuração roda de novo.
- Remover o design system corta o vínculo gerenciado: o projeto para de receber atualizações, mas os arquivos continuam lá como código comum e nada quebra.
- Durante o trabalho no projeto conectado, a Lovable checa aderência e corrige desvios como cores cruas no lugar de tokens, valores fora da escala e componentes locais que deveriam vir do design system.
Limitações atuais que você precisa conhecer
- O suporte nativo é para bibliotecas React; outros frameworks como Vue, Angular ou Svelte não são suportados hoje.
- A pasta .lovable pertence ao projeto do design system e não pode ser editada a partir dos projetos conectados.
- Editar componentes copiados dentro do projeto conectado é temporário: a próxima atualização substitui esses arquivos. Mudanças permanentes devem ser feitas no projeto do design system.
- Conflitos de dependência e de versão do React podem exigir ajuste manual pelo chat.
- Projetos novos criados a partir de um design system podem nascer em um template diferente do esperado e nem sempre com a configuração de estilo totalmente ligada; normalmente a verificação automática corrige na primeira geração.
