> ## 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 por dentro rapidamente e evite armadilhas comuns ao construir no Lumi. Para aproveitar ao máximo o Lumi, seja você um usuário novo ou experiente, é necessário estabelecer uma base sólida, dominar a engenharia de prompts e utilizar suas diversas ferramentas e modos de forma eficaz. Seguindo estas diretrizes, você pode acelerar seu processo de desenvolvimento e evitar armadilhas comuns. ## Melhores Práticas de Prompting ### **1. Dominando a Engenharia de Prompts para Melhores Resultados:** Trate a IA como sua parceira de engenharia; ela só sabe o que você diz explicitamente a ela. * **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 suas solicitações, como ```mdx expandable theme={null} Eu quero que usuários com a função Investidor acessem este componente, mas não os Administradores. ``` * **Auxílios Visuais:** **Adicione capturas de tela, especialmente ao descrever bugs ou problemas de UX**. Isso fornece um contexto visual que as palavras sozinhas podem não transmitir. * **Limites e Restrições:** Diga à IA **o que não tocar**. Por exemplo, você 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, então **repita instruções importantes em vários prompts**, se necessário. * **Divida Tarefas Complexas:** Evite tentar implementar várias coisas simultaneamente. **Divida seu trabalho em partes menores e testáveis**. Use o Modo de Discussão entre cada etapa 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 função. ``` * **Instruções Específicas por Função:** Se sua aplicação suporta múltiplas funções de usuário, **sempre defina a qual função o prompt se aplica**. Isso ajuda a prevenir bugs decorrentes de lógica ou componentes compartilhados. Por exemplo: ```mdx expandable theme={null} Como Investidor, quero visualizar o painel da empresa, mas não devo ser capaz de editá-lo. Por favor, isole esta funcionalidade apenas para a função de Investidor. ``` ### **2. Utilize o Modo de Discussão Frequentemente** O Modo de Discussão é seu copiloto de IA, projetado para depurar, fazer brainstorming e planejar implementações **sem alterar seu código imediatamente**. * **Quando usar:** Mude para o Modo de Discussão após 2-3 tentativas falhas de "Tentar Corrigir", ao depurar lógica complexa ou problemas de banco de dados, ou ao planejar novas funcionalidades. Você pode solicitar a ele para ```mdx expandable theme={null} "Sugira 3 maneiras de implementar X". ``` * **Recomendação de Fluxo de Trabalho:** Alguns usuários acham eficaz **passar de 60 a 70% do tempo no Modo de Discussão**, clicando em "Implementar o plano" apenas quando estiverem totalmente satisfeitos. Essa abordagem melhora a consistência dos resultados e evita edições não intencionais. * **Interação Controlada:** Para evitar a execução indesejada de código, use prompts como "Investigue, mas não escreva código ainda" ou "Sugira 3 maneiras de resolver isso sem alterar nada". Isso mantém o controle em suas mãos. * **Escapando de Loops da IA:** Se a IA entrar em um "loop" de corrigir código quebrado, mude para o Modo de Discussão, cole uma captura de tela do erro e use o prompt: ```mdx expandable theme={null} "Por favor, investigue isso sem quebrar outras funcionalidades. Se necessário, reverta para a última versão funcional e corrija a partir daí". ``` ### **3. Remix como Último Recurso.** Às vezes, começar de novo leva menos tempo, especialmente quando se está preso em um atoleiro de desenvolvimento. * **O que o Remix faz:** O Remix cria uma **cópia limpa do seu projeto em T=0**. Você pode então reconstruir com prompts aprimorados e conhecimento mais claro, usando seu projeto antigo apenas como referência. * **Quando usar o Remix:** Isso é útil se você estiver preso em um loop de bugs, quiser recomeçar de forma limpa preservando o histórico, ou precisar desconectar um serviço de banco de dados como o Supabase e tentar uma nova abordagem. ### **4. Cultive Paciência e Calma** O desenvolvimento com IA pode ser imprevisível; mágico em um momento, frustrante no outro. As fases finais de uma construção geralmente levam mais tempo. * **Regra de Ouro:** **Dedique tempo aos prompts, verifique tudo novamente e divida o trabalho em blocos pequenos e testáveis**. A precisão em suas entradas se correlaciona diretamente com a qualidade de suas saídas. ### **5. Dicas Bônus para um Fluxo de Trabalho Aprimorado** * **Padrão "Estou frustrado...":** Empregue o padrão de prompt "Estou frustrado..." para ajudar a IA a se concentrar melhor. * **Verificações Pós-Edição:** Após qualquer edição importante, **sempre verifique novamente múltiplas funções e seus comportamentos**, especialmente para lógica condicional. * **Versões de Fallback:** Armazene versões estáveis como fallback para depuração rápida. * **Componentes Específicos por Função:** Para evitar bugs de lógica excessivamente genérica, solicite à IA para ```mdx expandable theme={null} "Crie um componente especificamente para a [função X] e não reutilize componentes compartilhados, a menos que claramente definidos no escopo". ``` ## 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 comuns de desenvolvimento com a IA do Lumi. Pense neles como modelos para adaptar aos seus projetos. 1. **Iniciando Projetos** * **Quando usar:** No início de um projeto para ajudar a IA a entender os requisitos de alto nível e construir a base. Funciona como seu briefing inicial do projeto. * **Como usar:** Descreva o tipo de aplicação, as tecnologias-chave (frontend, backend, serviços) e as funcionalidades principais. Direcione a 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 gerenciamento de tarefas com: - Pilha de Tecnologia: Frontend com Next.js, Tailwind CSS para estilização, Supabase para autenticação e banco de dados. - Funcionalidades Principais: Criação de projetos e tarefas, atribuição de tarefas a usuários, lembretes de data de vencimento e uma visão geral no painel. Comece construindo a página principal do painel, contendo: - Um cabeçalho com navegação, - Uma lista de projetos com seus status, - e um botão para criar um novo projeto. Forneça dados fictícios por enquanto e garanta que o design seja limpo e responsivo". ``` 2. **Melhorias de Design UI/UX** * **Quando usar:** Para **refinar o apelo visual** da sua aplicação sem alterar sua funcionalidade. Isso inclui polir a UI, ajustar layouts ou implementar um estilo de design específico. * **Como usar:** Defina claramente o escopo das alterações de design e **enfatize que a funcionalidade deve permanecer intocada**. Guie 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 do aplicativo deve ser melhorada, sem alterar nenhuma funcionalidade. - Mantenha toda a lógica existente e o gerenciamento de estado como estão. - Melhorias Visuais: Atualize a estilização da página do painel: use um design de cartão moderno para cada listagem de projeto, melhore o esquema de cores para melhor contraste e aumente o preenchimento para um layout mais limpo. - Garanta que essas alterações não quebrem nenhuma funcionalidade ou fluxo de dados. Objetivo: melhorias puramente cosméticas para uma aparência mais polida, com o aplicativo se comportando exatamente como antes. ``` 3. **Garantindo a Responsividade** * **Quando usar:** Quando seu aplicativo precisa adaptar seu layout em vários tamanhos de tela (móvel, tablet, desktop). Ideal como uma revisão 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 solicite que larguras fixas sejam evitadas. ```mdx expandable theme={null} Nosso aplicativo precisa ser totalmente responsivo em dispositivos móveis, tablets e desktops. - Siga uma estratégia mobile-first: priorize o layout para telas pequenas e, em seguida, ajuste para telas maiores. - Use as melhores práticas modernas de UI/UX para design responsivo. (Para o Tailwind CSS, use os breakpoints padrão sm, md, lg, xl – sem breakpoints personalizados, a menos que necessário.) - Garanta que todas as páginas (especialmente as páginas de painel e detalhes do projeto) se ajustem corretamente em uma tela pequena: os elementos devem empilhar ou redimensionar conforme necessário, o texto deve permanecer legível e nenhum conteúdo deve transbordar da tela. - Não altere o design ou a funcionalidade principal, apenas certifique-se de que ele se adapte de forma flexível a diferentes tamanhos de tela. Após fazer as alterações, por favor, verifique novamente o layout nas dimensões do iPhone 12 e em uma largura de desktop típica. ``` 4. **Refatorando Código** * **Quando usar:** Periodicamente, especialmente quando o código se torna confuso ou lento. A refatoração melhora a estrutura, a legibilidade ou o desempenho do código **sem alterar seu comportamento externo**. * **Como usar:** Identifique o escopo (arquivo, funcionalidade ou base de código). Para arquivos específicos, use o prompt: "Refatore este arquivo para clareza e eficiência, mas **não altere sua funcionalidade ou saída**". 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 planejar em etapas ou auditar o código primeiro. ```mdx expandable theme={null} Refatore o arquivo do componente ProjectList, mas mantenha seu comportamento e UI exatamente os mesmos. Objetivos: - Melhorar a estrutura e a legibilidade do código (simplificar funções complexas, dividi-las em menores, se necessário). - Remover quaisquer variáveis ou importações não utilizadas. - Garantir que o arquivo siga as melhores práticas e esteja bem documentado. Não introduza nenhuma nova funcionalidade nem altere o funcionamento do componente para o usuário – esta é puramente uma limpeza de código para manutenibilidade. Se alguma parte do código não estiver clara, adicione um breve comentário para esclarecimento. ``` 5. **Tipos de Aplicativos e Funcionalidades** O Lumi pode ajudar com uma ampla variedade de tipos de aplicativos e funcionalidades. Os exemplos incluem: ```mdx expandable theme={null} Loja de E-commerce: Listagem de produtos, busca, filtragem, carrinho, checkout, contas de usuário. ``` ```mdx expandable theme={null} CMS: Painel de administração, criação/edição/publicação de conteúdo, texto rico, uploads de imagem, SEO. ``` ```mdx expandable theme={null} Gerenciamento de Projetos: Quadros de tarefas, listas, cartões, atribuição, datas de vencimento, arrastar e soltar. ``` ```mdx expandable theme={null} Feed de Mídia Social: Postagens, comentários, curtidas, compartilhamento, perfis de usuário, notificações, rolagem infinita. ``` ```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} Iniciador de Aplicação SaaS: Autenticação de usuário, gerenciamento de assinaturas, configurações, painel, acesso baseado em função. ``` ``` 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, salvamento, exportação. ``` ```mdx expandable theme={null} Componente de Recomendação: Baseado no comportamento/preferências do usuário, feedback, explicação das recomendações. ``` ```mdx expandable theme={null} Sistema de Personalização: UI personalizável, recomendações de conteúdo, controle do usuário sobre a personalização. ``` 6. **Planejamento Estratégico com IA** * **Quando usar:** Antes de iniciar uma implementação complexa e de várias etapas, ou quando você tem uma funcionalidade grande que precisa ser dividida. Os prompts de planejamento permitem que você **delineie uma abordagem antes que o código seja escrito**, economizando créditos e evitando desvios. * **Como usar:** Peça à IA um plano ou uma lista de verificação. Por exemplo, "Delineie um plano passo a passo para X" ou "Antes de codificar, liste os passos que você tomará para implementar Y". É melhor fazer isso no Modo de Discussão para evitar a execução de código. ```mdx expandable theme={null} "Antes de escrever qualquer código, planeje a implementação da nova funcionalidade de Notificações. - Liste cada passo necessário para adicionar notificações por e-mail quando uma tarefa estiver atrasada. - Considere os aspectos de frontend (alterações na UI, se houver) e backend (criação de verificações agendadas ou gatilhos). - Garanta que o plano mantenha a funcionalidade atual estável – não podemos quebrar nada existente. - Forneça o plano como uma lista ordenada (1, 2, 3, ...), com uma breve explicação de cada passo. Assim que você delinear o plano, pause para revisão. Não faça nenhuma alteração no código ainda.". 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 alternadores de notificação. 5. Testar o fluxo. ``` Ao aplicar diligentemente estas melhores práticas e utilizar a biblioteca de prompts, você estará bem equipado para desenvolver aplicações sofisticadas de forma eficiente e eficaz dentro do Lumi.