Full Window MCP Guide

mcp-aidesign
利用ガイド

IDEにURLを登録するだけで使い始められる、シンプルなMCP利用ガイドです。既存サイト改修の分析・生成・品質確認に加えて、指定URLからの DESIGN.md 自動生成にも対応しています。

最短手順を見る

Serversooocojp-design-mcp@0.1.0

Providermock (template-engine-v3)

MCP Endpointhttps://mcp-aidesign.sooo.co.jp/mcp

接続情報

MCP Endpoint

https://mcp-aidesign.sooo.co.jp/mcp

Health Endpoint

https://mcp-aidesign.sooo.co.jp/healthz

DESIGN.md Generator

https://mcp-aidesign.sooo.co.jp/design-profile

接続テスト

CLIで確認する場合は、まず initialize で疎通を確認します。

Initialize

curl -i -X POST 'https://mcp-aidesign.sooo.co.jp/mcp' \
  -H 'Authorization: Bearer ${MCP_AIDESIGN_BEARER_TOKEN}' \
  -H 'Accept: application/json, text/event-stream' \
  -H 'Content-Type: application/json' \
  --data '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"client","version":"1.0.0"}}}'

この環境の認証状態: 有効（Bearer必須 / 利用者別トークン）

料金・認証

月額運用を想定したAPIトークン方式に対応しています。VSCode/IDE側の設定は Bearer トークンを1回登録するだけです。

現在の課金モード

mode: stripe-subscription / auth: required

free日次上限: 120

pro日次上限: 5000

アクティベートを開始

契約状態の確認

/account に接続して現在の契約状態を確認する。
Stripe利用中なら、同画面から課金ポータルへ進む。
VSCode設定は同画面のJSONダウンロードを使う。

Account

https://mcp-aidesign.sooo.co.jp/account

プラン情報確認

Plans

curl -sS 'https://mcp-aidesign.sooo.co.jp/billing/plans'

チェックアウト開始

Checkout

curl -sS -X POST 'https://mcp-aidesign.sooo.co.jp/billing/checkout' \
  -H 'Content-Type: application/json' \
  --data '{"email":"you@example.com"}'

トークンの現在状態を確認

Billing Me

curl -sS 'https://mcp-aidesign.sooo.co.jp/billing/me' \
  -H 'Authorization: Bearer ${MCP_AIDESIGN_BEARER_TOKEN}'

Stripe連携は有効です。決済完了後は https://mcp-aidesign.sooo.co.jp/billing/claim?session_id={CHECKOUT_SESSION_ID} でアクティベートされ、契約情報は /account から確認できます。

導入（IDEにURLを登録するだけ）

まずは https://mcp-aidesign.sooo.co.jp/mcp をMCPサーバーとして追加するだけで開始できます。追加の手順は最小限です。

IDEのMCP設定に https://mcp-aidesign.sooo.co.jp/mcp を登録する。
MCPサーバーに接続してツール一覧を取得する。
最初の呼び出しで create_improvement_strategy か generate_design を実行する。

1) IDE設定（VS Code等）

まずは初期化コマンドで設定ファイルを自動生成し、VSCodeへ配置します。

Init Command

npm run init:client
cp .mcp-clients/vscode.mcp.json .vscode/mcp.json

MCP Preset

{
  "mcpServers": {
    "mcpAidesign": {
      "transport": {
        "type": "streamable_http",
        "url": "https://mcp-aidesign.sooo.co.jp/mcp",
        "headers": {
          "Authorization": "Bearer <token>"
        }
      }
    }
  }
}

2) 接続確認（任意）

Healthz

curl -sS 'https://mcp-aidesign.sooo.co.jp/healthz'

Initialize

curl -i -X POST 'https://mcp-aidesign.sooo.co.jp/mcp' \
  -H 'Authorization: Bearer ${MCP_AIDESIGN_BEARER_TOKEN}' \
  -H 'Accept: application/json, text/event-stream' \
  -H 'Content-Type: application/json' \
  --data '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"client","version":"1.0.0"}}}'

認証が必要な環境向けの追加設定（Stripe課金）

Create Checkout Session

curl -sS -X POST 'https://mcp-aidesign.sooo.co.jp/billing/checkout' \
  -H 'Content-Type: application/json' \
  --data '{"email":"you@example.com"}'

Claim Token

https://mcp-aidesign.sooo.co.jp/billing/claim?session_id={CHECKOUT_SESSION_ID}

Header

Authorization: Bearer ${MCP_AIDESIGN_BEARER_TOKEN}

接続後のプロンプト例

接続できたら、IDEのチャットで以下の文をそのまま入力して開始できます。

例1) 既存サイトを改善する

Prompt Example

