mcpField
S
stitch-mcp-create-project

stitch-mcp-create-project

github.com/gabelulデザイン・UI4738 回インストール14 週間前に更新
リポジトリ

stitch-mcp-create-project について

Stitch が明示された場合に、デザインプロジェクトを作成するスキルです。タイトルの決定、プロジェクト ID の抽出、画面生成へ進む手順を定めています。

主な機能

  1. 01Stitch の明示を使用条件とする仕組み
  2. 02依頼内容からのプロジェクト名推定
  3. 032 種類のプロジェクト ID の抽出と保存
  4. 04ツールごとの ID 形式の区別
  5. 05画面生成への手順の接続

活用シーン

  1. 01新しい Stitch デザイン作業の開始
  2. 02画面生成前のプロジェクト ID 取得

MCP 対応

Stitch MCP の `create_project` ツールによる作成を案内し、後続ツールで使うプロジェクト ID を保持します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-create-project

インストール後、Claude Code で/stitch-mcp-create-projectを入力して読み込まれたか確認します。

詳細

Stitch MCP — プロジェクトの作成

新しい Stitch プロジェクトを作成します。プロジェクトは、生成された 1 つ以上の画面を格納するコンテナです。generate_screen_from_text を呼び出す前に、projectId が必要です。

重要な前提条件

ユーザーがリクエストで「Stitch」に明示的に言及した場合に限り、このスキルを使用してください。 通常の会話中に、Stitch の操作を黙って実行してはいけません。

使用するタイミング

  • 新しいデザインタスクやアプリのコンセプトを始めるとき
  • ユーザーが「Stitch プロジェクトを作成して」「Stitch で新しいプロジェクトを始めて」「Stitch で X をデザインして」と言ったとき
  • generate_screen_from_text の呼び出し前に projectId が必要なとき
  • 新しい分野で作業を始めるとき（関連する画面は 1 つのプロジェクトにまとめてください）

ステップ 1：わかりやすいタイトルを抽出する

ユーザーのリクエストから、内容を適切に表すプロジェクトタイトルを推測します。

ユーザーの発言→ タイトル
「ペットの里親探しアプリをデザインして」"PawPals" または "Pet Adoption App"
「ログインページを作って」"Login Page"
「分析用の SaaS ダッシュボード」"Analytics Dashboard"
「EC の商品一覧」"Product Listing"

明確な名前がわからない場合は、内容を表すラベルを使用します。"Design Project [date]"。

ステップ 2：MCP ツールを呼び出す

{
  "name": "create_project",
  "arguments": {
    "title": "[Descriptive project title]"
  }
}

ステップ 3：プロジェクト ID を抽出して保存する — 重要

ツールは projects/NUMERIC_ID 形式の name フィールドを返します。数値部分を抽出する必要があります。

ツールのレスポンス：

{
  "name": "projects/3780309359108792857",
  "title": "Analytics Dashboard",
  "createTime": "2026-03-24T14:30:00Z",
  "visibility": "PRIVATE",
  "deviceType": "DESKTOP",
  "projectType": "TEXT_TO_UI",
  "designTheme": {
    "colorMode": "LIGHT",
    "customColor": "",
    "colorVariant": "TONAL_SPOT",
    "roundness": "ROUND_TWELVE",
    "spacingScale": 1,
    "headlineFont": "INTER",
    "bodyFont": "INTER",
    "labelFont": "INTER",
    "namedColors": {},
    "designMd": ""
  }
}

designTheme は、最初の画面の生成後に完全な値（designMd や namedColors を含む）で設定されます。新規プロジェクトでは、テーマの値のほとんどが空またはデフォルト値になっています。

抽出する値：

  • 完全な名前： projects/3780309359108792857 → list_screens、get_project で使用
  • 数値 ID： 3780309359108792857 → generate_screen_from_text、get_screen で使用

両方の値を保存します。ユーザーには次のように伝えます。

「プロジェクト 'Analytics Dashboard'（ID: 3780309359108792857）を作成しました。画面を生成する準備ができました。」

ID 形式のルール（重要 — ツールごとに必要な形式が異なります）

ツール必要な ID 形式
generate_screen_from_text数値のみ：3780309359108792857
get_screen数値のみ：3780309359108792857
list_screens完全なパス：projects/3780309359108792857
get_project完全なパス：projects/3780309359108792857

連携

プロジェクトの作成後、次のステップでは必ず stitch-mcp-generate-screen-from-text を使って最初の画面を生成します。

コメント

Markdown 対応