🚀 SiteStudio-X

VS Code拡張機能版ファネル構築システム

Claude Code統合制御により、日本語自然言語からプロフェッショナルなWebサイトを30分以内で自動生成するVS Code拡張機能です。

📋 概要

SiteStudio-Xは、複数の専門AIエージェントが連携して、ユーザーの簡単な要求から完全なWebサイトを自動生成するシステムです。VS Code拡張機能として動作し、Claude Code統合制御により各工程を自動実行します。

🎯 主要機能

🗣️ 日本語自然言語入力対応 - 専門知識不要の簡単な要求入力
🤖 5段階エージェント自動実行 - 要件→デザイン→コンテンツ→実装→品質保証
⚡ 30分以内完成 - 高速自動生成システム
📱 完全レスポンシブ - モバイルファースト設計
🔍 SEO最適化 - 検索エンジン対応済み
♿ アクセシビリティ対応 - WCAG準拠

🤖 エージェントチーム

1. 要件抽出エージェント

役割: 自然言語要件の構造化
入力: 音声認識テキスト or 直接テキスト入力
出力: JSON構造化要件仕様

2. デザイン戦略エージェント

役割: ビジュアルデザイン・UX設計
入力: 構造化要件、業界ベストプラクティス
出力: デザインガイドライン、レイアウト指示

3. コンテンツ生成エージェント

役割: SEO最適化コンテンツ作成
入力: 要件、デザインガイドライン
出力: 完全なサイトコンテンツ

4. 実装クラフトマン

役割: コード生成・技術実装
入力: 設計仕様、デザインガイドライン
出力: 完成したWebサイト

5. 品質保証エージェント

役割: 品質検証・最終チェック
入力: 生成コード、要件仕様
出力: 品質レポート、改善提案

📋 システム要件

VS Code拡張機能

VS Code: 1.85.0 以上
Node.js: 18.0.0 以上
OS: Windows, macOS, Linux

Claude Code契約

必須: Claude Code サブスクリプション
推奨モデル: Claude Sonnet 4.0以上

🚀 インストール

VS Code Marketplace（推奨）

# VS Code内でExtension検索
Ctrl+Shift+X → "SiteStudio-X" で検索

手動インストール

# VSIXファイルからインストール
code --install-extension sitestudio-x-0.1.0.vsix

💻 使用方法

1. 基本的な使用手順

VS Codeでプロジェクトを開く
コマンドパレット (Ctrl+Shift+P) を開く
"SiteStudio-X: Webサイト自動生成" を実行
要件を日本語で入力 (例: "美容院のホームページを作りたい")
30分以内で完成 - 自動生成プロセスを見守る

2. キーボードショートカット

Ctrl+Shift+G (Windows/Linux)
Cmd+Shift+G (macOS)

3. 設定オプション

{
  "sitestudio-x.autoGenerate": true,
  "sitestudio-x.language": "ja",
  "sitestudio-x.outputDirectory": "./generated-sites"
}

🏗️ 技術アーキテクチャ

基盤技術

VS Code Extension API - 拡張機能基盤
Claude Code統合制御 - AI エージェント実行
MCP (Model Context Protocol) - エージェント間通信
WebView Panel - UI表示
TypeScript - 型安全な実装

エージェント実行方式

// Claude Code Task Tool統合
await vscode.commands.executeCommand('claude-code.executeTask', {
  agentType: '要件定義',
  prompt: `${agentPrompt}\n\n入力: ${userInput}`,
  model: 'sonnet'
});

📁 プロジェクト構造

SiteStudio-X/
├── src/                 # 拡張機能メインコード
│   ├── agents/          # エージェント実装
│   │   ├── requirements.ts
│   │   ├── design.ts
│   │   ├── content.ts
│   │   ├── implementation.ts
│   │   └── qa.ts
│   ├── webview/         # WebView UI
│   └── utils/           # ユーティリティ
├── resources/           # リソース
│   ├── icons/           # アイコン
│   └── webview/         # WebView用素材
├── test/                # テスト
├── out/                 # ビルド出力
└── docs/                # 技術文書
    ├── requirements.md
    ├── CLAUDE.md
    └── HANDOVER_REPORT.md

🛠️ 開発

開発環境セットアップ

# リポジトリクローン
git clone https://github.com/sitestudio-x/sitestudio-x.git
cd sitestudio-x

# 依存関係インストール
npm install

# TypeScriptコンパイル
npm run compile

# 拡張機能デバッグ実行
F5キー (VS Code内)

ビルド・テスト

# 型チェック・ビルド
npm run compile

# ESLint実行
npm run lint

# テスト実行
npm test

# 拡張機能パッケージング
npm run package

公開

# VS Code Marketplace公開
npm run publish

📊 パフォーマンス指標

Agent Task実行時間: < 30秒 (95%ile)
サイト生成成功率: > 95%
拡張機能起動時間: < 3秒
WebView応答性: < 1秒

🤝 貢献

開発に参加

Fork this repository
Create feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open Pull Request

課題報告

GitHub Issues: https://github.com/sitestudio-x/sitestudio-x/issues
バグ報告 - 詳細な再現手順を含める
機能要望 - 具体的な使用例を記載

📄 ライセンス

MIT License - 詳細は LICENSE ファイルを参照

🏷️ バージョン履歴

v0.1.0 (開発中)

✅ VS Code拡張機能基盤実装
✅ Claude Code統合制御実装
✅ 5段階エージェントシステム実装
⏳ WebView UI実装中
⏳ マルチプラットフォームテスト中

💡 使用例

美容院ホームページ生成

入力: "美容院のホームページを作成したい。サービス紹介、料金表、予約フォームが必要"

出力: 完全なレスポンシブWebサイト
- トップページ (ヒーロー画像、サービス概要)
- サービス詳細ページ
- 料金表ページ
- 予約フォームページ
- アクセス情報ページ

レストラン紹介サイト

入力: "イタリアンレストランの紹介サイトを作りたい。メニュー、店舗情報、予約機能"

出力: 高品質なレストランサイト
- 魅力的なメニュー表示
- 店舗雰囲気の写真ギャラリー
- 予約システム統合
- SNS連携機能

🆘 よくある質問

Q: Claude API キーは必要ですか？

A: いいえ。Claude Code契約のみ必要です。外部APIキーは不要です。

Q: 生成されたサイトのカスタマイズは可能ですか？

A: はい。生成後のコードは完全に編集可能です。

Q: 商用利用は可能ですか？

A: はい。MITライセンスにより商用利用可能です。

Q: サポートされている言語は？

A: 現在は日本語のみサポート。多言語対応は将来予定。

🚀 SiteStudio-X - あなたのアイデアを30分でWebサイトに変える革新的なVS Code拡張機能

SiteStudio-X

FUNNY BOOYH