​
Conceitos-Chave

  • IA (Inteligência Artificial): Tecnologia que permite que máquinas simulem a inteligência humana, permitindo que aprendam, raciocinem e resolvam problemas.
  • Prompt: Um comando baseado em texto usado para instruir um modelo de IA. Dentro do Lumi, os prompts são a ferramenta fundamental que você usará para criar e modificar cada componente da sua aplicação.

​
Termos Específicos do Lumi

  • Modo de Discussão: Mais do que um gerador de código, o Lumi atua como um parceiro de desenvolvimento interativo. Ele o guia pelo planejamento, depuração e lançamento, ajudando você a construir com confiança.
  • Modo de Edição: O ambiente para fazer alterações diretas no código e no conteúdo da sua aplicação.
  • Editar: Uma ferramenta com IA com controles visuais nativos do Tailwind para um refinamento preciso e intuitivo.
  • Remixar: Duplique qualquer projeto para usar como um novo ponto de partida. Remixar permite que você experimente mudanças e explore ideias, preservando a versão original.
  • Visualização: Uma visão interativa e ao vivo para testar funcionalidades e conteúdo antes de publicar suas alterações.

​
Produto & Desenvolvimento

​
Gestão de Produto & Estratégia

  • MVP (Produto Mínimo Viável): A versão mais simples de um produto com recursos suficientes para atrair os primeiros usuários e validar a ideia central.
  • Roadmap: Um plano de alto nível que descreve a visão, a direção e as futuras funcionalidades de um produto ao longo do tempo.
  • Solicitação de Funcionalidade: Uma sugestão de usuários ou partes interessadas para uma nova capacidade ou melhoria.
  • História de Usuário: Uma descrição breve e simples de uma funcionalidade da perspectiva do usuário final.
  • Jornada do Usuário: O caminho que um usuário percorre para atingir um objetivo dentro do seu produto.
  • Persona: Um perfil detalhado e fictício de um usuário-alvo, criado a partir de pesquisas para orientar as decisões de design e desenvolvimento.

​
Conceitos de Engenharia

  • PRD (Documento de Requisitos do Produto): Um documento que detalha o propósito, as funcionalidades e as especificações técnicas de um produto para guiar a equipe de desenvolvimento.
  • API (Interface de Programação de Aplicações): Um conjunto de regras que permite que diferentes aplicações de software se comuniquem e troquem dados. Tipos comuns incluem APIs REST e GraphQL.
  • Refatorar: O processo de reestruturar o código para melhorar sua qualidade e manutenibilidade sem alterar sua funcionalidade.
  • GitHub: Uma plataforma popular para controle de versão e desenvolvimento colaborativo de software.

​
Dados & Análise

  • Teste A/B: Comparar duas versões de uma página da web ou funcionalidade para ver qual delas tem melhor desempenho.
  • Taxa de Conversão: A porcentagem de usuários que completam um objetivo específico, como se inscrever ou fazer uma compra.
  • Taxa de Churn: A porcentagem de usuários que deixam de usar seu produto durante um período específico.
  • Taxa de Retenção: A porcentagem de usuários que continuam a usar seu produto ao longo do tempo.
  • Rastreamento de Eventos: Monitorar ações específicas do usuário (como cliques ou envios de formulário) para entender o engajamento.

​
UI/UX & Desenvolvimento Frontend

​
Desenvolvimento Frontend

  • Frontend: A parte de uma aplicação que os usuários veem e com a qual interagem, incluindo a interface do usuário e a experiência geral.
  • React: Uma biblioteca JavaScript popular para construir interfaces de usuário dinâmicas, especialmente para aplicações de página única.
  • Gradiente: Uma transição suave entre duas ou mais cores.
  • Tailwind CSS: Um framework CSS utility-first para construir rapidamente designs personalizados diretamente no seu HTML.
  • Design System: Uma coleção padronizada de componentes reutilizáveis e diretrizes que garante a consistência do design em um produto.

​
Conceitos de Design UI/UX

  • Cor de Destaque: Uma cor contrastante usada para destacar elementos-chave como botões ou links.
  • Tema: A aparência geral de uma aplicação, definida por seu esquema de cores, tipografia e layout.
  • Design Responsivo: Uma abordagem que garante que sua aplicação tenha uma ótima aparência e funcione bem em qualquer dispositivo, de desktops a celulares.
  • Acima da Dobra: O conteúdo visível em uma página da web sem rolar a tela. É um espaço nobre para informações importantes.
  • CTA (Chamada para Ação): Um estímulo, como um botão ou link, que incentiva os usuários a realizar uma ação específica (ex: “Inscreva-se”, “Compre Agora”).

​
Estrutura da Página & Navegação

  • Títulos: Títulos (H1, H2, etc.) que estruturam o conteúdo e estabelecem uma hierarquia visual clara.
  • Rodapé: A seção na parte inferior de uma página da web, geralmente contendo links, informações de contato e avisos legais.
  • Breadcrumb: Um rastro de navegação que mostra a localização atual de um usuário em um site (ex: Início > Produtos > Laptops).
  • Favicon: O pequeno ícone que representa seu site na aba do navegador ou nos favoritos.
  • Meta Title: O título da página exibido nos resultados dos mecanismos de busca e nas abas do navegador, crucial para SEO.
  • Meta Description: O breve resumo de uma página da web exibido nos resultados de busca para atrair cliques.
  • URL Canônica: Uma tag que informa aos mecanismos de busca a versão preferencial de uma página para evitar problemas de conteúdo duplicado.
  • URL Slug: A parte amigável de uma URL que identifica uma página específica (ex: /about-us).
  • Sitemap: Um arquivo que lista todas as páginas do seu site para ajudar os mecanismos de busca a indexá-las de forma eficaz.
  • Barra de Navegação (Nav Bar): O menu principal que fornece links para as seções principais do seu site.
  • Links de Pulo: Links de acessibilidade que permitem aos usuários pular a navegação e ir diretamente para o conteúdo principal.
  • Paginação: Um sistema para dividir longas listas de conteúdo em páginas separadas.
  • Link Âncora: Um link que rola a página do usuário para uma seção específica na mesma página.
  • Página 404: Uma página de erro personalizada exibida quando um usuário tenta acessar uma URL que não existe.

