Directrices y mejores prácticas para el diseño de palabras clave de programación completas y adorables

utilizar Adorable Llevar a cabo una lista de comprobación puntual del diseño, la estrategia y la metodología.

Para ayudarte a sacar el máximo partido de Lovable, hemos recopilado una lista de estrategias y enfoques de diseño de consejos. Estas estrategias se derivan en parte de la experiencia de nuestro equipo y en parte son compartidas por los miembros de la comunidad.

¿Qué es el diseño de tacos? El diseño de instrucciones se refiere al lenguaje natural basado en texto que se utiliza para interactuar con Lovable. Piensa en ello como un mensaje que contiene instrucciones que le das a Lovable.

Dado que Lovable se basa en grandes modelos lingüísticos (LLM), unas estrategias eficaces de diseño de pistas pueden mejorar significativamente su eficacia y precisión. Lecturas recomendadas ¡Analizar bolt.new palabras de sugerencia del sistema, generar consejos de sugerencia de código front-end están aquí! .

 

Conceptos básicos

Los avisos son la principal forma de interactuar con las aplicaciones de Lovable:

1. pantalla de bienvenidaComienza con mensajes predefinidos o crea los tuyos propios.
2. Interfaz de usuario del ConstructorIterar rápidamente utilizando una interfaz basada en el chat.

Los estímulos son el núcleo de todas las interacciones.

 

Estrategia de diseño de tacos

A menudo, estas estrategias pueden combinarse en función del caso de uso. Siéntase libre de experimentar con estas estrategias para averiguar lo que funciona mejor para usted. Aunque Lovable por sí mismo puede realizar muchas tareas con consejos muy básicos y genéricos, el uso de estas estrategias puede ayudarte a obtener mejores resultados.

Diseño de pistas basado en escenarios

Proporcionar información contextual ayuda a Lovable a comprender el alcance general de sus necesidades. La información contextual puede utilizarse para configurar tareas específicas antes de que se soliciten.

Establecer el contexto

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

Otro ejemplo:

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

Otro ejemplo:

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

Diseño progresivo del taco

Nuestra experiencia nos ha demostrado que es más eficaz hacer pequeños cambios graduales que dar una gran pista y esperar que la IA la maneje por completo.

No lo hagas.::

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

Se recomienda::

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

Otro ejemplo:

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

Uso de claves de imagen

Recientemente hemos añadido la posibilidad de que los usuarios carguen una imagen con un mensaje y pidan a Lovable que construya una solución basada en la imagen.

Hay dos métodos principales. El primero es el método de la pista simple.

Consejos sencillos para subir imágenes

Puede cargar una imagen y añadir el siguiente consejo de ejemplo:

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

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

También puede ayudar a la IA a comprender mejor el contenido de la imagen y la información específica que contiene.

Imágenes con instrucciones detalladas Se pueden obtener excelentes resultados añadiendo instrucciones específicas a una imagen cargada. Aunque una imagen vale más que mil palabras, es especialmente importante añadir algún texto que describa la funcionalidad deseada, ya que la información interactiva no siempre es evidente en las imágenes estáticas.

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

Integración de los comentarios

Revisar los resultados de la IA y proporcionar información específica para mejorarlos.

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

Evitar la ambigüedad

Asegúrese de que sus peticiones sean claras y sin ambigüedades. Evite términos vagos y sea lo más específico posible al describir sus necesidades.

No lo hagas.::

让这个应用更好。

hacer algo así::

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

Otro ejemplo:

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

Consejos no específicos

Evite las indicaciones poco específicas y generales

创建一个用户输入的表单

Añadir restricciones

A veces, añadir restricciones puede ayudar a la IA a centrarse en lo importante y evitar complejidades innecesarias.

Añadir restricciones

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

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

 

Estrategias avanzadas de diseño de tacos

Énfasis en la accesibilidad

Fomentar la generación de código que cumpla las normas de accesibilidad y las mejores prácticas modernas. Así se garantiza que el resultado no solo sea funcional, sino también fácil de usar y conforme a las directrices de accesibilidad.

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

Uso de componentes y bibliotecas predefinidos

Especifica el uso de determinadas bibliotecas o componentes de interfaz de usuario para mantener la coherencia y eficacia del proyecto. Esto indica a AI que utilice herramientas específicas para garantizar la compatibilidad de la aplicación y un lenguaje de diseño uniforme.

使用 shadcn/ui 库创建一个响应式导航栏，并使用 Tailwind CSS 进行样式设计。

Consejos para aplicar el pensamiento en cadena (TdC)

Para tareas complejas, se anima a la IA a abordar el problema por pasos antes de ofrecer una solución. Este enfoque ayuda a descomponer las tareas complejas para generar soluciones más precisas y completas.

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

Consejos multilingües

