Diretrizes e práticas recomendadas completas de design de palavras-chave de programação adorável

Use o Lovable para listas de verificação de design, estratégia e metodologia de dicas.

Para ajudá-lo a tirar o máximo proveito do Lovable, compilamos uma lista de estratégias e abordagens de design de dicas. Essas estratégias são parcialmente derivadas da experiência da nossa equipe e parcialmente compartilhadas pelos membros da comunidade.

O que é design de dicas? O design do prompt refere-se à entrada de linguagem natural baseada em texto usada para interagir com o Lovable. Pense nisso como uma mensagem contendo instruções que você dá à Lovable.

Como o Lovable depende de grandes modelos de linguagem (LLMs), estratégias eficazes de design de dicas podem melhorar significativamente sua eficiência e precisão. Leitura também recomendada Analise as palavras de dicas do sistema bolt.new e gere dicas de código de front-end aqui! .

Noções básicas

Os prompts são a principal maneira de interagir com os aplicativos Lovable:

1. tela de boas-vindasComece com prompts predefinidos ou crie seus próprios prompts.
2. Interface de usuário do BuilderIteração rápida usando uma interface baseada em bate-papo.

Os prompts estão no centro de todas as interações.

Estratégia de design de tacos

Essas estratégias muitas vezes podem ser usadas em combinação, dependendo do seu caso de uso. Sinta-se à vontade para experimentar essas estratégias e descobrir o que funciona melhor para você. Embora o próprio Lovable possa realizar muitas tarefas com dicas muito básicas e genéricas, o uso dessas estratégias pode ajudá-lo a obter melhores resultados.

Design de dicas baseado em cenários

O fornecimento de informações contextuais ajuda a Lovable a entender o escopo geral de suas necessidades. As informações contextuais podem ser usadas para configurar tarefas específicas antes que elas sejam solicitadas.

Definição do contexto

Estamos criando uma ferramenta de gerenciamento de projetos para ajudar as equipes a acompanhar as tarefas.
A ferramenta deve ter os seguintes recursos:
- Autenticação de usuário
- Criação de projetos
- Atribuição de tarefas
- Funcionalidade de relatórios
Agora, a primeira tarefa é criar a interface de usuário para a criação de projetos.

Outro exemplo:

Preciso de um aplicativo de CRM com integração com o Supabase e processo de autenticação segura. Primeiro, configure o backend.

Outro exemplo:

Estamos desenvolvendo uma plataforma de comércio eletrônico com foco em produtos ecológicos. Gerar uma página de listagem de produtos com filtros de categoria e preço.

Design progressivo de dicas

Nossa experiência demonstrou que é mais eficaz fazer pequenas alterações incrementais do que dar uma grande dica e esperar que a IA lide com ela completamente.

Não faça isso.::

Crie um aplicativo de CRM com Supabase, autenticação, exportação do Google Sheets e aprimoramentos de dados.

Isso é recomendado::

1. configure um backend de CRM para se conectar ao Supabase. 2.
2. adicione um processo de autenticação seguro com funções de usuário. 3.
3. integre o Google Sheets para exportar registros.

Outro exemplo:

1. configurar a estrutura do banco de dados para as informações do usuário.
2. desenvolver um ponto de extremidade da API para recuperar dados do usuário.

Uso de dicas de imagem

Recentemente, adicionamos suporte para que os usuários carreguem uma imagem com um prompt e peçam ao Lovable para criar uma solução com base na imagem.

Há dois métodos principais aqui. O primeiro é o método de dica simples.

Dicas simples de upload de imagens

Você pode carregar uma imagem e adicionar o seguinte exemplo de dica:

Crie e implemente uma interface de usuário que seja o mais semelhante possível à imagem anexa.

Esta captura de tela mostra um problema de layout no celular. Ajuste as margens e o preenchimento para torná-lo responsivo, mantendo a mesma estrutura de design.

Ou você pode ajudar a IA a entender melhor o conteúdo da imagem e as informações específicas anexadas a ela.

