stitch-mcp-get-project

Stitch MCP — プロジェクトを取得

特定の Stitch プロジェクトのメタデータ全体を取得します。追加の画面を生成する前に、既存プロジェクトのテーマと画面一覧を把握するのに役立ちます。

重要な前提条件

ユーザーが「Stitch」と明示的に言及した場合にのみ、このスキルを使用してください。

projectId と screenId の両方をすでに持っている場合は、これを呼び出さないでください。 その場合は、stitch-mcp-get-screen を直接呼び出してください。より効率的です。

使用する場合

• ユーザーが Stitch のプロジェクト URL を提示し、その詳細が必要な場合
• 新しい画面を一貫性のあるデザインで生成する前に、既存のデザインテーマを把握する必要がある場合
• 作業を進める前にプロジェクトの存在を確認する場合

ステップ 1：コンテキストからプロジェクト ID を解析する

ユーザーがプロジェクトへの参照を提示する形式はいくつかあります。必ず projects/ID 形式に変換してください。

入力形式	→ get_project に渡す引数
3780309359108792857（数値）	projects/3780309359108792857
projects/3780309359108792857	projects/3780309359108792857（そのまま使用）
https://stitch.withgoogle.com/projects/3780309359108792857	ID を抽出 → projects/3780309359108792857

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

{
  "name": "get_project",
  "arguments": {
    "name": "projects/3780309359108792857"
  }
}

出力スキーマ

{
  "name": "projects/3780309359108792857",
  "title": "Analytics Dashboard",
  "createTime": "2024-11-10T09:00:00Z",
  "updateTime": "2024-11-15T10:30:00Z",
  "deviceType": "DESKTOP",
  "visibility": "PRIVATE",
  "projectType": "TEXT_TO_UI",
  "origin": "STITCH",
  "metadata": {
    "isRemixed": false,
    "userRole": "OWNER"
  },
  "designTheme": {
    "colorMode": "LIGHT",
    "customColor": "#6366F1",
    "colorVariant": "TONAL_SPOT",
    "roundness": "ROUND_TWELVE",
    "saturation": 3,
    "spacingScale": 1,
    "headlineFont": "INTER",
    "bodyFont": "INTER",
    "labelFont": "INTER",
    "font": "INTER",
    "headlineFontFamily": "Inter",
    "bodyFontFamily": "Inter",
    "labelFontFamily": "Inter",
    "namedColors": {
      "primary": "#5B5FC7",
      "on_primary": "#FFFFFF",
      "primary_container": "#E1DFFF",
      "on_primary_container": "#414594",
      "secondary": "#5C5D72",
      "on_secondary": "#FFFFFF",
      "tertiary": "#785572",
      "on_tertiary": "#FFFFFF",
      "surface": "#FBF8FF",
      "on_surface": "#1B1B21",
      "surface_container": "#EFEDF5",
      "surface_container_low": "#F5F2FA",
      "surface_container_high": "#E9E7EF",
      "outline": "#777680",
      "error": "#BA1A1A",
      "on_error": "#FFFFFF"
    },
    "overridePrimaryColor": "",
    "overrideSecondaryColor": "",
    "overrideTertiaryColor": "",
    "overrideNeutralColor": "",
    "backgroundLight": "#FBF8FF",
    "backgroundDark": "#131316",
    "description": "Modern indigo-toned interface with clean surfaces",
    "designMd": "# Design System\n\n## Color Palette\n..."
  },
  "screenInstances": [
    {
      "name": "projects/3780309359108792857/screens/88805...",
      "id": "88805...",
      "sourceScreen": "screens/88805...",
      "type": "SCREEN_INSTANCE",
      "width": 412,
      "height": 892,
      "x": 0,
      "y": 0,
      "hidden": false
    },
    {
      "name": "projects/3780309359108792857/screens/99901...",
      "id": "99901...",
      "sourceScreen": "screens/99901...",
      "type": "DESIGN_SYSTEM_INSTANCE",
      "width": 412,
      "height": 892,
      "x": 500,
      "y": 0,
      "hidden": false,
      "sourceAsset": "assets/design-system-123"
    }
  ]
}

designMd は上記では省略されています。実際には、自動生成されたデザインシステムのドキュメント全体（500 行を超えることもよくあります）です。namedColors には通常 40 個以上のセマンティックトークンが含まれますが、ここでは一般的なもののみを示しています。

