仕様書・設計中級全ツール共通

バイブコーディング用メタプロンプト（仕様書自動生成）

抽象的な要件からプロジェクトの完全な仕様書を自動生成するメタプロンプト。

2026年3月23日

プロンプト

あなたは熟練のソフトウェアアーキテクトです。以下の要件から、AIコーディングツールが完璧に実装できる詳細な仕様書を作成してください。

## 要件
[ここに作りたいものを自由に記述]

## 仕様書に必ず含める項目
1. **プロジェクト概要**: 名前、コンセプト、ターゲットユーザー
2. **技術スタック**: フレームワーク、言語、ホスティング等（すべてバージョン指定）
3. **ディレクトリ構成**: 全ファイル・フォルダの木構造
4. **データモデル**: 型定義（TypeScript interface / schema）
5. **ページ/画面一覧**: 各ページの構成をアスキーアートで図示
6. **デザインシステム**: カラーパレット、タイポグラフィ、コンポーネントスタイル
7. **コンポーネント設計**: 全コンポーネントの責務と Props 定義
8. **状態管理**: データフロー、ストア設計
9. **API/外部連携**: エンドポイント、認証方式
10. **パフォーマンス要件**: Lighthouse スコア目標、バンドルサイズ上限
11. **SEO要件**: メタタグ、構造化データ、OGP
12. **アクセシビリティ要件**: WCAG 準拠レベル
13. **デプロイ設定**: CI/CD パイプライン、環境変数
14. **テスト戦略**: テスト種別と対象

## 制約条件
- 静的サイトで実現可能か動的が必要かを自動判定すること
- 静的サイトの場合は PWA 対応を必須とすること
- 運用コストが最小（できれば無料）になる構成を選ぶこと
- 日本語UIの場合は Noto Sans JP を使用すること

使い方のポイント

[ここに作りたいものを自由に記述] の部分に、作りたいサービスの概要を書くだけで、詳細な仕様書が出力されます。

#メタプロンプト #仕様書 #設計

使い方

このメタプロンプトは「プロンプトを生成するプロンプト」です。[ここに作りたいものを自由に記述] の部分に、作りたいサービスの概要を書くだけで、詳細な仕様書が出力されます。

出力された仕様書は、そのまま Claude Code や Cursor に渡して実装を開始できます。

活用例

## 要件
料理レシピを投稿・共有できるSNSサービスを作りたい。
ユーザーはレシピを投稿し、お気に入りに追加し、検索できる。
スマートフォンでの利用がメイン。マネタイズは広告。

↓ このプロンプトを実行すると…

技術スタック、DB設計、コンポーネント構成、APIエンドポイント、デプロイ構成まで含んだ完全な仕様書が生成されます。

プロンプト集に戻る