Prompts de imagem com instruções detalhadas É possível obter excelentes resultados adicionando instruções específicas a uma imagem carregada. Embora uma imagem valha mais que mil palavras, é especialmente importante adicionar algum texto que descreva a funcionalidade desejada, pois as informações interativas nem sempre ficam aparentes em imagens estáticas.

Gostaria que você criasse um aplicativo o mais parecido possível com o da captura de tela.
Ele é essencialmente um clone do Kanban.
Ele deve ter a capacidade de adicionar novos cartões (tarefas) a cada coluna, alterar a ordem desses cartões em uma única coluna e até mesmo movê-los entre colunas.
A funcionalidade de arrastar e soltar pode ser implementada usando o pacote npm Pangea home dnd.

Integração de feedback

Analise o resultado da IA e forneça feedback específico para aprimoramento.

O formulário de login parece bom, mas adicione validação ao campo de e-mail para garantir que ele contenha um endereço de e-mail válido.

Evitar a ambiguidade

Certifique-se de que suas solicitações sejam claras e inequívocas. Evite termos vagos e seja o mais específico possível ao descrever suas necessidades.

Não faça isso.::

Melhore esse aplicativo.

fazer algo assim::

Refatore o aplicativo para limpar os componentes não utilizados e melhorar o desempenho, mas não altere a interface do usuário ou a funcionalidade.

Outro exemplo:

Crie um formulário de registro de usuário com campos de nome de usuário, e-mail e senha.

Dicas não específicas

Evite solicitações não específicas e amplas

Crie um formulário para entrada do usuário

Adição de restrições

Às vezes, adicionar restrições pode ajudar a IA a se concentrar no que é importante e evitar complexidade desnecessária.

Adição de restrições

Crie um aplicativo de lista de tarefas simples que exiba até 3 tarefas de uma vez.
Inclui a capacidade de adicionar, editar e excluir tarefas.

Otimize esse código, mas certifique-se de que a interface do usuário e a funcionalidade principal permaneçam as mesmas. Documente cada alteração.

Estratégias avançadas de design de tacos

Ênfase na acessibilidade

Incentivar a geração de código que esteja em conformidade com os padrões de acessibilidade e as práticas recomendadas modernas. Isso garante que o resultado seja não apenas funcional, mas também amigável ao usuário e compatível com as diretrizes de acessibilidade.

Gerar uma prática recomendada de acessibilidade compatível Reagir Componentes do formulário de login, incluindo rótulos ARIA apropriados e suporte à navegação pelo teclado.

Uso de componentes e bibliotecas predefinidos

Especificar o uso de determinadas bibliotecas ou componentes de interface do usuário para manter a consistência e a eficiência do projeto. Isso orienta a IA a usar ferramentas específicas para garantir que o aplicativo tenha compatibilidade e uma linguagem de design uniforme.

Crie uma barra de navegação responsiva usando a biblioteca shadcn/ui e estilize-a com o Tailwind CSS.

Dicas para implementar o Chain Thinking (CoT)

Para tarefas complexas, a IA é incentivada a abordar o problema em etapas antes de fornecer uma solução. Essa abordagem ajuda a decompor tarefas complexas para gerar soluções mais precisas e abrangentes.

Vamos pensar passo a passo sobre como configurar um sistema de autenticação seguro:
1. quais são os componentes necessários?
2. Como eles devem interagir?
3. Fornecer o código de implementação.

Dicas para vários idiomas

Especifique o idioma de destino para comentários de código e documentação ao trabalhar em um ambiente multilíngue. Isso garante que o conteúdo gerado seja acessível aos membros da equipe que falam idiomas diferentes e melhora a colaboração.

Gera um script Python que calcula a série Fibonacci. Fornece comentários e documentação em francês.

Definir a estrutura do projeto e o gerenciamento de documentos

Esclarecer a estrutura do projeto, incluindo nomes e caminhos de arquivos, para garantir que o código gerado seja bem organizado e fácil de manter. Isso fornece uma orientação clara sobre onde os novos componentes devem ser armazenados no projeto para que a organização consistente dos arquivos seja mantida.

