Conceitos-Chave

  • AI (Inteligência Artificial): Tecnologia que permite que as máquinas simulem a inteligência humana, permitindo-lhes aprender, raciocinar e resolver problemas.
  • Prompt: Um comando de texto usado para instruir um modelo de IA. Na Lumi, os prompts são a ferramenta fundamental que utilizará para criar e modificar cada componente da sua aplicação.

Termos Específicos da Lumi

  • Modo de Discussão: Mais do que um gerador de código, a Lumi atua como um parceiro de desenvolvimento interativo. Guia-o através do planeamento, depuração e lançamento, ajudando-o a construir com confiança.
  • Modo de Edição: O ambiente para fazer alterações diretas ao código e conteúdo da sua aplicação.
  • Editar: Uma ferramenta alimentada por IA com controlos visuais nativos do Tailwind para um refinamento preciso e intuitivo.
  • Remix: Duplique qualquer projeto para usar como um novo ponto de partida. O Remixing permite-lhe experimentar alterações e explorar ideias, preservando a versão original.
  • Pré-visualização: Uma vista interativa e em tempo real para testar funcionalidades e conteúdo antes de publicar as suas alterações.

Produto e Desenvolvimento

Gestão de Produto e Estratégia

  • MVP (Produto Mínimo Viável): A versão mais simples de um produto com funcionalidades suficientes para atrair os primeiros utilizadores e validar a ideia central.
  • Roadmap: Um plano de alto nível que descreve a visão, direção e futuras funcionalidades de um produto ao longo do tempo.
  • Pedido de Funcionalidade: Uma sugestão de utilizadores ou partes interessadas para uma nova capacidade ou melhoria.
  • História de Utilizador: Uma descrição breve e simples de uma funcionalidade da perspetiva do utilizador final.
  • Jornada do Utilizador: O caminho que um utilizador percorre para atingir um objetivo dentro do seu produto.
  • Persona: Um perfil detalhado e fictício de um utilizador-alvo, criado a partir de pesquisa 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 orientar a equipa de desenvolvimento.
  • API (Interface de Programação de Aplicações): Um conjunto de regras que permite que diferentes aplicações de software comuniquem e troquem dados. Os tipos comuns incluem APIs REST e GraphQL.
  • Refatorizar: O processo de reestruturar o código para melhorar a sua qualidade e manutenibilidade sem alterar a sua funcionalidade.
  • GitHub: Uma plataforma popular para controlo de versões e desenvolvimento de software colaborativo.

Dados e Análise

  • Teste A/B: Comparar duas versões de uma página web ou funcionalidade para ver qual delas tem melhor desempenho.
  • Taxa de Conversão: A percentagem de utilizadores que concluem um objetivo específico, como inscrever-se ou fazer uma compra.
  • Taxa de Abandono (Churn Rate): A percentagem de utilizadores que deixam de usar o seu produto durante um período específico.
  • Taxa de Retenção: A percentagem de utilizadores que continuam a usar o seu produto ao longo do tempo.
  • Rastreamento de Eventos: Monitorizar ações específicas do utilizador (como cliques ou submissões de formulários) para compreender o envolvimento.

UI/UX e Desenvolvimento Frontend

Desenvolvimento Frontend

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

Conceitos de Design UI/UX

  • Cor de Destaque: Uma cor contrastante usada para realçar elementos-chave como botões ou links.
  • Tema: A aparência geral de uma aplicação, definida pelo seu esquema de cores, tipografia e layout.
  • Design Responsivo: Uma abordagem que garante que a sua aplicação tenha uma boa aparência e funcione bem em qualquer dispositivo, desde computadores de secretária a telemóveis.
  • Acima da Dobra (Above the Fold): O conteúdo visível numa página web sem necessidade de rolar. É um espaço privilegiado para informações importantes.
  • CTA (Chamada para Ação): Um apelo, como um botão ou link, que incentiva os utilizadores a realizar uma ação específica (por exemplo, “Inscrever-se”, “Comprar Agora”).

Estrutura da Página e Navegação

  • Títulos: Títulos (H1, H2, etc.) que estruturam o conteúdo e estabelecem uma hierarquia visual clara.
  • Rodapé: A secção na parte inferior de uma página web, que normalmente contém links, informações de contacto e avisos legais.
  • Breadcrumb: Um rasto de navegação que mostra a localização atual de um utilizador num site (por exemplo, Início > Produtos > Portáteis).
  • Favicon: O pequeno ícone que representa o seu site no separador do navegador ou nos favoritos.
  • Meta Título: O título da página exibido nos resultados dos motores de busca e nos separadores do navegador, crucial para SEO.
  • Meta Descrição: O breve resumo de uma página web mostrado nos resultados de busca para atrair cliques.
  • URL Canónico: Uma tag que informa os motores de busca sobre a versão preferida de uma página para evitar problemas de conteúdo duplicado.
  • Slug do URL: A parte amigável de um URL que identifica uma página específica (por exemplo, /sobre-nos).
  • Sitemap: Um ficheiro que lista todas as páginas do seu site para ajudar os motores de busca a indexá-las eficazmente.
  • Barra de Navegação (Nav Bar): O menu principal que fornece links para as secções principais do seu site.
  • Links de Salto: Links de acessibilidade que permitem aos utilizadores contornar a navegação e saltar 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 leva o utilizador a uma secção específica na mesma página.
  • Página 404: Uma página de erro personalizada exibida quando um utilizador tenta aceder a um URL que não existe.

