​
Conceitos Gerais

  • IA (Inteligência Artificial): A simulação de processos de inteligência humana por máquinas, especialmente sistemas computacionais, permitindo tarefas como aprendizado, raciocínio e resolução de problemas.​
  • Prompt: Um pedaço de texto ou entrada que orienta modelos de IA na geração de saídas ou na execução de certas tarefas.​ Está dentro da funcionalidade principal do Lovable e é com prompts que você cria, modifica um componente ou elemento específico em sua aplicação.

​
Termos Específicos do Lovable

  • Chat Mode: O Lovable vai além de apenas gerar código; ele se torna um assistente interativo que te guia através de cada fase do desenvolvimento. Ele ajuda fundadores a pensar criticamente, planejar efetivamente, debugar inteligentemente e entregar com confiança.
  • Edit Mode: A ação de fazer mudanças ou modificações no 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 rastreamento e gerenciamento de mudanças no seu app e código ao longo do tempo.​
  • Knowledge: Capture detalhes essenciais do projeto em um documento vivo que evolui com seu app.
  • Labs: Recursos experimentais dentro do Lovable dedicados a testar e mostrar funcionalidades novas, inovadoras ou em desenvolvimento.​ Estes podem ser modificados ou removidos a qualquer momento.
  • Remix: Você pode fazer remix de um projeto público existente ou de um dos seus próprios. O remix permite que você reutilize o estado atual de um projeto como ponto de partida e construa sobre ele. É uma ótima maneira de explorar novas ideias, fazer ajustes ou iterar com diferentes mudanças preservando a versão original. Note que não é possível fazer remix de projetos quando o Supabase está conectado.
  • Preview: Permite que usuários visualizem ou experimentem conteúdo ao vivo ou funcionalidades de recursos antes que sejam finalizados ou publicados, de forma interativa.
  • 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 website ou app, frequentemente nomeada “index.html” ou “index.js”.
  • Builder.io: Integração que permite aos usuários exportar designs do Figma diretamente para o Lovable para construir apps full-stack sem codificação.

​
Conceitos de Produto e Desenvolvimento

​
Gestão de Produto e Estratégia

  • MVP (Minimum Viable Product) – Uma versão de um produto com apenas recursos suficientes para satisfazer os primeiros usuários e validar uma ideia antes do desenvolvimento em escala completa.
  • Roadmap – Um plano estratégico de alto nível que delineia a visão, direção e recursos planejados para um produto ao longo do tempo.
  • Feature Request – Uma sugestão formal ou informal de usuários ou stakeholders para uma nova capacidade em um produto.
  • User Story – Uma descrição curta e simples de um recurso ou requisito escrita da perspectiva de um usuário final.
  • User Journey: A série de passos que um usuário segue 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 delineia os objetivos, recursos e especificações de um produto para orientar o desenvolvimento.​
  • API (Application Programming Interface): Uma forma de diferentes serviços se comunicarem. Pense nisso como um protocolo que te diz que tipo de informação você pode obter ou enviar entre sistemas. Os tipos mais comuns são REST APIs, que muitos sites usam, 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, manutenibilidade ou performance.
  • GitHub: Uma plataforma baseada na web para controle de versão e desenvolvimento colaborativo de software usando Git.​

​
Dados e Analytics

  • A/B Testing – Um método de comparar duas versões de uma página web ou recurso para determinar qual tem melhor performance baseado no comportamento do usuário.
  • Conversion Rate – A porcentagem de usuários que completam uma ação desejada, como se inscrever ou fazer uma compra.
  • Churn Rate – A porcentagem de usuários que param de usar um produto durante um período determinado.
  • Retention Rate – A porcentagem de usuários que continuam usando um produto ao longo do tempo.
  • Event Tracking – Monitoramento de ações específicas do usuário (ex: cliques em botões, envios de formulários) para coletar insights sobre comportamento e engajamento.

​
Manual de UI/UX e Desenvolvimento Frontend