Crie um novo componente React chamado "UserProfile" e salve-o como "components/user-profile.tsx". Certifique-se de que ele inclua um avatar pessoal, um nome de usuário e uma seção de perfil.

Depuração e relatório de problemas

Instruções de depuração

Siga as etapas abaixo para realizar o comissionamento sistemático:

• reconhecimento de tarefasLista e priorização de todas as tarefas.
• auditoria internaValidação: Valide sua solução internamente antes de enviá-la.
• relatóriosConfirmação de cada tarefa concluída por meio de resultados claros e verificáveis.
• Validação DOMGarantir que as alterações sejam renderizadas corretamente no DOM. Fornecer tags DOM ou feedback para validação.
• questão claraEsclareça todas as incertezas antes de prosseguir.
• Tratamento e registro de errosUse tratamento de erros robusto e detalhado console.log. Nunca exclua os registros antes de entrar em operação.
• Gerenciamento de ferramentas de depuraçãoImplementar um switch global para desativar as ferramentas de depuração no ambiente de produção.
• Implementação do ponto de interrupçãoAdicionar pontos de interrupção para isolar erros relacionados à GPT.
• pacote de terceirosVerificar se há bibliotecas reutilizáveis antes de escrever um novo código.
• Uso de sistemas existentesDesenvolvimento da funcionalidade existente para garantir a consistência.
• Revisão do códigoCondução de análises detalhadas, documentação de problemas e planejamento de soluções antes que as modificações sejam feitas.

processo de depuração

Etapas sistemáticas de depuração:

1. Adicionar casos de teste com falha.
2. Isolar problemas e analisar dependências.
3. Registre as descobertas antes de aplicar as correções.

Este é o log do console da falha. Analise os casos de teste, investigue os erros no processo de autenticação e proponha soluções depois de entender as dependências.

Feedback sistemático

Ao relatar erros ou solicitar alterações:

1. descriçõescomportamento atuale problemas.
2. delineadoComportamento esperado.
3. Adicionar restrições específicas.

Ocasionalmente, a integração do webhook falha. Investigue por que a chave de autenticação JWT causa esse problema e proponha uma solução.

Seja específico ao corrigir problemas

Os problemas acontecem, às vezes as compilações falham e o aplicativo resultante pode não ser o esperado. Dicas eficazes podem ajudá-lo a voltar ao caminho certo. Novamente, a especificidade é fundamental.

Evite solicitações genéricas ou muito gerais

Nada funciona, conserte isso!

Em vez disso, seja mais específico e detalhado.

Torne suas dicas mais detalhadas e claras

Agora a tela fica em branco, antes de eu poder editar.
Você pode verificar o que aconteceu?

Relatar bugs usando o Console do desenvolvedor

Se você for mais experiente em tecnologia e tiver um problema, colar o erro registrado no console do navegador pode ser muito útil.

Normalmente, você abriria o arquivo Ferramentas do desenvolvedor e navegue até o console. Se houver erros ou notificações visíveis, você poderá copiá-los e colá-los como dicas.

Uso de ferramentas de desenvolvedor e logs de console

Meu aplicativo não funciona mais e a tela está em branco.
Isso foi copiado e colado do console de ferramentas do desenvolvedor. É possível corrigir isso?
Ocorreu um erro:
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

Exemplo prático de depuração

Um processo de depuração real no Lovable pode ter a seguinte aparência:

Etapa 1::

Visualize os logs de erro no console. Determine a causa raiz no processo de autenticação.

Etapa 2::

Agora, isole os testes que falharam e analise quais dependências deram errado.

Etapa 3::

Proponha uma solução permanente após testar uma correção certificada em um ambiente isolado.

Prompts adoráveis

Para aumentar sua produtividade, adicionamos algumas dicas úteis dedicadas a cenários comuns.

Dicas de colaboração e processo

Para trabalho em equipe ou depuração:

Analise a estrutura deste projeto do GitHub. Avalie os processos, as dependências e sugira melhorias para aumentar a escalabilidade.

depuração de erros

