Melhores Práticas

​

Melhores Práticas de Prompting

​

1. Dominar 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 os seus pedidos, como

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:

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:

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:

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

• 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

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

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

• 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

• 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

"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

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.

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

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.

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.

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

Loja de E-commerce: Listagem de produtos, pesquisa, filtragem, carrinho, checkout, contas de utilizador.

CMS: Painel de administração, criação/edição/publicação de conteúdo, texto formatado, upload de imagens, SEO.

Gestão de Projetos: Quadros de tarefas, listas, cartões, atribuição, prazos, arrastar e soltar.

Feed de Redes Sociais: Publicações, comentários, gostos, partilhas, perfis de utilizador, notificações, scroll infinito.

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

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.

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

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

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.

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.