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

fazer uso de Adorável Conduzir uma lista de verificação imediata de design, estratégia e metodologia.

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

我们正在构建一个项目管理工具，帮助团队跟踪任务。
该工具应具有以下功能：
- 用户认证
- 项目创建
- 任务分配
- 报告功能
现在，第一个任务是创建项目创建的用户界面。

Outro exemplo:

我需要一个具有 Supabase 集成和安全认证流程的 CRM 应用程序。首先设置后端。

Outro exemplo:

我们正在开发一个专注于环保产品的电商平台。生成一个具有类别和价格筛选功能的产品列表页面。

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

构建一个带有 Supabase、认证、Google Sheets 导出和数据增强功能的 CRM 应用程序。

Isso é recomendado::

1. 设置一个连接 Supabase 的 CRM 后端。
2. 添加具有用户角色的安全认证流程。
3. 集成 Google Sheets 用于导出记录。

Outro exemplo:

1. 设置用户信息的数据库架构。
2. 开发一个用于检索用户数据的 API 端点。

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:

创建并实现一个尽可能类似于附图的用户界面。

这个截图显示了一个移动端的布局问题。调整边距和填充，使其在保持相同设计结构的同时具有响应性。

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.

我希望您创建一个尽可能类似于截图中的应用程序。
它本质上是一个看板克隆。
它应该具有以下功能：在每列中添加新卡片（任务），更改单列内这些卡片的顺序，甚至在列之间移动这些卡片。
可以使用 Pangea home dnd npm 包来实现拖放功能。

Integração de feedback

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

登录表单看起来不错，但请为电子邮件字段添加验证，以确保其包含有效的电子邮件地址。

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

让这个应用更好。

fazer algo assim::

重构该应用以清理未使用的组件并提升性能，但不改变 UI 或功能。

Outro exemplo:

创建一个包含用户名、电子邮件和密码字段的用户注册表单。

Dicas não específicas

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

创建一个用户输入的表单

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

创建一个简单的待办事项应用，最多同时显示 3 个任务。
包括添加、编辑和删除任务的功能。

优化此代码，但确保 UI 和核心功能保持不变。记录每项更改。

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.

生成一个符合无障碍最佳实践的 React 登录表单组件，包括适当的 ARIA 标签和键盘导航支持。

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.

使用 shadcn/ui 库创建一个响应式导航栏，并使用 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.

让我们一步步思考如何设置一个安全的身份验证系统：
1. 需要哪些必要组件？
2. 它们应该如何交互？
3. 提供实现代码。

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.

生成一个计算斐波那契数列的 Python 脚本。用法语提供注释和文档。

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.

创建一个名为 'UserProfile' 的新 React 组件，并将其保存为 'components/user-profile.tsx'。确保它包括一个个人头像、用户名和简介部分。

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.

这是失败的控制台日志。分析测试用例，调查认证流程中的错误，并在理解依赖关系后提出解决方案。

Feedback sistemático

Ao relatar erros ou solicitar alterações:

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

Webhook 集成偶尔失败。调查为什么 JWT 验证切换会导致此问题并提出解决方案。

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

什么都不行，修复它！

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

Torne suas dicas mais detalhadas e claras

现在屏幕变成空白了，之前我还能进行编辑。
能检查一下发生了什么吗？

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

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQj.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::

查看来自控制台的错误日志。确定认证流程中的根本原因。

Etapa 2::

现在隔离失败的测试并分析哪些依赖关系出了问题。

Etapa 3::

在隔离环境中测试认证修复后，提出永久解决方案。

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:

审查此 GitHub 项目的结构。评估流程、依赖关系，并提出有关可扩展性的改进建议。

depuração de erros

Erro menor:

同样的错误仍然存在。暂时不要更改代码—需要彻底调查以找到确切的根本原因。深入分析日志、流程和依赖关系，并在完全理解问题后再提出解决方案。

Erro de persistência:

错误仍未解决。停止操作，务必以 100% 的确定性找到确切的根本原因—不要猜测或假设。详细分析流程和依赖关系的每个方面，并确保在完全理解之前不要进行任何更改。

Erro grave:

这是解决此问题的最后尝试。停止所有更改，系统性地重新检查整个流程—身份验证、Supabase、Stripe、状态管理和重定向—从头开始梳理。找出问题所在及其原因，单独测试每个部分，在没有绝对确定性之前不要继续。

Limpe o registro do console:

仔细移除不必要的 console.log 语句，同时不影响功能或设计。检查每条日志以确保其非关键性，并记录需要替代处理的日志。方法性地进行操作，彻底测试以确认应用程序的完整性。

reconstruir

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

重构此文件，同时确保不更改 UI 或功能—所有内容的行为和外观必须完全相同。仅专注于改善代码结构和可维护性。记录当前功能，确保已进行测试，并逐步操作以避免风险或回归。

planejar

Alterações na interface do usuário:

仅进行视觉更新—不要以任何方式影响功能或逻辑。完全了解当前 UI 如何与应用程序集成，确保逻辑、状态管理和 API 保持不变。彻底测试以确认应用程序行为与之前完全一致。

Otimização para celular:

在不更改设计或功能的情况下优化应用程序的移动端体验。分析布局和响应性以确定针对小屏幕和触摸交互所需的调整。在编辑任何代码之前，制定详细计划，并在各种设备上进行彻底测试，以确保应用程序的行为与当前一致。

Modificar os recursos existentes:

更改此功能但不要影响核心功能、其他功能或流程。分析其行为和依赖关系以理解风险，并在进行操作之前沟通任何疑虑。彻底测试以确认无回归或意外影响。

Atualizações confidenciais:

此更新非常敏感，需要极高的精确性。在更改之前，彻底分析所有依赖关系和影响，并以系统性的方法测试以确保没有问题。避免捷径或假设—如果不确定，请暂停并寻求澄清。

Dicas de pré-implementação

antes de implementar mudanças importantes:

规划此功能的 API 流程。包括端点、参数，以及如何与数据库连接。

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.