Полное руководство и лучшие практики по созданию словесных подсказок для любимого программирования

пользоваться Любимый Проведите оперативную проверку дизайна, стратегии и методологии.

Чтобы помочь вам получить максимальную отдачу от Lovable, мы составили список стратегий и подходов к дизайну. Эти стратегии частично основаны на опыте нашей команды, а частично - на мнениях участников сообщества.

Что такое дизайн кия? Под подсказками понимается текстовый ввод на естественном языке, используемый для взаимодействия с Lovable. Считайте, что это сообщение, содержащее инструкции, которые вы даете Lovable.

Поскольку Lovable опирается на большие языковые модели (LLM), эффективные стратегии разработки подсказок могут значительно повысить его эффективность и точность. Также рекомендуем прочитать Анализируйте слова подсказки системы bolt.new, генерируйте подсказки фронтального кода - советы здесь! .

 

Основы

Подсказки - это основной способ взаимодействия с приложениями Lovable:

1. экран приветствия: Начните с готовых подсказок или создайте свои собственные.
2. Пользовательский интерфейс конструктора: Быстрая итерация с помощью интерфейса на основе чата.

Подсказки лежат в основе всех взаимодействий.

 

Стратегия дизайна кия

Эти стратегии часто можно использовать в комбинации, в зависимости от конкретного случая. Не стесняйтесь экспериментировать с этими стратегиями, чтобы найти то, что работает лучше всего для вас. Хотя Lovable сам может выполнять многие задачи с помощью очень простых и общих советов, использование этих стратегий может помочь вам добиться лучших результатов.

Разработка подсказок на основе сценария

Предоставление контекстной информации помогает Lovable понять общий объем ваших потребностей. Контекстная информация может быть использована для постановки конкретных задач до того, как они будут запрошены.

Создание контекста

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

Другой пример:

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

Другой пример:

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

Прогрессивный дизайн кия

Наш опыт показывает, что эффективнее вносить небольшие постепенные изменения, чем давать огромные подсказки и ожидать, что ИИ полностью справится с ними.

Не делайте этого.::

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

Рекомендуется::

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

Другой пример:

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

Использование подсказок изображения

Недавно мы добавили поддержку того, чтобы пользователи могли загрузить изображение с подсказкой и попросить Lovable построить решение на основе этого изображения.

Здесь есть два основных метода. Первый - это метод простой подсказки.

Простые советы по загрузке изображений

Вы можете загрузить изображение и добавить следующий пример подсказки:

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

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

Или вы можете помочь искусственному интеллекту лучше понять содержание изображения и конкретную информацию, связанную с ним.

Изображения с подробными инструкциями Отличные результаты можно получить, добавив к загруженному изображению специальные инструкции. Хотя картинка стоит тысячи слов, особенно важно добавить текст, описывающий желаемую функциональность, поскольку интерактивная информация не всегда видна на статичных изображениях.

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

Интеграция обратной связи

Проанализируйте результаты работы ИИ и дайте конкретные рекомендации по улучшению.

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

Избегайте двусмысленности

Убедитесь, что ваши предложения ясны и недвусмысленны. Избегайте расплывчатых терминов и будьте максимально конкретны в описании своих потребностей.

Не делайте этого.::

让这个应用更好。

делать что-л. таким образом::

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

Другой пример:

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

Неспецифические советы

Избегайте неконкретных и широких подсказок

创建一个用户输入的表单

Добавление ограничений

Иногда добавление ограничений может помочь ИИ сосредоточиться на главном и избежать ненужных сложностей.

Добавление ограничений

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

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

 

Продвинутые стратегии дизайна кия

Упор на доступность

Поощряйте создание кода, соответствующего стандартам доступности и современным передовым практикам. Это гарантирует, что готовый продукт будет не только функциональным, но и удобным для пользователя и соответствующим рекомендациям по доступности.

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

Использование предопределенных компонентов и библиотек

Укажите использование определенных библиотек или компонентов пользовательского интерфейса для обеспечения согласованности и эффективности проекта. Это направляет AI на использование определенных инструментов для обеспечения совместимости приложения и единого языка дизайна.

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

Советы по внедрению цепного мышления (CoT)

При решении сложных задач ИИ рекомендуется подходить к проблеме поэтапно, прежде чем предложить решение. Такой подход помогает разбивать сложные задачи на части и генерировать более точные и комплексные решения.

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

Советы по работе с несколькими языками

Укажите целевой язык для комментариев к коду и документации при работе в многоязычной среде. Это гарантирует, что созданный контент будет доступен членам команды, говорящим на разных языках, и улучшит совместную работу.

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