Especifique el idioma de destino de los comentarios de código y la documentación cuando trabaje en un entorno multilingüe. Esto garantiza que el contenido generado sea accesible para los miembros del equipo que hablan idiomas distintos y mejora la colaboración.

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

Definir la estructura del proyecto y la gestión de documentos

Aclare la estructura del proyecto, incluidos los nombres y rutas de los archivos, para garantizar que el código generado esté bien organizado y sea fácil de mantener. Esto proporciona una orientación clara sobre dónde deben almacenarse los nuevos componentes en el proyecto, de modo que se mantenga una organización coherente de los archivos.

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

 

Depuración y notificación de problemas

Instrucciones de depuración

Siga los pasos que se indican a continuación para realizar una puesta en servicio sistemática:

• reconocimiento de tareasEnumerar y priorizar todas las tareas.
• auditoría internaValide su solución internamente antes de enviarla.
• informaciónConfirmación de cada tarea realizada mediante resultados claros y verificables.
• Validación DOMAsegurarse de que los cambios se muestran correctamente en el DOM. Proporcionar etiquetas DOM o comentarios para la validación.
• cuestión claraAclare cualquier duda antes de continuar.
• Tratamiento de errores y registro: Utiliza un tratamiento de errores robusto y detallado console.log. No elimine nunca los registros antes de ponerlos en funcionamiento.
• Gestión de herramientas de depuraciónImplementar un interruptor global para desactivar las herramientas de depuración en el entorno de producción.
• Implementación del punto de interrupción: Añade puntos de interrupción para aislar errores relacionados con GPT.
• paquete de terceros: Compruebe si hay bibliotecas reutilizables antes de escribir código nuevo.
• Utilización de los sistemas existentes: Basarse en la funcionalidad existente para garantizar la coherencia.
• Revisión del código: Realizar análisis detallados, documentar problemas y planificar soluciones antes de realizar modificaciones.

proceso de depuración

Pasos sistemáticos de depuración:

1. Añadir casos de prueba fallidos.
2. Aislar los problemas y analizar las dependencias.
3. Registre los resultados antes de aplicar las correcciones.

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

Información sistemática

Al notificar errores o solicitar cambios:

1. descripcionescomportamiento actualy problemas.
2. esbozadoComportamiento previsto.
3. Añadir restricciones específicas.

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

Sea específico a la hora de solucionar problemas

Los problemas ocurren, a veces las compilaciones fallan y la aplicación resultante puede ser diferente de lo esperado. Unas sugerencias eficaces pueden ayudarle a volver a la pista. De nuevo, la especificidad es crucial.

Evite las indicaciones genéricas o muy generales

什么都不行，修复它！

En su lugar, sea más específico y detallado.

Haz que tus consejos sean más detallados y claros

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

Notificación de errores mediante la consola de desarrollador

Si eres más conocedor de la tecnología y tienes un problema, pegar el error registrado en la consola del navegador podría ser muy útil.

Normalmente, se abriría el Herramientas para desarrolladores y navegue hasta la consola. Si aparecen errores o notificaciones, puedes copiarlos y pegarlos como consejos.

Uso de herramientas de desarrollo y registros de consola

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
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

Ejemplo práctico de depuración

Un proceso de depuración real en Lovable podría tener este aspecto:

Primer paso::

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

Paso 2::

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

Paso 3::

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

Sugerencias adorables

Para aumentar tu productividad, hemos añadido algunos bonitos consejos dedicados a situaciones habituales.

Consejos sobre colaboración y procesos

Para el trabajo en equipo o la depuración:

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

depuración de errores

Error menor:

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

Error de persistencia:

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

Gran error:

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

Limpia el registro de la consola:

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

reconstruir

Bonitas pistas para la refactorización posterior a la solicitud:

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

idear

Cambios en la interfaz de usuario:

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

Optimización móvil:

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

Modificar las características existentes:

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

Actualizaciones sensibles:

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

Consejos previos a la implantación

antes de aplicar cambios importantes:

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

Experimentar con el modo chat

El modo chat es una función experimental que te permite cambiar la forma de interactuar con Lovable. Los modos de chat que estamos lanzando incluyen:

1. Modo por defecto: chatear y editar tu proyecto.
2. Modo sólo chat: sólo chat, sin edición de tu proyecto.

Puede que en el futuro introduzcamos más modos de chat, o que los eliminemos para experimentar con distintas formas de interactuar con Lovable.

 

llegar a un veredicto

Cuando se combinan los avisos incrementales, los comandos contextuales y los recién introducidos Sugerencias adorables Cuando se combinan, las sugerencias de Lovable son aún más potentes. Pruebe, itere y aproveche estas prácticas para agilizar los flujos de trabajo, depurar de forma eficiente y crear aplicaciones fiables.