Erro menor:

O mesmo erro persiste. Não altere o código por enquanto - é necessária uma investigação completa para encontrar a causa raiz exata. Analise os registros, os processos e as dependências em profundidade e apresente uma solução somente depois de entender completamente o problema.

Erro de persistência:

O erro continua sem solução. Interrompa a operação e certifique-se de encontrar a causa raiz exata com 100% certeza - não adivinhe nem presuma. Analise detalhadamente todos os aspectos do processo e das dependências e garanta que nenhuma alteração seja feita até que eles sejam totalmente compreendidos.

Erro grave:

Esta é a última tentativa de resolver esse problema. Interrompa todas as alterações e reexamine sistematicamente todo o processo - Autenticação, Supabase, Stripe, Gerenciamento de status e Redirecionamento - e analise-o desde o início. Descubra o que está errado e por quê, teste cada parte individualmente e não prossiga até ter certeza absoluta.

Limpe o registro do console:

Remova cuidadosamente as instruções desnecessárias do console.log sem comprometer a funcionalidade ou o design. Examine cada log para garantir que ele não seja crítico e registre os logs que exigem processamento alternativo. Aborde as operações de forma metódica e faça testes completos para confirmar a integridade do aplicativo.

reconstruir

Dicas interessantes para refatoração pós-solicitação:

Refatore esse arquivo garantindo que nenhuma funcionalidade ou interface do usuário seja alterada - tudo deve se comportar e ter exatamente a mesma aparência. Concentre-se apenas em melhorar a estrutura do código e a capacidade de manutenção. Documente a funcionalidade atual para garantir que ela seja testada e passo a passo para evitar riscos ou regressões.

planejar

Alterações na interface do usuário:

Apenas atualizações visuais - não afetam a funcionalidade ou a lógica de forma alguma. Entenda completamente como a interface do usuário atual se integra ao aplicativo, garantindo que a lógica, o gerenciamento de estado e as APIs permaneçam os mesmos. Faça testes completos para confirmar que o aplicativo se comporta exatamente como antes.

Otimização para celular:

Otimizar a experiência móvel do aplicativo sem alterar o design ou a funcionalidade. Analise o layout e a capacidade de resposta para determinar os ajustes necessários para telas pequenas e interações por toque. Crie um plano detalhado e faça testes completos em vários dispositivos antes de editar qualquer código para garantir que o comportamento do aplicativo seja consistente com o atual.

Modificar os recursos existentes:

Altere essa funcionalidade, mas não afete a funcionalidade principal, outras funcionalidades ou processos. Analise seu comportamento e dependências para entender os riscos e comunicar quaisquer preocupações antes de prosseguir. Faça testes completos para confirmar que não há regressões ou impactos não intencionais.

Atualizações confidenciais:

Essa atualização é muito sensível e exige extrema precisão. Analise minuciosamente todas as dependências e impactos antes de fazer alterações e teste de forma sistemática para garantir que não haja problemas. Evite atalhos ou suposições - se não tiver certeza, faça uma pausa e busque esclarecimentos.

Dicas de pré-implementação

antes de implementar mudanças importantes:

Planeje o fluxo da API para esse recurso. Inclua pontos de extremidade, parâmetros e como se conectar ao banco de dados.

Experimentando o modo de bate-papo

O modo de bate-papo é um recurso experimental que permite que você altere a forma de interagir com o Lovable. Os modos de bate-papo que introduzimos incluem:

1. Modo padrão: bate-papo e edição do projeto.
2. Modo somente de bate-papo: somente bate-papo, sem edição de seu projeto.

Podemos introduzir mais modos de bate-papo no futuro ou removê-los para experimentar diferentes maneiras de interagir com o Lovable.

chegar a um veredicto

Quando você combina prompts incrementais, comandos contextuais e os recém-introduzidos Prompts adoráveis Quando combinadas, as dicas do Lovable são ainda mais poderosas. Experimente, repita e aproveite essas práticas para simplificar os fluxos de trabalho, depurar com eficiência e criar aplicativos confiáveis.