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

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

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

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

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

基礎

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

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

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

キューのデザイン戦略

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

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

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

コンテキストの設定

私たちは、チームがタスクを追跡するためのプロジェクト管理ツールを開発しています。
このツールには以下の機能が必要です：
- ユーザー認証
- プロジェクト作成
- タスク割り当て
- レポート機能
さて、最初のタスクはプロジェクト作成用のユーザーインターフェースを作成することです。

別の例を挙げよう：

Supabaseとの統合と安全な認証プロセスを備えたCRMアプリケーションが必要です。最初にバックエンドをセットアップします。

別の例を挙げよう：

私たちは、環境に優しい製品に焦点を当てたeコマース・プラットフォームを開発しています。カテゴリーと価格のフィルターを使った商品一覧ページを作成します。

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

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

やめておけ。::

Supabase、認証、Google Sheetsエクスポート、データ拡張機能を備えたCRMアプリケーションを構築します。

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

1.Supabaseに接続するCRMバックエンドをセットアップする 2.
2.ユーザーロールによる安全な認証プロセスを追加する 3.
3.レコードをエクスポートするためにGoogle Sheetsを統合する。

別の例を挙げよう：

1. ユーザー情報のデータベース構造を設定する。
2.ユーザーデータを取得するためのAPIエンドポイントを開発する。

イメージを手がかりに

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

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

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

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

添付画像とできるだけ同じようなユーザー・インターフェースを作成し、実装する。

このスクリーンショットは、モバイルでのレイアウトの問題を示しています。余白とパディングを調整し、同じデザイン構造を維持しながらレスポンシブに対応させます。

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

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

スクリーンショットのようなアプリケーションを作ってほしい。
基本的にはカンバンのクローンです。
各カラムに新しいカード(タスク)を追加したり、1つのカラム内でカードの順番を変更したり、カラム間でカードを移動したりする機能が必要です。
ドラッグ＆ドロップ機能はPangea home dnd npmパッケージを使って実装できます。

フィードバック統合

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

ログインフォームは良い感じですが、有効なメールアドレスが含まれていることを確認するために、Eメールフィールドにバリデーションを追加してください。

曖昧さを避ける

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

やめておけ。::

このアプリをもっと良くしてください。

こうする::

アプリをリファクタリングして未使用のコンポーネントを整理し、パフォーマンスを向上させるが、UIや機能は変更しない。

別の例を挙げよう：

ユーザー名、メールアドレス、パスワードのフィールドを持つユーザー登録フォームを作成します。

具体的でないヒント

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

ユーザー入力用のフォームを作成する

制約の追加

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

制約の追加

最大3つのタスクを同時に表示するシンプルなToDoリストアプリを作成。
タスクの追加、編集、削除ができます。

このコードを最適化するが、UIとコア機能は変わらないようにする。各変更を文書化する。

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

アクセシビリティの重視

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

アクセシビリティのベストプラクティスを作成する。 反応 適切なARIAラベルとキーボードナビゲーションサポートを含むログインフォームコンポーネント。

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

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

shadcn/uiライブラリを使用してレスポンシブ・ナビゲーション・バーを作成し、Tailwind CSSでスタイルを設定します。

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

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

セキュアな認証システムを構築する方法について、順を追って考えてみよう：
1. 必要なコンポーネントは何か？
2. 必要なコンポーネントは何か？
3. 実装コードを提供する。

多言語のヒント

多言語環境で作業する場合、コードコメントとドキュメントのターゲット言語を指定します。これにより、生成されたコンテンツが異なる言語を話すチームメンバーでもアクセスできるようになり、コラボレーションが向上します。

フィボナッチ級数を計算するPythonスクリプトを生成します。フランス語のコメントとドキュメントがあります。

プロジェクト構造と文書管理の定義

ファイル名とパスを含むプロジェクト構造を明確にすることで、生成されたコードが適切に整理され、保守しやすくなります。これは、一貫したファイル構成が維持されるように、新しいコンポーネントがプロジェクト内のどこに格納されるべきかの明確なガイダンスを提供します。

UserProfile'という新しいReactコンポーネントを作成し、'components/user-profile.tsx'として保存します。個人のアバター、ユーザー名、プロフィール・セクションが含まれていることを確認してください。

デバッグと問題報告

デバッグ指示

以下の手順に従って、系統的な試運転を行ってください：

• タスク認識すべての仕事をリストアップし、優先順位をつける。
• 内部監査提出する前に、社内でソリューションを検証してください。
• 報告各タスクが完了したことを、明確で検証可能な結果によって確認すること。
• DOMバリデーション変更が DOM で正しくレンダリングされるようにする。検証のためにDOMタグやフィードバックを提供する。
• 明確な問題不明な点は事前に確認すること。
• エラー処理とロギング堅牢なエラー処理と詳細な コンソールログ.本番前にログを削除しないこと。
• デバッグツールの管理本番環境でデバッグ・ツールを無効にするグローバル・スイッチを導入する。
• ブレークポイントの実装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-DWQbrtrQQQj.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のヒントを組み合わせると、さらに強力になります。ワークフローを合理化し、効率的にデバッグし、信頼性の高いアプリケーションを構築するために、これらのプラクティスを試し、繰り返し、活用してください。