Melhores Práticas

​

Melhores Práticas de Prompting

​

1. Dominando a Engenharia de Prompts para Melhores Resultados:

• 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

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:

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:

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:

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

• 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

"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:

"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.

• 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

• 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

"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

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.

"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.

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.

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.

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

Loja de E-commerce: Listagem de produtos, busca, filtragem, carrinho, checkout, contas de usuário.

CMS: Painel de administração, criação/edição/publicação de conteúdo, texto rico, uploads de imagem, SEO.

Gerenciamento de Projetos: Quadros de tarefas, listas, cartões, atribuição, datas de vencimento, arrastar e soltar.

Feed de Mídia Social: Postagens, comentários, curtidas, compartilhamento, perfis de usuário, notificações, rolagem infinita.

Painel de Análise: Vários tipos de gráficos, filtragem de dados, seleção de intervalo de datas, relatórios exportáveis.

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.

Ferramenta de Geração de Conteúdo com IA: Gerar conteúdo com base em entradas, opções de refinamento, salvamento, exportação.

Componente de Recomendação: Baseado no comportamento/preferências do usuário, feedback, explicação das recomendações.

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.

"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.