賢いがコードのベストプラクティスを理解していない子供のように。
あなたが何を望んでいるかをAIに明確に伝える必要がある:
- ウェブアプリケーションですか?
- どのような機能が必要なのか?
- 構造はどうなっていますか?
などなど。
AIをフルスタック開発者にする方法を紹介しよう:
文脈が重要だ!
AIには強力なコンテクストの壁が必要だ。
ゴール:AIに推測させないこと。すべての情報はあなたが提供する。
こうすることで、AIはあなたに対してではなく、あなたとともに働くことになる。
次に、最大限の文脈的サポートを提供するために、どのような文書を添付する必要があるかについて説明する。
1.プロジェクト要件文書
この文書は、プロジェクト全体の概要を説明するものである:
- プロジェクト概要
- 問題提起
- 処方
- 対象ユーザー
- テクノロジースタック
- コア機能
- 業務範囲
この文書は、あなたのプロジェクトの簡単な説明です。
次に、AIに各ステップを案内する、より具体的な文書を追加する。
2.アプリケーション・プロセスと機能の文書化
友人にアプリの説明をしているところを想像してみてほしい:
「ユーザーが登録すると、ダッシュボードにジャンプします。ダッシュボードには4つのセクションがあります:メトリクスのセクション、アナリティクスのセクションなど"
このドキュメントは、アプリケーションの完全なエンド・ツー・エンドのランタイム・フローを提供する。
注意を引くAIは文書に以下を含めるよう要請される。 弾丸は使用しない.
この文書が重要なのは、各ページの実行を計画するための図/青写真をAIに提供するからだ。
3.技術スタックと依存パッケージの文書化
現在、AIの技術的背景を提供している。
あなたのプロジェクトでは、PythonやNextjs、SupabaseやFirebaseをバックエンドに使っていますか?
この文書では、AIがアプリケーションを構築するために必要な技術スタックについて詳しく説明します。
よく使われる技術スタックを選ぶようにしましょう。 クロード やGPT-4のようなLLMは、主に広く使われているフレームワークに基づいて訓練されている。
フロントエンドにはNextjs 14、TaliwindCSS、shadcnUI、radixUI、バックエンドにはSupabaseを使っています。
以下のプラットフォームはすべて、この技術スタックを好む:
Pythonは、モダンなUIを必要としない高性能アプリケーションにも最適だ。
4.文書構造の文書化
エラー続きの悪循環に陥りたくないなら、この文書は不可欠だ。
AIは重複ファイルを作成したり、間違った場所にファイルを保存したり、完成したコードを削除したりすることもある。
この問題を解決するために、文書構造を事前に提供してください。
注意を引くAIがASCIIフォーマットでファイル構造を作成する必要があることを確認してください。
スクリーンショットを撮ってファイル構造を保存し、文書に添付する。
5.APIドキュメント
AIは、どのプラットフォームのAPIがどのように設定されているか、デフォルトでは知らない。
アプリケーションで使用されるすべてのAPIのドキュメントを添付する必要があります。
例えば、OpenAI API、Claude API ドキュメント、Supabase ドキュメントなどです。
ウェブサイトから指示をコピーして文書に貼り付け、その文書をAIに添付する。
6.バックエンド・アーキテクチャ設計文書
アーキテクチャは基本的にバックエンドの設計図だ。
これには、作成が必要なすべてのデータベース・テーブル、ストレージ・バケット、ユーザー情報テーブル(認証)が含まれている。
私がSupabaseを使っているのは、AIがSupabaseで直接実行できるSQLクエリを数秒で生成してくれるからだ。
こうすることで、1時間もかからずにデータベースを作成し、フロントエンドに取り付けることができる。
輝点クロードはバックエンドのアーキテクチャーを設計することに長けており、適切なドキュメントを作成すれば、AIはそのガイダンスに簡単に従う。
7. .cursorrules ファイル
多くの人はこのツールを使っていない。それは チャットGPT カスタムコマンドの
.cursorrulesファイルは、一般的な "AIルール "プロンプトではなく、プロジェクト固有のものである必要がある。
技術スタックとプロジェクト要件に応じて、AIは.cursorrulesファイルを作成するよう求められる。
この文書は、AIに各文書がどこにあるかを伝える(カーソルのナビゲーション・マップ)。
このファイルを使って、AIがより効率的にナビゲートできるようにしよう。
8. UIレイアウトのドキュメント
このドキュメントは、あなたのフロントエンドのインターフェイスをより美しくします。v0と一緒に使うことで、一貫したスタイルのフロントエンドコンポーネントが作成されます。
ほとんどの人は、クリーンなユーザーインターフェース(UI)の力を過小評価している。
"第一印象が大事"
この文書には、使用したUIパッケージ、フォント、配色、アイコン、エフェクトなどの情報を含める。
9.システムキュー
AIは、v0、ボルト、あるいはあなたが使うかもしれないどんなツールに対しても、プロジェクト固有のシステム・プロンプトの言葉を作るように要求することができる。
これはツールとのコミュニケーションに役立ち、毎回長いコンテクストを提供する必要がなくなる。
クロードがAPIを使うよりも、彼らのプラットフォームでより良いパフォーマンスを発揮する理由をご存知だろうか?それは彼らのシステムキューが優れているからだ。
自分のプロジェクトにも同じことをすれば、AIともっと仲良くなれるはずだ。
私は開発時間の80%をドキュメントの作成に費やし、残りの20%で素晴らしい結果を出した。
はじめに:codeguide.dev
AIに添付する重要な書類をブレインストーミングして書くのに役立つアプリ。
システム・アラート・ワード
✅ PRD文書
✅ 建築デザイン
✅ 申請手続き書類
✅ UIレイアウト・ドキュメンテーション
ちょっと待ってくれ!
リンク::http://codeguide.dev