​
Desenvolvimento Frontend

  • Frontend: A parte de uma aplicação de software com a qual os usuários interagem diretamente, abrangendo os elementos de interface do usuário e experiência do usuário.​
  • React: Uma biblioteca JavaScript desenvolvida pelo Facebook para construir interfaces de usuário, particularmente aplicações de página única.​
  • Gradient: Uma transição gradual entre duas ou mais cores ou tons no design.
  • Tailwind CSS: Framework CSS open-source utility-first que fornece um conjunto abrangente de classes pré-definidas, permitindo que desenvolvedores construam designs personalizados diretamente dentro de seu HTML aplicando essas classes utilitárias aos elementos.
  • Design Systems: Uma coleção de componentes reutilizáveis, diretrizes e padrões que garantem consistência e coerência no design em um produto ou marca.

​
Conceitos de Design UI/UX

  • Accent Color: Uma tonalidade distintiva usada para destacar elementos-chave em um design, frequentemente alinhada ou complementando a cor primária da marca para aumentar o interesse visual.​
  • Theme: Um conjunto coeso de escolhas de design, incluindo cores, fontes e layouts, que define a estética geral e experiência do usuário de uma aplicação ou website.​
  • Responsive Design: Uma abordagem ao web design que garante que o conteúdo se adapte perfeitamente a vários tamanhos de dispositivos e orientações, proporcionando uma experiência de usuário otimizada.
  • Above the Fold: A porção de uma página web visível aos usuários sem rolar, crucial para capturar atenção e transmitir informações essenciais imediatamente. ​
  • CTA (Call to Action): Um prompt, frequentemente na forma de um botão ou link, encorajando usuários a realizar uma ação específica, como “Inscreva-se” ou “Saiba Mais.” ​

​
Estrutura de Página & Navegação

  • Headings (Títulos): Elementos de texto que introduzem e organizam seções de conteúdo, tipicamente formatados com níveis variados (ex: H1, H2) para estabelecer uma hierarquia clara de conteúdo.​
  • Footer: A seção inferior de uma página web, comumente contendo informações suplementares como detalhes de contato, links de navegação e avisos legais. ​
  • Breadcrumb: Um auxílio 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, favoritos e resultados de busca, tipicamente representando uma marca ou website.
  • Meta Title (Title Tag) – O título de uma página web que aparece nos resultados de mecanismos de busca e abas do navegador, influenciando SEO e taxas de clique do usuário.
  • Meta Description – Um resumo curto do conteúdo de uma página web exibido nos resultados de mecanismos de busca, visando melhorar a descoberta e engajamento do usuário.
  • Canonical URL – Uma tag usada para especificar a versão preferida de uma página web, ajudando a evitar problemas de conteúdo duplicado na indexação de mecanismos de busca.
  • URL Slug – A parte de uma URL que identifica uma página específica em formato legível (ex: example.com/nome-do-produto).
  • Sitemap – Um arquivo estruturado (XML ou HTML) que fornece uma lista das páginas de um website, ajudando mecanismos de busca a indexá-las eficientemente.
  • Navigation Bar (Nav Bar) – Um menu horizontal ou vertical fornecendo links para seções essenciais de um website para navegação fácil.
  • Skip Links – Links ocultos que permitem aos usuários contornar conteúdo repetitivo e navegar diretamente para o conteúdo principal, melhorando a acessibilidade.
  • Pagination – Um método de dividir conteúdo em múltiplas páginas, comumente usado em blogs, resultados de busca e listagens de produtos para melhorar a experiência do usuário.
  • Anchor Link – Um hiperlink que direciona 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-os de volta ao conteúdo relevante.