mcpAidesignを使って https://example.com を分析し、
現在の情報構造を維持したまま、日本人向けに読みやすく改善してください。
目的は問い合わせ率の向上。CTAは1つに絞り、最後に改善理由を3点で要約してください。

例2) モバイル優先で整える

Prompt Example

https://example.com をモバイル優先で改修してください。
余白を広め、色数を減らし、本文の日本語を簡潔で理解しやすい表現に整えてください。
最後に analyze_design を実行し、改善ポイントを3つに要約してください。

例3) 画像選定/生成まで一括で依頼する

Prompt Example

既存ページの訴求を強めたいです。
ヒーローの画像方針を提案し、必要なら generate_image または search_stock_images で候補を作成して、
attach_image_to_design まで進めてください。

例4) 他端末のリポジトリを repo_url で解析する

Prompt Example

analyze_project_design_context を使って次のリポジトリを解析してください。
repo_url: "https://github.com/example-org/example-repo"
repo_branch: "main"
repo_subdir: "apps/web"
解析結果をもとに、このサイトの改善優先順位を3つ提案してください。

例5) 画像を自動生成して差し込む

Prompt Example

generate_design を auto_visuals=true で実行し、
auto_visual_source=hybrid、auto_visual_max_images=2、auto_visual_placement=hero を指定して
画像込みの初稿を作成してください。最後に analyze_design で品質確認してください。

このMCPでできること

既存サイト改修に強い

対象サイトのデザイン・表現・文面を解析し、目的達成に直結する改善戦略を提示します。

create_improvement_strategy generate_design_profile_from_site analyze_project_design_context

生成から評価まで一気通貫

生成、改善、品質分析、完成判定を同じMCP内で反復できます。

generate_design refine_design analyze_design assess_design_completion

画像活用にも対応

画像生成とフリー素材活用の両方を扱い、最終HTMLへの差し込みまで実施できます。

generate_image search_stock_images attach_image_to_design

ツール一覧（19種）

設計規約取り込み、既存分析、生成、画像、運用確認までをカバーしています。

Tool	役割	使うタイミング
`create_improvement_strategy`	既存サイト分析 + 目的達成に向けた改善戦略作成	改修案件の最初に必ず実行
`analyze_project_design_context`	ローカルまたは repo_url の技術文脈（FW/トークン/構成）を解析	他端末やリモート環境のリポジトリも含めて解析したいとき
`import_design_profile`	単体DESIGN.mdを取り込み	ブランド規約を強制したいとき
`import_design_profiles_from_repo`	GitHubから複数のDESIGN.md/READMEを一括取り込み	設計パターンをまとめて導入するとき
`list_design_profiles`	登録済みプロファイル一覧を確認	利用可能な規約IDを確認したいとき
`generate_design_profile_from_site`	指定URLを解析してDESIGN.mdを自動生成	既存サイトから設計規約を抽出したいとき
`generate_design`	新規デザイン案を生成	初稿が必要なとき
`refine_design`	既存案を改善	レビュー反映や再調整時
`list_design_runs`	実行履歴を取得	過去案の比較や再利用時
`analyze_design`	品質をスコアと改善提案で返す	客観評価したいとき
`assess_design_completion`	完成度ゲート判定（prototype/staging/production）	公開可否を判断したいとき
`create_adoption_brief`	実装導入タスクへ落とし込む	開発チームへ引き渡す前
`generate_image`	LLM画像生成	キービジュアルが必要なとき
`search_stock_images`	素材検索	フリー素材を探すとき
`import_stock_image`	選んだ素材をプロジェクトへ取り込み	素材を正式採用するとき
`attach_image_to_design`	画像をHTMLへ配置	構図に反映するとき
`list_image_assets`	画像資産一覧を確認	使用中素材を管理したいとき
`get_credit_status`	クレジット使用状況を確認	運用監視時
`whoami`	現在の認証主体を確認	接続切り分けや利用者確認時

mcp-aidesign利用ガイド

接続情報

MCP Endpoint

Health Endpoint

DESIGN.md Generator

接続テスト

料金・認証

現在の課金モード

契約状態の確認

プラン情報確認

チェックアウト開始

トークンの現在状態を確認

導入（IDEにURLを登録するだけ）

1) IDE設定（VS Code等）

2) 接続確認（任意）

接続後のプロンプト例

例1) 既存サイトを改善する

例2) モバイル優先で整える

例3) 画像選定/生成まで一括で依頼する

例4) 他端末のリポジトリを repo_url で解析する

例5) 画像を自動生成して差し込む

このMCPでできること

既存サイト改修に強い

生成から評価まで一気通貫

画像活用にも対応

ツール一覧（19種）

mcp-aidesign
利用ガイド