Conceitos gerais
- IA (Inteligência Artificial): A simulação de processos de inteligência humana por máquinas, especialmente por sistemas computacionais, permitindo tarefas como aprendizado, raciocínio e resolução de problemas.
- Prompt de IA: Um trecho de texto ou entrada que orienta modelos de IA na geração de resultados ou na execução de determinadas tarefas. Ele está no núcleo da funcionalidade do Lovable e é por meio de instruções que você cria ou modifica um componente ou elemento específico no seu aplicativo.
Termos específicos do Lovable
- Chat Mode: Lovable vai além de apenas gerar código; ele se torna um assistente interativo que orienta você em todas as fases do desenvolvimento. Ele ajuda fundadores a pensar de forma crítica, planejar com eficácia, depurar com inteligência e lançar com confiança.
- Edit Mode: A ação de fazer alterações ou modificações em conteúdo ou código.
- Edit: Uma ferramenta que permite desenvolvimento orientado por IA com controles visuais nativos do Tailwind para refinamento fácil.
- History: O sistema de rastrear e gerenciar mudanças no seu app e no código ao longo do tempo.
- Knowledge: Capture detalhes essenciais do projeto em um documento vivo que evolui junto com seu app.
- Labs: Funcionalidades experimentais dentro do Lovable dedicadas a testar e demonstrar recursos novos, inovadores ou em desenvolvimento. Elas podem ser modificadas ou removidas a qualquer momento.
- Remix: Você pode remixar um projeto público existente ou um dos seus. Remixar permite reutilizar o estado atual de um projeto como ponto de partida e construir a partir dele. É uma ótima forma de explorar novas ideias, fazer ajustes ou iterar com mudanças diferentes enquanto preserva a versão original. Observe que não é possível remixar projetos quando o Supabase está conectado.
- Preview: Permite que usuários visualizem ou experimentem conteúdo ao vivo ou funcionalidades, de forma interativa, antes que sejam finalizados ou publicados.
- Diff: Uma comparação que mostra as diferenças entre duas versões de um arquivo ou código.
- /index: Refere-se à página principal ou padrão de um site ou app, geralmente chamada de “index.html” ou “index.js”.
- Lovable API - Build with URL: O recurso Lovable API Build with URL permite criar aplicações programaticamente, passando prompts de IA e imagens por parâmetros de URL. Isso possibilita integração perfeita com sites, ferramentas internas ou fluxos de automação, permitindo que usuários gerem apps Lovable com um único clique.
Conceitos de produto e desenvolvimento
Gestão de produto & Estratégia
- MVP (Minimum Viable Product) – Uma versão de um produto com apenas funcionalidades suficientes para atender os primeiros adotantes e validar uma ideia antes do desenvolvimento em larga escala.
- Roadmap – Um plano estratégico de alto nível que apresenta a visão, a direção e as funcionalidades planejadas para um produto ao longo do tempo.
- Feature Request – Uma sugestão formal ou informal de usuários ou stakeholders para uma nova funcionalidade em um produto.
- User Story – Uma descrição curta e simples de uma funcionalidade ou requisito, escrita da perspectiva de um usuário final.
- User Journey: A série de etapas que um usuário percorre para alcançar um objetivo específico dentro de um produto ou serviço.
- Persona: Uma representação fictícia de um usuário-alvo, baseada em pesquisa, para orientar decisões de design e desenvolvimento.
Conceitos de engenharia
- PRD (Product Requirements Document): Um documento abrangente que descreve os objetivos, funcionalidades e especificações de um produto para orientar o desenvolvimento.
- API (Application Programming Interface): Uma forma de diferentes serviços se comunicarem. Pense nela como um protocolo que define que tipo de informação você pode obter ou enviar entre sistemas. Os tipos mais comuns são REST APIs, usadas por muitos sites, e GraphQL APIs, que oferecem uma abordagem mais flexível para consultar dados.
- Refactor: O processo de reestruturar código existente sem alterar seu comportamento externo para melhorar legibilidade, manutenção ou desempenho.
- GitHub: Uma plataforma web para controle de versão e desenvolvimento colaborativo de software usando Git.
Dados e análises
- Teste A/B – Um método para comparar duas versões de uma página ou funcionalidade e determinar qual apresenta melhor desempenho com base no comportamento dos usuários.
- Taxa de conversão – A porcentagem de usuários que concluem uma ação desejada, como se cadastrar ou fazer uma compra.
- Taxa de churn (cancelamento) – A porcentagem de usuários que deixam de usar um produto em um determinado período.
- Taxa de retenção – A porcentagem de usuários que continuam usando um produto ao longo do tempo.
- Rastreamento de eventos – Monitoramento de ações específicas dos usuários (por exemplo, cliques em botões e envio de formulários) para gerar insights sobre comportamento e engajamento.
Guia de desenvolvimento de UI/UX e frontend
Desenvolvimento de frontend
- Frontend: A parte de um aplicativo de software com a qual os usuários interagem diretamente, abrangendo os elementos de interface do usuário (UI) e experiência do usuário (UX).
- React: Uma biblioteca JavaScript desenvolvida pelo Facebook para construir interfaces de usuário, especialmente aplicações de página única.
- Gradient: Um gradiente é uma transição gradual entre duas ou mais cores ou tonalidades no design.
- Tailwind CSS: Framework CSS de código aberto, baseado em utilitários, que fornece um conjunto abrangente de classes pré-definidas, permitindo que desenvolvedores criem designs personalizados diretamente no HTML, aplicando essas classes utilitárias aos elementos.
- Design Systems: Coleção de componentes reutilizáveis, diretrizes e padrões que garantem consistência e coerência no design em todo um produto ou marca.
Conceitos de design de UI/UX
- Accent Color: Um tom de destaque usado para realçar elementos-chave de um design, geralmente alinhado à cor primária da marca ou a complementando para aumentar o impacto visual.
- Theme: Um conjunto coeso de escolhas de design, incluindo cores, fontes e layouts, que definem a estética geral e a experiência do usuário de um aplicativo ou site.
- Responsive Design: Uma abordagem de design para a web que garante que o conteúdo se adapte perfeitamente a diferentes tamanhos e orientações de tela, oferecendo uma experiência do usuário ideal.
- Above the Fold: A parte de uma página web visível para os usuários sem precisar rolar a página, crucial para captar a atenção e transmitir imediatamente informações essenciais.
- CTA (Call to Action): Um convite à ação, geralmente na forma de um botão ou link, que incentiva os usuários a realizar uma ação específica, como “Inscreva-se” ou “Saiba mais”.
- Headings (Titles): Elementos de texto que introduzem e organizam seções de conteúdo, normalmente formatados com diferentes níveis (por exemplo, H1, H2) para estabelecer uma hierarquia de conteúdo clara.
- Footer: A seção inferior de uma página da web, geralmente contendo informações complementares, como detalhes de contato, links de navegação e avisos legais.
- Breadcrumb: Um recurso de navegação que exibe a localização atual do usuário dentro da hierarquia de um site, frequentemente representado como uma lista horizontal de links.
- Favicon – Um pequeno ícone exibido na aba do navegador, nos favoritos e nos resultados de busca, que normalmente representa uma marca ou site.
- Meta Title (Title Tag) – O título de uma página da web que aparece nos resultados de mecanismos de busca e nas abas do navegador, influenciando o SEO e a taxa de cliques dos usuários.
- Meta Description – Um breve resumo do conteúdo de uma página exibido nos resultados de mecanismos de busca, com o objetivo de melhorar a visibilidade e o engajamento dos usuários.
- Canonical URL – Uma tag usada para especificar a versão preferida de uma página, ajudando a evitar problemas de conteúdo duplicado na indexação por mecanismos de busca.
- URL Slug – A parte de uma URL que identifica uma página específica em um formato legível (por exemplo,
example.com/product-name). - Sitemap – Um arquivo estruturado (XML ou HTML) que fornece uma lista das páginas de um site, ajudando os mecanismos de busca a indexá-las de forma eficiente.
- Navigation Bar (Nav Bar) – Um menu horizontal ou vertical que fornece links para seções essenciais de um site, facilitando a navegação.
- Skip Links – Links ocultos que permitem aos usuários pular conteúdo repetitivo e navegar diretamente para o conteúdo principal, melhorando a acessibilidade.
- Pagination – Um método de dividir o conteúdo em várias páginas, comumente usado em blogs, resultados de busca e listagens de produtos para melhorar a experiência do usuário.
- Anchor Link – Um link que direciona os usuários para uma seção específica dentro da mesma página, em vez de carregar uma nova página.
- 404 Page – Uma página de erro personalizada exibida quando um usuário tenta acessar uma URL inexistente, guiando-o de volta para conteúdo relevante.
Elementos de Notificações & Feedback
- Toast: Uma notificação breve e discreta que aparece temporariamente para informar os usuários sobre o resultado de uma ação ou fornecer um feedback simples.
- Snackbar – Semelhante a um toast, mas geralmente localizado na parte inferior da tela, com ações opcionais (por exemplo, “Desfazer” em um item excluído).
- Tooltip – Uma pequena caixa pop-up que fornece informações adicionais ao passar o mouse ou ao focar em um elemento.
- Badge – Um pequeno indicador visual, frequentemente usado em ícones ou botões, para mostrar notificações, contagens ou atualizações de status.
- Loading Spinner (Loader) – Um indicador visual que representa um processo em andamento, como o carregamento de uma página ou o envio de um formulário.
- Progress Bar – Uma barra horizontal que indica a porcentagem de conclusão de uma tarefa ou processo.
- Skeleton Loader – Uma interface de espaço reservado que imita o layout do conteúdo final enquanto ele é carregado, melhorando a percepção de desempenho.
Overlays e pop-ups
- Popover: Um overlay temporário que apresenta informações ou opções adicionais relacionadas a um elemento específico da interface, geralmente aparecendo após a interação do usuário.
- Dialog (Modal): Uma janela que aparece na frente do conteúdo principal para capturar a atenção do usuário, geralmente exigindo uma ação antes de retornar à interface principal.
- Drawer (Sidebar Panel) – Um painel que desliza a partir da lateral da tela para exibir opções de navegação ou configurações sem interromper o conteúdo principal.
- Lightbox – Uma janela modal que exibe imagens ou mídia em uma visualização ampliada, escurecendo o plano de fundo para manter o foco.
- Alert Box – Uma caixa de mensagem gerada pelo sistema ou acionada pelo aplicativo que informa os usuários sobre itens importantes, como erros ou avisos.
- Button: Um elemento clicável que inicia uma ação ou evento, como enviar um formulário ou abrir uma caixa de diálogo.
- Switch (Toggle): Um controle de alternância que permite aos usuários mudar entre dois estados, como ligado ou desligado, muitas vezes lembrando um interruptor físico.
- Tabs – Um componente que organiza o conteúdo em abas dentro de uma única interface, permitindo que os usuários alternem entre seções sem sair da página.
- Stepper (Wizard) – Um componente usado para processos com várias etapas, mostrando aos usuários em qual etapa estão e guiando-os até a conclusão.
- Pagination – Um padrão de interface que divide o conteúdo em páginas, frequentemente usado para resultados de busca ou aplicativos com muito conteúdo.
- Breadcrumb – Um recurso de navegação que exibe a localização atual do usuário dentro da hierarquia de um site, geralmente representado como uma lista horizontal de links.
- Accordion – Uma seção recolhível que pode ser expandida ou recolhida para revelar ou ocultar conteúdo dinamicamente.
- Dropdown Menu – Uma lista de opções que aparece quando o usuário clica ou passa o mouse sobre um botão ou campo, frequentemente usada para navegação ou seleção.
Formulários e elementos de entrada
- Form: Um conjunto estruturado de campos de entrada que permite aos usuários enviar dados, como informações de contato ou buscas.
- Radio Group: Um conjunto de botões de opção relacionados que permite aos usuários selecionar apenas uma opção entre várias escolhas.
- Checkbox: Uma caixa interativa que os usuários podem marcar ou desmarcar para selecionar ou remover a seleção de uma opção, permitindo múltiplas seleções dentro de um conjunto.
- Text Field (Input Field) – Um elemento básico de UI em que os usuários podem inserir texto, como em barras de pesquisa, formulários de login ou campos de comentários.
- Text Area – Um campo de entrada maior, projetado para texto em várias linhas, normalmente usado para mensagens ou formulários de feedback.
- Select (Dropdown Select Box) – Um elemento de UI que permite aos usuários escolher uma opção de uma lista predefinida, geralmente exibida como um menu suspenso.
- Date Picker – Um elemento de UI que permite aos usuários selecionar uma data em um calendário em vez de digitá-la manualmente.
- Slider (Range Selector) – Um controle que permite aos usuários definir um valor dentro de um intervalo, deslizando um controle deslizante ao longo de uma barra.
- File Upload Field – Um componente que permite aos usuários selecionar e fazer upload de arquivos a partir de seu dispositivo.
- Autocomplete (Typeahead Search) – Um campo de texto que sugere dinamicamente resultados correspondentes conforme o usuário digita, melhorando a usabilidade em buscas.
Estilos de design e tendências
Você pode usar esses termos em qualquer Prompt de IA para descrever um estilo específico que deseja alcançar.
- Neobrutalism: Uma tendência de web design caracterizada por elementos brutos e sem polimento, tipografia ousada e alto contraste, inspirada na arquitetura brutalista de meados do século XX.
- Retrô: Design que incorpora estilos, motivos e elementos de décadas passadas, evocando nostalgia e uma estética vintage.
- Hacker: Uma estética que reflete a cultura faça-você-mesmo (DIY) e open source, geralmente com fontes monoespaçadas, fundos escuros e interfaces inspiradas em terminais.
- Glass (Glassmorphism): Um estilo de design que usa elementos translúcidos, semelhantes a vidro fosco, com sombras sutis e bordas para criar profundidade.
- Nudy: Uma abordagem de design minimalista que utiliza paletas de cores em tons de nude ou neutros para criar uma estética suave e discreta.
Recursos de design e assets
- 21st.dev: Um repositório comunitário de código aberto que oferece componentes de UI React minimalistas, modernos e reutilizáveis, baseados em Tailwind CSS e Radix UI, criados para ajudar designers e engenheiros de interface a entregarem interfaces de usuário refinadas com mais eficiência.
- Dribbble: Uma das principais comunidades online onde designers e profissionais criativos exibem seus trabalhos, descobrem inspiração em design e se conectam com possíveis clientes ou colaboradores.
- Noun Project: Uma plataforma que oferece uma vasta coleção de ícones gratuitos e fotos de banco de imagens, permitindo que os usuários acessem recursos visuais para diversos projetos.
- SVG Repo: Uma biblioteca abrangente com mais de 500.000 vetores e ícones SVG com licença aberta, permitindo que os usuários pesquisem, explorem, editem e façam download de gráficos adequados para diversos projetos.
- Google Fonts: Uma biblioteca gratuita de fontes otimizadas para a web, oferecendo a designers e desenvolvedores uma ampla seleção de opções de tipografia para aprimorar seus projetos.
- Typewolf: Um recurso que ajuda designers a selecionar as combinações de fontes ideais para seus projetos, exibindo tipografias em alta e oferecendo listas de fontes curadas.
Desenvolvimento de back-end e bancos de dados
Fundamentos de backend
- Backend: A infraestrutura do lado do servidor de um aplicativo que lida com processamento de dados, armazenamento e lógica de negócios.
- Supabase: Uma plataforma de backend como serviço open source que fornece um banco de dados Postgres, autenticação, APIs instantâneas e recursos em tempo real.
- Webhooks – Callbacks HTTP acionados por eventos que notificam aplicativos externos quando ações específicas ocorrem.
Gerenciamento de banco de dados e consultas
- CRUD (Create, Read, Update, Delete): As quatro operações básicas realizadas sobre dados em um banco de dados ou aplicativo.
- SQL (Structured Query Language): Uma linguagem de programação de domínio específico projetada para gerenciar e manipular bancos de dados relacionais, permitindo tarefas como consultar, atualizar e organizar dados.
- PostgreSQL – Um poderoso banco de dados relacional open source, conhecido por sua escalabilidade, extensibilidade e compatibilidade com ACID.
Conceitos específicos do Supabase
- Função de borda: Funções TypeScript executadas no lado do servidor, distribuídas globalmente na borda — próximas dos seus usuários. Elas podem ser usadas para ouvir webhooks ou integrar seu Projeto Supabase com serviços de terceiros como Stripe, Anthropic ou Resend.
- RLS (Row-Level Security): Um recurso de bancos de dados que permite controlar o acesso a linhas específicas em uma tabela com base em funções ou atributos de usuário — basicamente permitindo definir regras de autorização granulares e escrever regras SQL complexas que atendam às necessidades exclusivas do seu negócio.
- Storage: Um serviço ou sistema para armazenar e gerenciar dados, como imagens, vídeos, documentos e qualquer outro tipo de arquivo.
- Bucket: No Supabase Storage, um bucket é um contêiner distinto que organiza arquivos e pastas, determinando o modelo de acesso (público ou privado) e definindo restrições de upload, como tamanho máximo de arquivo e tipos de conteúdo permitidos.
- Endpoint: No contexto do Supabase, um endpoint é uma URL específica que permite que clientes interajam com o banco de dados por meio de chamadas de API RESTful, possibilitando operações como criar, ler, atualizar ou excluir dados.
- Authentication Provider: Uma entidade ou serviço que verifica credenciais de usuário, permitindo acesso seguro a aplicativos ou sistemas. No contexto do Supabase, provedores de autenticação incluem vários métodos, como logins baseados em senha, magic links, senhas de uso único (OTP), logins sociais e integrações de Single Sign-On (SSO), oferecendo autenticação de usuário flexível e segura.
Segurança e autenticação
- OAuth – Um protocolo de autenticação amplamente utilizado que permite que usuários façam login em aplicativos usando serviços de terceiros como Google, Facebook ou GitHub.
- Autenticação em dois fatores (2FA) – Uma medida de segurança que exige que os usuários forneçam duas formas de identificação antes de acessar uma conta.
- CORS (Cross-Origin Resource Sharing) – Uma política de segurança que controla quais sites ou aplicativos podem acessar recursos em um servidor.