mundo AI.rton
o teu blog sobre ai!

1️⃣ O Prompt Para Criar UI Como Um Designer

O Problema: Descreves o que queres e o Lovable gera uma coisa que “tecnicamente funciona” mas parece que foi feita por um robô em 2015.

O Prompt (copia e cola direto):

“Cria um [tipo de componente] que [função principal].

Requisitos de Design:

– Estilo: [moderno/minimalista/corporativo/playful]

– Cores: [paleta de cores específicas]

– Tipografia: [sans-serif moderno/serif clássico]

– Espaçamento: [generoso e limpo]

– Responsividade: [mobile-first]

O que NÃO quero: [lista específica do que evitar]

Inspiração visual: [referência a um site/app que gostes]“

Por Que Funciona: 

O Lovable entende contexto.

Quando tu dás estilo, cores e inspiração específicas, ele não anda à adivinhar.

Sai com um design que realmente parece profissional.

Exemplo Real:

Cria um card de produto para uma loja de sneakers premium.

Requisitos de Design:

– Estilo: luxury minimal (tipo SSENSE)

– Cores: preto, branco, cinzento claro

– Tipografia: sans-serif moderno (tipo Helvetica)

– Espaçamento: generoso, ar respira

– Responsividade: mobile-first

O que NÃO quero: muitas linhas, caixas com bordas pesadas, animações confusas

Inspiração visual: procura “luxury sneaker product card” no Dribbble

Vês a diferença?

2️⃣ O Prompt Para Implementar Features Sem Dor de Cabeça

O Problema: Pedes um carrinho de compras e recebas algo que é um carrinho, mas que não faz metade do que precisas.

O Prompt:

“Implementa [função] com estes requisitos exatos:

Funcionalidade Obrigatória:

– [requisito 1 específico]

– [requisito 2 específico]

– [requisito 3 específico]

Comportamento:

– Quando o utilizador faz [X], o sistema [Y]

– Se [condição], então [ação]

– Validação: [o que precisas validar]

Tecnologia:

– Framework: [qual]

– Stores/Estado: [se necessário]

Casos de Erro:

– Se o utilizador tentar [X], mostrar [mensagem clara]“

Por Que Funciona: 

Lovable é literal.

Quando tu és literal, ele és literal.

Exemplo Real:

Implementa um carrinho de compras com estes requisitos exatos:

Funcionalidade Obrigatória:
– Adicionar produtos com quantidade (1-99)
– Remover produtos individuais
– Ver total atualizado em tempo real
– Calcular desconto automático se subtotal > 100€
– Desativar botão “Checkout” se carrinho vazio

Comportamento:
– Quando clico “+” a quantidade aumenta
– Quando clico “-” diminui (mínimo 1)
– Se removo tudo, mostrar “Carrinho vazio”
– O total recalcula instantaneamente
– Desconto de 10% aparece automático acima de 100€

Tecnologia:
– React com useState
– Guardar dados em localStorage

Casos de Erro:
– Se quantidade > 99, mostrar “Máximo 99 unidades”
– Se removo último produto, carrinho fica vazio

Vês? Sem ambiguidade.

3️⃣ O Prompt para Debug (Quando Algo Não Funciona)

O Problema: O código está errado mas não sabes explicar ao Lovable qual é o problema.

O Prompt:

Este código [descrição breve do que faz] não está a funcionar.

O que devia acontecer:
– [resultado esperado 1]
– [resultado esperado 2]

O que está a acontecer em vez disso:
– [comportamento atual 1]
– [comportamento atual 2]

Já testei:
– [o que tu tentaste]
– [o que também testaste]

Suspeita: [se tiveres uma teoria]

Por Que Funciona: 

Quando explicitas o gap entre “o que devia ser” e “o que é”, o Lovable consegue identificar a raiz do problema.

Exemplo Real:

Este filtro de produtos não está a funcionar corretamente.

O que devia acontecer:
– Quando clico “Preço: Baixo para Alto” a lista ordena por preço crescente- Quando clico “Rating: Alto para Baixo” mostra melhores primeiro

O que está a acontecer em vez disso:
– O filtro de preço não faz nada
– O filtro de rating “meio-funciona” mas fica confuso

Já testei:
– Remover a função e reescrever do zero
– Verificar se os dados têm preço e rating (têm)

Suspeita: acho que o useState está a guardar mas o useEffect não está a rerender

E ele arranja logo.

4️⃣ O Prompt para Refactorizar Código (Quando Tá Tudo Confuso)

O Problema: Tens código que funciona mas é um caos. Queres deixar limpo.

O Prompt:

Refactoriza isto [descreve o que o código faz].

Objetivo: [melhor legibilidade / performance / manutenção]

Constraints:
– A funcionalidade deve ficar igual
– Sem mudar bibliotecas
– [qualquer restrição específica]

Dicas de estilo:
– Preferência: [nomes de variáveis em português/inglês]
– Componentes separados se [condição]

Por Que Funciona: 

Lovable respeita constraints.

Ele não te refactoriza errado porque tu definiste exatamente o que queres manter igual.

Exemplo Real:

Refactoriza este componente de dashboard.

Objetivo: melhor legibilidade e manutenção (está muito aninhado)

Constraints:
– A funcionalidade fica igual (3 gráficos, filtros por data)
– Sem mudar para charts.js ou qualquer outra lib
– Manter React com hooks

Dicas de estilo:
– Nomes de variáveis em inglês
– Componentes separados para cada gráfico
– Custom hooks se houver lógica repetida

5️⃣ O Prompt para Design Responsivo Que Não É Um Caos

O Problema: No desktop fica bonito. No mobile é um caos.

O Prompt:

Cria [componente] com suporte responsivo.

Layout Mobile (até 480px):
– [layout específico]
– [tamanho de fonte]
– [espaçamento]

Layout Tablet (481px – 768px):
– [layout específico]

Layout Desktop (769px+):
– [layout específico]

Testing: Tem de se ver bem em [dispositivos específicos]

Por Que Funciona: 

Quando tu definis exatamente como quer em cada breakpoint, não há espaço para interpretações.

Exemplo Real:

Cria um header com navegação responsiva.

Layout Mobile (até 480px):
– Menu hamburger (ícone no canto)
– Logo centrada
– Tamanho do texto: 14px
– Espaçamento: compacto

Layout Tablet (481px – 768px):
– Menu começa a mostrar (50% dos itens)
– Logo à esquerda pequena

Layout Desktop (769px+):
– Menu horizontal completo
– Logo à esquerda normal
– Dropdown para submenu

Testing: Tem de se ver bem em iPhone SE, iPad, e Desktop 1920px