Por que o Lovable precisa de um design system
O Lovable é excelente em transformar um prompt em um app funcional, mas seu visual padrão é genérico e tende a divergir conforme o app cresce: cada nova funcionalidade gera uma nova decisão de estilo. Como ele utiliza Tailwind e shadcn, ele pode construir com base em um conjunto real de tokens e seguir regras escritas; você só precisa tornar essas regras persistentes para que sejam aplicadas a cada geração, e não apenas àquela em que você as mencionou.
O kit que você fornecerá
Mauve Broadcast
Live renderRendered from the kit's actual tokens, fonts, and treatments
Typography
Anton + Space Mono
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Forneça o kit ao Lovable
- 1
Coloque o DESIGN.md no project Knowledge
Abra a página do kit na galeria (por exemplo, /kits/ambient-sage), copie as partes do DESIGN.md que contêm as regras (intenção, motivos, o que fazer e o que não fazer, tratamentos de componentes) para Project settings > Knowledge. O Knowledge tem um limite de 10.000 caracteres e um DESIGN.md completo de kit chega a ter quase três vezes isso, portanto, cole as regras e deixe que a instalação via registry no próximo passo cuide dos valores exatos dos tokens. O Lovable mantém o Knowledge como contexto persistente para cada geração.
- 2
Conecte ao GitHub e aplique os tokens
Use a integração do Lovable com o GitHub e, no repo conectado, execute o comando de registry do kit para instalar suas variáveis CSS no tema do shadcn:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
Ou cole as variáveis CSS no chat
Prefere continuar no Lovable? Copie a exportação de variáveis CSS da página do kit e peça ao Lovable para configurar o
:roote o.darkda sua stylesheet global exatamente com esses valores. - 4
Construa sobre o sistema
Faça prompts normalmente; agora o Lovable tematiza com seus tokens e obedece ao DESIGN.md no Knowledge.
Add a dashboard. Use the design tokens and follow the DESIGN.md in Project Knowledge. Do not add new colors or fonts.
Recursos de design nativos do Lovable
O Lovable também oferece primitivas importantes: Skills (playbooks sob demanda que o agente aplica a tarefas correspondentes), Design guidance (escolha entre prévias de design antes da construção) e, em planos Enterprise, projetos de design system nativos que enviam tokens e componentes para apps consumidores. O Knowledge somado ao registry continua sendo a rota independente de plano e mantém seus tokens idênticos em todas as ferramentas que você utiliza.
O Knowledge é o que garante a consistência
O motivo mais comum para um construtor de IA ignorar seu design system é que as regras foram mencionadas uma vez e esquecidas. Colocar as regras de design no Knowledge do Lovable as torna uma instrução permanente, mantendo a consistência enquanto o app cresce.
Uma URL, o tema completo
Todo kit público expõe um item estável do registry do shadcn em https://identityforge.io/r/<slug>.json. Essa URL contém todas as 28 funções semânticas em light e dark, para que o Lovable nunca precise improvisar estados de hover, textos suavizados, bordas ou cores de gráficos. Veja explicação sobre tokens de cores semânticas para entender quais são essas funções e por que elas importam.
A mesma abordagem funciona no v0 e no Bolt. Para agentes de código baseados em terminal, consulte o guia fundamental.
FAQ
Como dou um design system ao Lovable?
Coloque as regras de design do kit no project Knowledge do Lovable para que sejam aplicadas a cada prompt (o Knowledge limita-se a 10.000 caracteres, então cole as seções de regras, não o arquivo inteiro) e, em seguida, aplique os tokens do kit: execute npx shadcn add https://identityforge.io/r/<slug>.json no repo conectado ao GitHub ou cole as variáveis CSS do kit na stylesheet do projeto.
Por que colocar o DESIGN.md no Knowledge em vez de em um prompt?
O Knowledge é um contexto permanente que se aplica a cada geração. Um prompt único é esquecido na mensagem seguinte, e é por isso que os construtores divergem da marca. O Knowledge mantém as regras de design em vigor conforme o app cresce.
Preciso conectar o GitHub?
Apenas para o caminho via shadcn add. Como alternativa, você pode colar as variáveis CSS exportadas do kit diretamente e pedir ao Lovable para configurar a stylesheet global com esses valores.
Fontes
- Knowledge - Lovable Docs: O Knowledge fornece instruções persistentes por projeto ou workspace, configuradas em Project settings > Knowledge, com um limite de 10.000 caracteres.
- Design systems - Lovable Docs: O Lovable oferece projetos nativos de design system em planos Enterprise que distribuem tokens e componentes para os projetos consumidores.
Fontes
- Knowledge - Lovable Docs: O Knowledge fornece instruções persistentes por projeto ou workspace, configuradas em Project settings > Knowledge, com um limite de 10.000 caracteres.
- Design systems - Lovable Docs: O Lovable oferece projetos nativos de design system em planos Enterprise que distribuem tokens e componentes para os projetos consumidores.