​
Notificações & Elementos de Feedback

  • Toast: Uma notificação breve e não intrusiva que aparece temporariamente para informar usuários sobre o resultado de uma ação ou fornecer feedback simples. ​
  • Snackbar – Similar a um toast, mas tipicamente localizado na parte inferior da tela com ações opcionais (ex: “Desfazer” em um item deletado).
  • Tooltip – Uma pequena caixa pop-up que fornece informações adicionais ao passar o mouse sobre ou 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 carregar uma página ou enviar um formulário.
  • Progress Bar – Uma barra horizontal que indica a porcentagem de conclusão de uma tarefa ou processo.
  • Skeleton Loader – Uma UI de placeholder que imita o layout do conteúdo final enquanto aguarda seu carregamento, melhorando a performance percebida.

​
Overlays & Pop-Ups

  • Popover: Um overlay transitório que apresenta informações adicionais ou opções relacionadas a um elemento específico da UI, tipicamente aparecendo mediante 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, frequentemente exigindo uma ação antes de retornar à interface primária.
  • Drawer (Sidebar Panel) – Um painel que desliza 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 fundo para foco.
  • Alert Box – Uma caixa de mensagem gerada pelo sistema ou acionada pela aplicação que informa os usuários sobre informações importantes, como erros ou avisos.

​
Elementos de Navegação e Seleção

  • Button: Um elemento clicável que inicia uma ação ou evento, como enviar um formulário ou abrir um diálogo.​
  • Switch (Toggle): Um controle de alternância que permite aos usuários alternar entre dois estados, como ligado ou desligado, frequentemente parecendo um interruptor físico. ​
  • Tabs – Um componente que organiza conteúdo em visualizações separadas dentro de uma única interface, permitindo aos usuários alternar entre seções sem navegar para longe.
  • Stepper (Wizard) – Um componente usado para processos de múltiplas etapas, mostrando aos usuários sua etapa atual e guiando-os através da conclusão.
  • Pagination – Um padrão de UI que divide conteúdo em páginas, frequentemente usado para resultados de busca ou aplicações com muito conteúdo.
  • Breadcrumb – Um auxílio 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.
  • Accordion – Uma seção recolhível que expande ou contrai para revelar ou ocultar conteúdo dinamicamente.
  • Dropdown Menu – Uma lista de opções que aparece quando um usuário clica ou passa o mouse sobre um botão ou campo, frequentemente usado para navegação ou seleção.

​
Elementos de Formulários e Entrada

  • Form: Uma coleção estruturada de campos de entrada permitindo aos usuários enviar dados, como informações de contato ou consultas de busca.​
  • Radio Group: Um conjunto de botões de rádio relacionados permitindo aos usuários selecionar apenas uma opção de múltiplas escolhas.
  • Checkbox: Uma caixa interativa que os usuários podem marcar ou desmarcar para selecionar ou desselecionar uma opção, permitindo múltiplas seleções dentro de um conjunto.​
  • Text Field (Input Field) – Um elemento básico de UI onde os usuários podem inserir texto, como em barras de busca, formulários de login ou comentários.
  • Text Area – Um campo de entrada maior projetado para entrada de texto multilinha, comumente 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, frequentemente estilizado como um dropdown.
  • Date Picker – Um elemento de UI que permite aos usuários selecionar uma data de 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 uma alça ao longo de uma trilha.
  • File Upload Field – Um componente que permite aos usuários selecionar e fazer upload de arquivos de seu dispositivo.
  • Autocomplete (Typeahead Search) – Uma entrada de texto que sugere dinamicamente resultados correspondentes conforme os usuários digitam, melhorando a usabilidade em buscas.

​
Estilos de Design e Tendências

Você pode usar esses termos em qualquer um dos seus prompts para descrever um estilo específico que você está tentando alcançar.
  • Neobrutalism: Uma tendência de web design caracterizada por elementos brutos e não polidos, tipografia ousada e alto contraste, inspirando-se na arquitetura Brutalista de meados do século XX. ​
  • Retro: Design que incorpora estilos, motivos e elementos de décadas passadas, evocando nostalgia e estéticas vintage.​
  • Hacker: Uma estética que reflete a cultura DIY e open-source, frequentemente apresentando fontes monoespaçadas, fundos escuros e interfaces inspiradas em terminal.​
  • Glass (Glassmorphism): Um estilo de design que usa elementos translúcidos semelhantes a vidro fosco com sombras e bordas sutis para criar profundidade.​
  • Nudy: Uma abordagem de design minimalista que utiliza paletas de cores nude ou neutras para criar uma estética suave e discreta.​