Notificações e Feedback

  • Toast: Uma notificação pequena e temporária que fornece feedback breve sobre uma ação.
  • Snackbar: Semelhante a um toast, mas aparece frequentemente na parte inferior do ecrã e pode incluir um botão de ação (por exemplo, “Desfazer”).
  • Tooltip: Uma caixa pop-up com informações extra que aparece ao passar o rato sobre um elemento.
  • Emblema (Badge): Um pequeno marcador visual num ícone ou botão para indicar uma contagem, estado ou notificação.
  • Spinner de Carregamento: Um ícone animado que indica que um processo está a decorrer 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 perceção da velocidade de carregamento.

Sobreposições e Pop-ups

  • Popover: Uma sobreposição que fornece contexto adicional ou opções relacionadas com um elemento específico.
  • Diálogo (Modal): Uma janela que aparece sobre o conteúdo principal, exigindo a interação do utilizador para ser fechada.
  • Gaveta (Painel Lateral): Um painel que desliza da lateral, contendo normalmente navegação ou definições.
  • Lightbox: Uma janela modal que exibe multimédia, como imagens, numa vista focada e ampliada.
  • Caixa de Alerta: Uma mensagem do sistema que informa os utilizadores sobre informações críticas, erros ou avisos.
  • Botão: Um elemento clicável que desencadeia uma ação.
  • Interruptor (Toggle): Um controlo que permite aos utilizadores alternar entre dois estados, como ligado e desligado.
  • Separadores (Tabs): Um componente que organiza o conteúdo em diferentes vistas entre as quais um utilizador pode alternar.
  • Stepper (Assistente): Um processo guiado de múltiplos passos que mostra aos utilizadores o seu progresso.
  • Acordeão: Uma série de painéis recolhíveis usados para organizar e revelar conteúdo.
  • Menu Suspenso (Dropdown): Uma lista de opções que aparece quando um utilizador interage com um botão ou campo.

Formulários e Entrada de Dados

  • Formulário: Um conjunto de campos para recolher dados do utilizador, como um formulário de inscrição ou de contacto.
  • Grupo de Botões de Rádio: Um conjunto de opções onde o utilizador pode selecionar apenas uma.
  • Caixa de Seleção (Checkbox): Um controlo que permite aos utilizadores selecionar uma ou mais opções de uma lista.
  • Campo de Texto: Uma caixa de entrada padrão para a inserção de texto de uma única linha.
  • Á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 utilizadores selecionar uma data facilmente.
  • Slider: Um controlo para selecionar um valor de um intervalo contínuo.
  • Carregamento de Ficheiros: Um componente que permite aos utilizadores carregar ficheiros do seu dispositivo.
  • Preenchimento Automático (Autocomplete): Um campo de entrada que sugere resultados à medida que o utilizador digita.

Estilos e Tendências de Design

Use estes termos nos seus prompts para definir a estética que deseja alcançar.
  • Neobrutalismo: Um estilo de design cru, de alto contraste, com tipografia arrojada e elementos não refinados.
  • Retro: Um design que evoca nostalgia ao usar 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 um visual discreto.

Desenvolvimento Backend e Bases de Dados

Fundamentos de Backend

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

Gestão de Bases de Dados

  • CRUD (Create, Read, Update, Delete): As quatro operações fundamentais para gerir dados.
  • SQL (Structured Query Language): A linguagem padrão para gerir e consultar dados em bases de dados relacionais.
  • PostgreSQL: Uma poderosa base de dados relacional de código aberto, conhecida pela sua fiabilidade e funcionalidades avançadas.

Segurança e Autenticação

  • OAuth: Um padrão de autenticação que permite aos utilizadores iniciar sessão com contas de terceiros, como Google ou GitHub.
  • Autenticação de Dois Fatores (2FA): Uma camada de segurança que exige que os utilizadores forneçam duas formas de identificação para iniciar sessão.
  • CORS (Cross-Origin Resource Sharing): Um mecanismo de segurança que controla como os recursos no seu servidor podem ser acedidos a partir de outros domínios.