Определение структуры проекта и управление документацией

Уточните структуру проекта, включая имена файлов и пути к ним, чтобы сгенерированный код был хорошо организован и прост в сопровождении. Это дает четкие указания о том, где в проекте должны храниться новые компоненты, чтобы обеспечить последовательную организацию файлов.

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

 

Отладка и создание отчетов о проблемах

Инструкции по отладке

Для выполнения систематического ввода в эксплуатацию выполните следующие действия:

• распознавание задач: Составление списка и определение приоритетности всех задач.
• внутренний аудит: Перед отправкой проверьте свое решение внутри компании.
• отчетность: Подтверждение каждого выполненного задания с помощью четких, поддающихся проверке результатов.
• Валидация DOM: Убедитесь, что изменения корректно отображаются в DOM. Предоставьте теги DOM или обратную связь для проверки.
• однозначный вопрос: Уточните все неясности, прежде чем приступать к работе.
• Обработка ошибок и ведение журнала: Используйте надежную обработку ошибок и подробное описание console.log. Никогда не удаляйте журналы перед началом работы.
• Управление средствами отладки: Внедрите глобальный переключатель для отключения средств отладки в производственной среде.
• Реализация точек останова: Добавьте точки останова, чтобы изолировать ошибки, связанные с GPT.
• пакет стороннего производителя: Проверяйте наличие библиотек многократного использования перед написанием нового кода.
• Использование существующих систем: Наращивание существующей функциональности для обеспечения согласованности.
• Обзор кода: Проведение детального анализа, документирование проблем и планирование решений до внесения изменений.

процесс отладки

Систематические шаги по отладке:

1. Добавьте неудачные тестовые случаи.
2. Выявление проблем и анализ зависимостей.
3. Зафиксируйте результаты, прежде чем применять исправления.

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

Систематическая обратная связь

При сообщении об ошибках или запросе изменений:

1. описаниятекущее поведениеи проблемы.
2. в общих чертахОжидаемое поведение.
3. Добавьте конкретные ограничения.

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

Будьте конкретны при устранении проблем

Случаются проблемы, иногда сборки не получаются, и итоговое приложение может быть не таким, как ожидалось. Эффективные подсказки помогут вам вернуться на правильный путь. И снова очень важна конкретика.

Избегайте общих или очень общих подсказок

什么都不行，修复它！

Вместо этого будьте более конкретными и подробными.

Сделайте свои советы более подробными и понятными

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

Сообщение об ошибках с помощью консоли разработчика

Если вы более подкованы в технике и столкнулись с проблемой, то вставка ошибки, зарегистрированной в консоли браузера, может оказаться очень полезной.

Обычно вы открываете Инструменты разработчика и перейдите в консоль. Если видны какие-либо ошибки или уведомления, вы можете скопировать и вставить их в качестве подсказок.

Использование инструментов разработчика и журналов консоли

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

Практический пример отладки

Реальный процесс отладки в Lovable может выглядеть следующим образом:

Шаг 1::

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

Шаг 2::

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

Шаг 3::

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

Любимые подсказки

Чтобы повысить вашу производительность, мы добавили несколько полезных советов, посвященных распространенным сценариям.

Советы по сотрудничеству и процессам

Для командной работы или отладки:

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

отладка ошибок

Небольшая ошибка:

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

Ошибка постоянства:

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

Главная ошибка:

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

Очистите журнал консоли:

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

реконструировать

Милые подсказки для рефакторинга после запроса:

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

придумывать

Изменения в пользовательском интерфейсе:

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

Мобильная оптимизация:

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

Измените существующие функции:

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

Чувствительные обновления:

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

Советы по подготовке к внедрению

перед внедрением серьезных изменений:

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

Эксперименты с режимом чата

Режим чата - это экспериментальная функция, которая позволяет вам менять способ взаимодействия с Lovable. Мы запускаем следующие режимы чата:

1. Режим по умолчанию: чат и редактирование проекта.
2. Режим "Только чат": только общение, без редактирования вашего проекта.

Возможно, в будущем мы введем больше режимов чата или уберем их, чтобы поэкспериментировать с различными способами взаимодействия с Lovable.

 

вынести вердикт

Когда вы объединяете инкрементные подсказки, контекстные команды и вновь представленные Любимые подсказки В сочетании друг с другом подсказки Lovable становятся еще мощнее. Пробуйте, повторяйте и используйте эти практики, чтобы оптимизировать рабочие процессы, эффективно отлаживать и создавать надежные приложения.