> ## Documentation Index > Fetch the complete documentation index at: https://docs.lumi.new/llms.txt > Use this file to discover all available pages before exploring further. # Melhores Práticas > Fique a par rapidamente e evite armadilhas comuns ao desenvolver no Lumi. Para tirar o máximo partido do Lumi, quer seja um utilizador novo ou experiente, é necessário estabelecer uma base sólida, dominar a engenharia de prompts e utilizar eficazmente as suas várias ferramentas e modos. Ao seguir estas diretrizes, pode acelerar o seu processo de desenvolvimento e evitar armadilhas comuns. ## Melhores Práticas de Prompting ### **1. Dominar a Engenharia de Prompts para Melhores Resultados:** Trate a IA como o seu parceiro de engenharia; ela só sabe o que lhe diz explicitamente. * **Clareza e Verbosidade:** **Prompts claros e verbosos levam a resultados superiores**. Seja específico, mencionando páginas exatas (por exemplo, `/dashboard`) e comportamentos esperados. Use linguagem natural para os seus pedidos, como ```mdx expandable theme={null} Quero que os utilizadores com o papel Investidor acedam a este componente, mas não os Administradores. ``` * **Ajudas Visuais:** **Adicione capturas de ecrã, especialmente ao descrever bugs ou problemas de UX**. Isto fornece um contexto visual que as palavras por si só podem não conseguir transmitir. * **Limites e Restrições:** Diga à IA **em que não deve mexer**. Por exemplo, pode instruir: ```mdx expandable theme={null} Não edite /shared/Layout.tsx. ``` * **Repetição para Retenção:** A memória da IA pode ser limitada, por isso **repita instruções importantes em vários prompts**, se necessário. * **Dividir Tarefas Complexas:** Evite tentar implementar várias coisas em simultâneo. **Divida o seu trabalho em partes mais pequenas e testáveis**. Use o Modo de Discussão entre cada passo para validar antes de prosseguir. Um modelo útil para a divisão de funcionalidades inclui: ```mdx expandable theme={null} Criar a nova página, Adicionar layout da UI, Conectar os dados, Adicionar lógica + casos extremos, Testar por papel. ``` * **Instruções Específicas para Papéis:** Se a sua aplicação suporta múltiplos papéis de utilizador, **defina sempre a que papel o prompt se aplica**. Isto ajuda a prevenir bugs resultantes de lógica ou componentes partilhados. Por exemplo: ```mdx expandable theme={null} Como Investidor, quero ver o painel da empresa, mas não devo poder editá-lo. Por favor, isole esta funcionalidade apenas para o papel de Investidor. ``` ### **2. Utilize o Modo de Discussão Frequentemente** O Modo de Discussão é o seu copiloto de IA, concebido para depurar, fazer brainstorming e planear implementações **sem alterar imediatamente o seu código**. * **Quando usar:** Mude para o Modo de Discussão após 2-3 tentativas falhadas de "Tentar Corrigir", ao depurar lógica complexa ou problemas de base de dados, ou ao planear novas funcionalidades. Pode pedir-lhe para ```mdx expandable theme={null} "Sugerir 3 formas de implementar X". ``` * **Recomendação de Fluxo de Trabalho:** Alguns utilizadores consideram eficaz **passar 60-70% do seu tempo no Modo de Discussão**, clicando em "Implementar o plano" apenas quando estiverem totalmente satisfeitos. Esta abordagem melhora a consistência dos resultados e previne edições não intencionais. * **Interação Controlada:** Para evitar a execução de código indesejada, use prompts como "Investiga, mas ainda não escrevas código" ou "Sugere 3 formas de resolver isto sem alterar nada". Isto mantém o controlo nas suas mãos. * **Sair de Loops da IA:** Se a IA entrar num "loop" de correção de código quebrado, mude para o Modo de Discussão, cole uma captura de ecrã do erro e use o prompt: ```mdx expandable theme={null} "Por favor, investiga isto sem quebrar outras funcionalidades. Se necessário, reverte para a última versão funcional e corrige a partir daí". ``` ### **3. Remix como Último Recurso.** Às vezes, começar de novo leva menos tempo, especialmente quando se está preso num impasse de desenvolvimento. * **O que o Remix Faz:** O Remix cria uma **cópia limpa do seu projeto em T=0**. Pode então reconstruir com prompts melhorados e conhecimento mais claro, usando o seu projeto antigo apenas como referência. * **Quando Fazer Remix:** Isto é útil se estiver preso num loop de bugs, quiser recomeçar de forma limpa preservando o histórico, ou precisar de desconectar um serviço de base de dados como o Supabase e tentar uma nova abordagem. ### **4. Cultive a Paciência e a Calma** O desenvolvimento com IA pode ser imprevisível; mágico num momento, frustrante no seguinte. As fases finais de uma construção costumam ser as mais demoradas. * **Regra de Ouro:** **Dedique tempo aos prompts, verifique tudo novamente e divida o trabalho em blocos pequenos e testáveis**. A precisão nas suas entradas está diretamente correlacionada com a qualidade das suas saídas. ### **5. Dicas Bónus para um Fluxo de Trabalho Melhorado** * **Padrão "Estou frustrado...":** Utilize o padrão de prompt "Estou frustrado…" para ajudar a IA a focar-se melhor. * **Verificações Pós-Edição:** Após qualquer edição importante, **verifique sempre novamente múltiplos papéis e os seus comportamentos**, especialmente para lógica condicional. * **Versões de Recurso:** Guarde versões estáveis como recurso para uma depuração rápida. * **Componentes Específicos para Papéis:** Para evitar bugs de lógica excessivamente genérica, peça à IA para ```mdx expandable theme={null} "Criar um componente especificamente para o [papel X] e não reutilizar componentes partilhados, a menos que claramente definidos". ``` ## Biblioteca de Prompts – Estratégias e Exemplos A biblioteca de prompts fornece uma coleção de padrões de prompts reutilizáveis e exemplos para cenários de desenvolvimento comuns com a IA do Lumi. Pense neles como modelos para adaptar aos seus projetos. 1. **Iniciar Projetos** * **Quando usar:** No início de um projeto para ajudar a IA a compreender os requisitos de alto nível e a construir a base. Funciona como o seu briefing inicial do projeto. * **Como usar:** Descreva o tipo de aplicação, as tecnologias chave (frontend, backend, serviços) e as funcionalidades principais. Dê indicações à IA sobre por onde começar, geralmente a página principal ou uma funcionalidade crucial. ```mdx expandable theme={null} "Preciso de uma aplicação de gestão de tarefas com: - Stack Tecnológica: Frontend em Next.js, Tailwind CSS para estilização, Supabase para autenticação e base de dados. - Funcionalidades Principais: Criação de projetos e tarefas, atribuição de tarefas a utilizadores, lembretes de prazos e uma visão geral no painel. Comece por construir a página principal do painel, contendo: - Um cabeçalho com navegação, - Uma lista de projetos com o seu estado, - e um botão para criar um novo projeto. Forneça dados fictícios por agora e garanta que o design é limpo e responsivo". ``` 2. **Melhorias de Design UI/UX** * **Quando usar:** Para **refinar o apelo visual** da sua aplicação sem alterar a sua funcionalidade. Isto inclui polir a UI, ajustar layouts ou implementar um estilo de design específico. * **Como usar:** Defina claramente o âmbito das alterações de design e **enfatize que a funcionalidade deve permanecer intacta**. Oriente a IA sobre a estética desejada (por exemplo, moderna, minimalista). Aborde várias alterações uma de cada vez e mencione quaisquer partes da UI cuja lógica não deve ser alterada. ```mdx expandable theme={null} A UI da aplicação deve ser melhorada, sem alterar qualquer funcionalidade. - Manter toda a lógica e gestão de estado existentes como estão. - Melhorias Visuais: Atualizar o estilo da página do painel: usar um design de cartão moderno para cada listagem de projeto, melhorar o esquema de cores para melhor contraste e aumentar o preenchimento para um layout mais limpo. - Garantir que estas alterações não quebram nenhuma funcionalidade ou fluxo de dados. Objetivo: melhorias puramente cosméticas para um aspeto mais polido, com a aplicação a comportar-se exatamente como antes. ``` 3. **Garantir a Responsividade** * **Quando usar:** Quando a sua aplicação precisa de adaptar o seu layout a vários tamanhos de ecrã (móvel, tablet, desktop). Ideal como uma passagem final em tarefas com muita UI. * **Como usar:** **Enfatize uma abordagem mobile-first** e instrua a IA a garantir a responsividade em breakpoints padrão. Mencione diretrizes específicas de frameworks CSS (por exemplo, os breakpoints `sm, md, lg, xl` do Tailwind) e peça para evitar larguras fixas. ```mdx expandable theme={null} A nossa aplicação precisa de ser totalmente responsiva em dispositivos móveis, tablets e desktops. - Siga uma estratégia mobile-first: priorize o layout para ecrãs pequenos e depois ajuste para ecrãs maiores. - Use as melhores práticas modernas de UI/UX para design responsivo. (Para Tailwind CSS, use os breakpoints padrão sm, md, lg, xl – sem breakpoints personalizados, a menos que seja necessário.) - Garanta que todas as páginas (especialmente as páginas do painel e de detalhes do projeto) se ajustam corretamente num ecrã pequeno: os elementos devem empilhar ou redimensionar conforme necessário, o texto deve permanecer legível e nenhum conteúdo deve transbordar do ecrã. - Não altere o design principal ou a funcionalidade, apenas garanta que se adapta de forma flexível a diferentes tamanhos de ecrã. Após fazer as alterações, por favor, verifique novamente o layout nas dimensões de um iPhone 12 e numa largura de desktop típica. ``` 4. **Refatorar Código** * **Quando usar:** Periodicamente, especialmente quando o código se torna confuso ou lento. A refatoração melhora a estrutura, legibilidade ou desempenho do código **sem alterar o seu comportamento externo**. * **Como usar:** Identifique o âmbito (ficheiro, funcionalidade ou base de código). Para ficheiros específicos, use o prompt: "Refatora este ficheiro para maior clareza e eficiência, mas **não alteres a sua funcionalidade ou resultado**". Especifique áreas de foco como a redução de duplicação ou a simplificação da lógica. Para refatorações maiores, peça à IA para planear em passos ou auditar o código primeiro. ```mdx expandable theme={null} Refatora o ficheiro do componente ProjectList, mas mantém o seu comportamento e UI exatamente iguais. Objetivos: - Melhorar a estrutura e a legibilidade do código (simplificar funções complexas, dividi-las em funções mais pequenas, se necessário). - Remover quaisquer variáveis ou importações não utilizadas. - Garantir que o ficheiro segue as melhores práticas e está bem documentado. Não introduzas novas funcionalidades nem alteres o funcionamento do componente para o utilizador – isto é puramente uma limpeza de código para manutenção. Se alguma parte do código não for clara, adiciona um breve comentário para clarificação. ``` 5. **Tipos de Aplicações e Funcionalidades** O Lumi pode ajudar com uma vasta variedade de tipos de aplicações e funcionalidades. Os exemplos incluem: ```mdx expandable theme={null} Loja de E-commerce: Listagem de produtos, pesquisa, filtragem, carrinho, checkout, contas de utilizador. ``` ```mdx expandable theme={null} CMS: Painel de administração, criação/edição/publicação de conteúdo, texto formatado, upload de imagens, SEO. ``` ```mdx expandable theme={null} Gestão de Projetos: Quadros de tarefas, listas, cartões, atribuição, prazos, arrastar e soltar. ``` ```mdx expandable theme={null} Feed de Redes Sociais: Publicações, comentários, gostos, partilhas, perfis de utilizador, notificações, scroll infinito. ``` ```mdx expandable theme={null} Painel de Análise: Vários tipos de gráficos, filtragem de dados, seleção de intervalo de datas, relatórios exportáveis. ``` ```mdx expandable theme={null} Starter de Aplicação SaaS: Autenticação de utilizador, gestão de subscrições, definições, painel, acesso baseado em papéis. ``` ``` Interface de Chat com IA: Histórico de conversas, indicadores de digitação, encadeamento de mensagens, feedback. ``` ```mdx expandable theme={null} Ferramenta de Geração de Conteúdo com IA: Gerar conteúdo com base em entradas, opções de refinamento, guardar, exportar. ``` ```mdx expandable theme={null} Componente de Recomendação: Baseado no comportamento/preferências do utilizador, feedback, explicação das recomendações. ``` ```mdx expandable theme={null} Sistema de Personalização: UI personalizável, recomendações de conteúdo, controlo do utilizador sobre a personalização. ``` 6. **Planeamento Estratégico com IA** * **Quando usar:** Antes de iniciar uma implementação complexa e com vários passos, ou quando tem uma funcionalidade grande que precisa de ser dividida. Os prompts de planeamento permitem-lhe **delinear uma abordagem antes de o código ser escrito**, poupando créditos e evitando direções erradas. * **Como usar:** Peça à IA um plano ou uma lista de verificação. Por exemplo, "Delineia um plano passo a passo para X" ou "Antes de programar, lista os passos que vais seguir para implementar Y". É melhor fazer isto no Modo de Discussão para evitar a execução de código. ```mdx expandable theme={null} Antes de escrever qualquer código, planeia a implementação da nova funcionalidade de Notificações. - Lista cada passo necessário para adicionar notificações por e-mail quando uma tarefa está atrasada. - Considera tanto os aspetos de frontend (alterações na UI, se houver) como de backend (criação de verificações agendadas ou gatilhos). - Garante que o plano mantém a funcionalidade atual estável – não podemos quebrar nada que já exista. - Fornece o plano como uma lista ordenada (1, 2, 3, ...), com uma breve explicação de cada passo. Assim que delineares o plano, pausa para revisão. Não faças ainda nenhuma alteração ao código.". A IA pode responder com um plano como: 1. Adicionar um campo de timestamp às tarefas. 2. Criar uma função do lado do servidor para verificar tarefas atrasadas. 3. Integrar o envio de e-mails. 4. Atualizar a UI para os seletores de notificação. 5. Testar o fluxo. ``` Ao aplicar diligentemente estas melhores práticas e utilizar a biblioteca de prompts, estará bem equipado para desenvolver aplicações sofisticadas de forma eficiente e eficaz no Lumi.