​
Recursos de Design e Assets

  • 21st.dev: Um registro comunitário open-source oferecendo componentes de UI React mínimos, modernos e reutilizáveis alimentados por Tailwind CSS e Radix UI, projetados para ajudar engenheiros de design a entregar interfaces de usuário polidas de forma mais eficiente.
  • Dribble: Uma comunidade online líder onde designers e profissionais criativos exibem seu trabalho, descobrem inspiração de design e se conectam com potenciais clientes ou colaboradores.
  • Noun Project: Uma plataforma fornecendo uma vasta coleção de ícones gratuitos e fotos de stock, permitindo que usuários acessem recursos visuais para vários projetos.
  • SVG Repo: Uma biblioteca abrangente de mais de 500.000 vetores SVG e ícones com licença aberta, permitindo que usuários pesquisem, explorem, editem e baixem gráficos adequados para projetos diversos.
  • Google Fonts: Uma biblioteca gratuita de fontes otimizadas para web, oferecendo a designers e desenvolvedores uma ampla seleção de opções tipográficas para aprimorar seus projetos.
  • Typewolf: Um recurso que auxilia designers na seleção das combinações de fontes perfeitas para seus projetos, exibindo tipografias em tendência e oferecendo listas de fontes curadas.

​
Desenvolvimento Backend & Bancos de Dados

​
Fundamentos de Backend

  • Backend: A infraestrutura do lado do servidor de uma aplicação que lida com processamento de dados, armazenamento e lógica de negócios.​
  • Supabase: Uma plataforma de backend-as-a-service de código aberto que fornece um banco de dados Postgres, autenticação, APIs instantâneas e capacidades em tempo real.
  • Webhooks – Callbacks HTTP orientados por eventos que notificam aplicações externas quando ações específicas ocorrem.

​
Gerenciamento de Banco de Dados & Consultas

  • CRUD (Create, Read, Update, Delete): As quatro operações básicas realizadas em dados em um banco de dados ou aplicação.​
  • SQL (Structured Query Language): Uma linguagem de programação específica de domínio projetada para gerenciar e manipular bancos de dados relacionais, permitindo tarefas como consultas, atualizações e organização de dados.
  • PostgreSQL – Um poderoso banco de dados relacional de código aberto conhecido por sua escalabilidade, extensibilidade e conformidade ACID.

​
Conceitos Específicos do Supabase

  • Edge Function: Funções TypeScript do lado do servidor, distribuídas globalmente na borda—próximas aos seus usuários. Elas podem ser usadas para escutar webhooks ou integrar seu projeto Supabase com terceiros como Stripe, Anthropic ou Resend.
  • RLS (Row-Level Security): Um recurso em bancos de dados que permite controle sobre o acesso a linhas específicas em uma tabela baseado em funções ou atributos do usuário - basicamente permitindo que usuários definam regras de autorização granulares, permitindo que você escreva regras SQL complexas que se adequem às suas necessidades de negócio únicas.
  • 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 refere-se a uma URL específica que permite aos clientes interagir com o banco de dados através de chamadas de API RESTful, habilitando operações como criar, ler, atualizar ou deletar dados.
  • Authentication Provider: Uma entidade ou serviço que verifica credenciais de usuário, permitindo acesso seguro a aplicações 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), facilitando autenticação de usuário flexível e segura.

​
Segurança & Autenticação

  • OAuth – Um protocolo de autenticação amplamente usado que permite aos usuários fazer login em aplicações usando serviços de terceiros como Google, Facebook ou GitHub.
  • Two-Factor Authentication (2FA) – Uma medida de segurança que requer que 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 aplicações podem acessar recursos em um servidor.