DesignTheme フィールドリファレンス

フィールド	型	値／注記
colorMode	enum	LIGHT、DARK
customColor	string	16 進数のシードカラー（例：#6366F1）。これはカラーシードであり、primaryColor ではありません
colorVariant	enum	MONOCHROME、NEUTRAL、TONAL_SPOT、VIBRANT、EXPRESSIVE、FIDELITY、CONTENT、RAINBOW、FRUIT_SALAD
roundness	enum	ROUND_FOUR、ROUND_EIGHT、ROUND_TWELVE、ROUND_FULL
spacingScale	number	0～3（密度の倍率）
headlineFont	enum	68 種類のフォントセット：INTER、GEIST、DM_SANS、MANROPE、PLUS_JAKARTA_SANS、WORK_SANS、SPACE_GROTESK、SORA、OUTFIT、RALEWAY、QUICKSAND、MONTSERRAT、OSWALD、PLAYFAIR_DISPLAY、MERRIWEATHER、NOTO_SERIF、EB_GARAMOND、LITERATA、SOURCE_SERIF_4、SOURCE_SANS_3、NUNITO_SANS、JETBRAINS_MONO、BEBAS_NEUE、ANTON、ARCHIVO_NARROW — 68 種類すべての値については stitch-ued-guide を参照してください
bodyFont	enum	同じ 68 種類のフォントセット
labelFont	enum	同じ 68 種類のフォントセット
font	enum	非推奨 — レガシーの単一フォントフィールド。同じ enum です
namedColors	object	40 個以上のセマンティックカラーのトークン（primary、on_primary、surface、surface_container、outline、error など）
overridePrimaryColor	string	16 進数の上書き値。未使用の場合は空文字列
overrideSecondaryColor	string	16 進数の上書き値。未使用の場合は空文字列
overrideTertiaryColor	string	16 進数の上書き値。未使用の場合は空文字列
overrideNeutralColor	string	16 進数の上書き値。未使用の場合は空文字列
backgroundLight	string	ライトモードの背景色（16 進数）
backgroundDark	string	ダークモードの背景色（16 進数）
description	string	テーマの簡潔な美的説明
designMd	string	自動生成されたデザインシステムの Markdown — トークン仕様の全体。非常に長くなることがあります
spacing	object	任意。スペーシングトークン名 → CSS 値のマップ（例：{"sm": "8px"}）
typography	object	任意。タイポグラフィレベル名（例：h1、body）→ タイポグラフィトークン（fontFamily、fontSize、fontWeight、letterSpacing、lineHeight。いずれも任意の文字列）

プロジェクトレベルのフィールド

フィールド	型	値 / 備考
deviceType	string	MOBILE、DESKTOP、TABLET、AGNOSTIC、または DEVICE_TYPE_UNSPECIFIED
visibility	enum	PRIVATE、PUBLIC
projectType	enum	TEXT_TO_UI、PROJECT_DESIGN など
origin	enum	STITCH、IMPORTED_FROM_GALILEO
metadata.isRemixed	boolean	このプロジェクトが別のプロジェクトからリミックスされたかどうか
metadata.userRole	string	OWNER、VIEWER など

ScreenInstance のフィールド

フィールド	型	備考
id	string	数値の画面 ID
sourceScreen	string	ソース画面へのパス参照
type	enum	SCREEN_INSTANCE、DESIGN_SYSTEM_INSTANCE、GROUP_INSTANCE
width / height	number	ピクセル単位の寸法
x / y	number	キャンバス上の位置
hidden	boolean	プロジェクト内で非表示かどうか
sourceAsset	string	DESIGN_SYSTEM_INSTANCE タイプで設定されます — デザインシステムのアセットを参照します

テーマデータの使用

新しい画面を生成する際は、designMd と namedColors を使用してください。これらには、このプロジェクトの信頼できるデザインシステムが含まれています。トークンをすぐに抽出するには、namedColors を stitch-design-system に渡してください。

プロジェクトの取得後

• designTheme を確認し、新しい画面のビジュアルに一貫性を持たせるために使用してください
• screenInstances の一覧を確認し、特定の画面を調べる必要がある場合は screenId の値を抽出してください
• サムネイルを含む、より詳細な画面一覧を確認するには stitch-mcp-list-screens を使用してください