​
Notificações & Feedback

  • Toast: Uma notificação pequena e temporária que fornece um feedback breve sobre uma ação.
  • Snackbar: Semelhante a um toast, mas geralmente aparece na parte inferior da tela e pode incluir um botão de ação (ex: “Desfazer”).
  • Tooltip: Uma caixa pop-up com informações extras que aparece ao passar o mouse sobre um elemento.
  • Badge: Um pequeno marcador visual em um ícone ou botão para indicar uma contagem, status ou notificação.
  • Spinner de Carregamento: Um ícone animado que indica que um processo está em execução em segundo plano.
  • Barra de Progresso: Uma barra visual que mostra o progresso da conclusão de uma tarefa.
  • Skeleton Loader: Uma UI de placeholder que imita o layout do conteúdo final, melhorando a percepção da velocidade de carregamento.

​
Sobreposições & Pop-Ups

  • Popover: Uma sobreposição que fornece contexto adicional ou opções relacionadas a um elemento específico.
  • Diálogo (Modal): Uma janela que aparece sobre o conteúdo principal, exigindo interação do usuário para ser dispensada.
  • Drawer (Painel Lateral): Um painel que desliza da lateral, geralmente contendo navegação ou configurações.
  • Lightbox: Uma janela modal que exibe mídias como imagens em uma visualização focada e ampliada.
  • Caixa de Alerta: Uma mensagem do sistema que informa os usuários sobre informações críticas, erros ou avisos.
  • Botão: Um elemento clicável que aciona uma ação.
  • Interruptor (Toggle): Um controle que permite aos usuários alternar entre dois estados, como ligado e desligado.
  • Abas: Um componente que organiza o conteúdo em diferentes visualizações entre as quais um usuário pode alternar.
  • Stepper (Assistente): Um processo guiado de várias etapas que mostra o progresso dos usuários.
  • Acordeão: Uma série de painéis recolhíveis usados para organizar e revelar conteúdo.
  • Menu Suspenso: Uma lista de opções que aparece quando um usuário interage com um botão ou campo.

​
Formulários & Entradas

  • Formulário: Um conjunto de campos para coletar dados do usuário, como um formulário de inscrição ou de contato.
  • Grupo de Rádio: Um conjunto de opções onde o usuário pode selecionar apenas uma.
  • Caixa de Seleção: Um controle que permite aos usuários selecionar uma ou mais opções de uma lista.
  • Campo de Texto: Uma caixa de entrada padrão para inserção de texto de linha única.
  • Área de Texto: Uma caixa de entrada maior para texto de várias linhas, como comentários ou mensagens.
  • Select (Caixa de Seleção Suspensa): Uma lista suspensa para escolher uma opção de um conjunto predefinido.
  • Seletor de Data: Uma interface de calendário que permite aos usuários selecionar uma data facilmente.
  • Slider: Um controle para selecionar um valor de um intervalo contínuo.
  • Upload de Arquivo: Um componente que permite aos usuários enviar arquivos de seu dispositivo.
  • Autocompletar: Um campo de entrada que sugere resultados à medida que o usuário digita.

​
Estilos & Tendências de Design

Use estes termos em seus prompts para definir a estética que você deseja alcançar.
  • Neobrutalismo: Um estilo de design cru e de alto contraste com tipografia ousada e elementos não refinados.
  • Retrô: Um design que evoca nostalgia usando estilos de décadas passadas.
  • Hacker: Uma estética inspirada em interfaces de terminal, com fundos escuros e fontes monoespaçadas.
  • Glassmorfismo: Um estilo que usa camadas translúcidas, semelhantes a vidro fosco, para criar profundidade.
  • Nudy: Uma abordagem minimalista que usa paletas de cores suaves e neutras para uma aparência discreta.

​
Desenvolvimento Backend & Bancos de Dados

​
Fundamentos do Backend

  • Backend: O lado do servidor de uma aplicação que lida com dados, lógica e operações principais.
  • Webhooks: Mensagens automatizadas enviadas de aplicativos quando algo acontece, permitindo a troca de dados em tempo real.

​
Gerenciamento de Banco de Dados

  • CRUD (Criar, Ler, Atualizar, Excluir): As quatro operações fundamentais para gerenciar dados.
  • SQL (Linguagem de Consulta Estruturada): A linguagem padrão para gerenciar e consultar dados em bancos de dados relacionais.
  • PostgreSQL: Um poderoso banco de dados relacional de código aberto, conhecido por sua confiabilidade e recursos avançados.

​
Segurança & Autenticação

  • OAuth: Um padrão de autenticação que permite aos usuários fazer login com contas de terceiros, como Google ou GitHub.
  • Autenticação de Dois Fatores (2FA): Uma camada de segurança que exige que os usuários forneçam duas formas de identificação para fazer login.
  • CORS (Compartilhamento de Recursos de Origem Cruzada): Um mecanismo de segurança que controla como os recursos em seu servidor podem ser acessados de outros domínios.