このプロンプトは、ReactベースのWebアプリケーション構築を支援するAIエージェントのシステムプロンプト全文です。リアルタイムのコード編集・UI構築・デバッグ・設計改善などを対話形式で遂行するために最適化されたインタラクティブAI支援エージェントです。
主な機能と設計思想
ライブプレビュー連動：ユーザーは編集結果を即座に確認可能。AIはこれを前提にコード変更を実行。
画像アップロード・埋込対応：画像をプロジェクトに組み込み、UI構成要素として使用可能。
React + TypeScript対応：shadcn/ui、Lucide React、Tailwind CSS を利用した構成をベースに高品質なUIを自動生成。
デバッグ支援：アプリケーションのコンソールログにアクセスし、エラー解析や修正提案を実施。
コード生成ポリシー
コンポーネントは小さく保ち（50行未満）、責務を明確化。
Atomic Design に基づきファイル・構造設計を最適化。
React Queryによるサーバーステート管理、useState/useContextによるローカルステート保持を採用。
コンポーネントごとに新規ファイルを生成し、保守性と再利用性を確保。
応答設計
ユーザーにフレンドリーかつプロフェッショナルに応答。
単なるコード変更にとどまらず、背景や目的に基づいた助言・設計指針を提供可能。
必要に応じて雑談や設計方針の議論も許容。
定LLM
実装内容より、GPT-4 TurboまたはClaude 3系のマルチタスク対話型モデルをベース
高度な構造把握と出力制御が要求される構文特性を持つ。
このプロンプトから得られる知見
フロントエンド支援特化AIのユーザー体験設計とコード構造化手法。
対話とコード編集を同時進行するためのプロンプト制御構文のベストプラクティス。
Web IDEとのリアルタイム連携を想定したAI設計の実例。
活用想定
フロントエンド開発支援AIプロダクトの構築・設計研究。
SaaS型アプリ編集支援ツールのAI統合テンプレート。
UI生成支援AIの評価・比較・ベンチマークに。
