愛すべきプログラミング・キュー・ワードのデザイン・ガイドラインとベストプラクティスを完全網羅

利用する 愛すべき 迅速な設計、戦略、方法論のチェックリストを実施する。

Lovableを最大限に活用していただくために、デザイン戦略やアプローチのヒントをまとめました。これらの戦略の一部は、私たちのチームの経験から得られたものであり、一部はコミュニティのメンバーによって共有されたものです。

キューのデザインとは？ プロンプトデザインとは、Lovableとの対話に使用されるテキストベースの自然言語入力を指します。Lovableに与える指示を含むメッセージと考えてください。

Lovableはラージ・ランゲージ・モデル（LLM）に依存しているため、効果的なキュー・デザイン戦略によって、その効率と精度を大幅に向上させることができる。こちらもおすすめ bolt.newシステムのヒントとなる言葉を分析し、フロントエンド・コードのヒントとなる言葉を生成します！ .

基礎

プロンプトは、Lovableアプリケーションと対話する主な方法です：

1. ウェルカムスクリーンあらかじめ用意されたプロンプトから始めることも、自分でプロンプトを作成することもできます。
2. ビルダー・ユーザー・インターフェイスチャットベースのインターフェイスを使い、素早く反復作業を行う。

プロンプトはすべての交流の中心にある。

キューのデザイン戦略

これらの戦略は、ユースケースに応じて、しばしば組み合わせて使うことができる。これらのストラテジーを自由に試してみて、あなたにとって最も効果的なものを見つけてください。Lovable自体は、非常に基本的で一般的なヒントで多くのタスクを達成することができますが、これらの戦略を使用すると、より良い結果を得るのに役立ちます。

シナリオに基づくキューのデザイン

コンテキスト情報を提供することで、Lovableはお客様のニーズの全体的な範囲を理解することができます。コンテキスト情報は、リクエストされる前に特定のタスクを設定するために使用することができます。

コンテキストの設定

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

別の例を挙げよう：

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

別の例を挙げよう：

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

プログレッシブ・キュー・デザイン

私たちの経験では、大きなヒントを与えてAIがそれを完全に処理することを期待するよりも、小さな段階的な変更を加える方が効果的である。

やめておけ。::

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

これはお勧めである。::

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

別の例を挙げよう：

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

イメージを手がかりに

私たちは最近、ユーザーがプロンプトと共に画像をアップロードし、Lovableに画像に基づいたソリューションを構築するよう依頼できるサポートを追加しました。

ここには主に2つの方法がある。ひとつはシンプルなヒント法。

簡単な画像アップロードのヒント

画像をアップロードし、以下のサンプルチップを追加することができます：

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

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

あるいは、AIが画像の内容や画像に付随する特定の情報をよりよく理解できるようにすることもできる。

詳細な指示付きの画像プロンプト アップロードされた画像に具体的な指示を加えることで、優れた結果を得ることができます。画像は百聞は一見にしかずですが、インタラクティブな情報は静止画像では必ずしも明らかではないため、希望する機能を説明するテキストを追加することが特に重要です。

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

フィードバック統合

AIの出力を確認し、改善のための具体的なフィードバックを提供する。

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

曖昧さを避ける

プロンプトは明確でわかりやすいものにしましょう。曖昧な用語は避け、できるだけ具体的にニーズを説明してください。

やめておけ。::

让这个应用更好。

こうする::

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

別の例を挙げよう：

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

具体的でないヒント

非特定的で広範なプロンプトは避ける

创建一个用户输入的表单

制約の追加

制約を加えることで、AIが重要なことに集中し、不必要な複雑さを避けることができることもある。

制約の追加

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

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

高度なキュー・デザイン戦略

アクセシビリティの重視

アクセシビリティの基準と最新のベストプラクティスに準拠したコードの生成を奨励する。これにより、アウトプットが機能的であるだけでなく、ユーザーフレンドリーで、アクセシビリティ・ガイドラインに準拠していることが保証されます。

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

定義済みコンポーネントとライブラリの使用

プロジェクトの一貫性と効率を維持するために、特定のUIライブラリやコンポーネントの使用を指定します。これは、アプリケーションの互換性と統一されたデザイン言語を確保するために、特定のツールを使用するようAIに指示するものです。

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

チェーン思考（CoT）のヒント

複雑なタスクの場合、AIはソリューションを提供する前に、ステップを踏んで問題にアプローチすることが推奨される。このアプローチは、複雑なタスクを分解し、より正確で包括的なソリューションを生成するのに役立つ。

让我们一步步思考如何设置一个安全的身份验证系统：
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の変更：

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

モバイル最適化：

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

既存の機能を変更する：

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

センシティブなアップデート

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

導入前のヒント

大きな変更を実施する前に：

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

チャットモードの実験

チャットモードは、Lovableとのインタラクション方法を切り替えることができる実験的な機能です。私たちが導入したチャットモードは以下の通りです：

1. デフォルトモード：チャットとプロジェクトの編集。
2. チャットのみモード：チャットのみで、プロジェクトの編集はできません。

今後、Lovableとの様々な交流方法を試すために、チャットモードを追加したり、削除したりするかもしれません。

評決を下す

インクリメンタル・プロンプト、コンテクスト・コマンド、そして新しく導入された 愛すべきプロンプト Lovableのヒントを組み合わせると、さらに強力になります。ワークフローを合理化し、効率的にデバッグし、信頼性の高いアプリケーションを構築するために、これらのプラクティスを試し、繰り返し、活用してください。