參考

#工具類別唯讀
1create_project專案管理false
2get_project專案管理true
3list_projects專案管理true
4list_screens螢幕管理true
5get_screen螢幕管理true
6generate_screen_from_textAI 生成false
7edit_screensAI 生成false
8generate_variantsAI 生成false
9create_design_system設計系統false
10update_design_system設計系統false
11list_design_systems設計系統true
12apply_design_system設計系統false
13upload_design_md設計系統false
14create_design_system_from_design_md設計系統false

工具

create_project

建立新的 Stitch 專案。專案是 UI 設計與前端程式碼的容器。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Optional. The title of the project."
    }
  },
  "required": []
}

輸出

傳回已建立的 Project 資源，包含產生的 name、title 與中繼資料。

提示詞範例

PROMPT
Create a new Stitch project called ‘Marketing Site’ Start a new design project Set up a new project for my app

get_project

使用專案名稱擷取特定 Stitch 專案的詳細資訊。

註解

唯讀

輸入

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}`. Example: `projects/4044680601076201931`"
    }
  },
  "required": ["name"]
}

輸出

傳回 Project 資源物件。

提示詞範例

PROMPT
Get the details of project 4044680601076201931 Show me the project info What’s in my project?

list_projects

列出使用者可存取的所有 Stitch 專案。預設會列出使用者擁有的專案。

註解

唯讀

輸入

{
  "type": "object",
  "properties": {
    "filter": {
      "type": "string",
      "description": "Optional. AIP-160 filter on `view` field. Supported: `view=owned` (default), `view=shared`."
    }
  },
  "required": []
}

輸出

Project 資源物件的陣列。

提示詞範例

PROMPT
List all my Stitch projects Show me my projects List shared projects

list_screens

列出指定 Stitch 專案中的所有螢幕。

註解

唯讀

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID (e.g., '4044680601076201931'), without `projects/` prefix."
    }
  },
  "required": ["projectId"]
}

輸出

Screen 物件的陣列。

提示詞範例

PROMPT
List all screens in project 12345 Show me the designs in this project What screens are in my project?

get_screen

擷取專案中特定螢幕的詳細資訊。

註解

唯讀

輸入

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}/screens/{screen}`"
    },
    "projectId": {
      "type": "string",
      "description": "Required (deprecated). Project ID without prefix."
    },
    "screenId": {
      "type": "string",
      "description": "Required (deprecated). Screen ID without prefix."
    }
  },
  "required": ["name", "projectId", "screenId"]
}

projectId 與 screenId 已淘汰，建議改用 name（資源名稱格式），但目前三者皆為必填。

輸出

傳回 Screen 物件，包含 htmlCode、screenshot、figmaExport 檔案參照與下載 URL。

提示詞範例

PROMPT
Get the details of screen abc123 in project 12345 Show me the screen info Check the status of this screen

generate_screen_from_text

從文字提示詞產生新的螢幕。此流程通常需要幾分鐘。即使遇到連線錯誤，也請避免重試。連線錯誤不一定代表失敗，請在幾分鐘後改用 get_screen 查詢。若 output_components 包含建議，請向使用者呈現。若使用者接受，請以該建議作為新的 prompt 再次呼叫。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "prompt": {
      "type": "string",
      "description": "Required. Text prompt describing the screen to generate."
    },
    "deviceType": {
      "type": "string",
      "enum": ["DEVICE_TYPE_UNSPECIFIED", "MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]
    },
    "modelId": {
      "type": "string",
      "enum": ["MODEL_ID_UNSPECIFIED", "GEMINI_3_PRO", "GEMINI_3_FLASH", "GEMINI_3_1_PRO"]
    }
  },
  "required": ["projectId", "prompt"]
}

GEMINI_3_PRO 已淘汰。請改用 GEMINI_3_1_PRO 或 GEMINI_3_FLASH。

輸出

傳回產生的 Screen 物件與 SessionOutputComponent 項目（文字、建議或設計參照）。

提示詞範例

PROMPT
Generate a mobile login screen for project 12345 Design a dashboard page with charts and statistics Create a landing page with a hero section, features grid, and footer Build a settings page for a dark-themed app

edit_screens

使用文字提示詞編輯現有螢幕。與 generate_screen_from_text 類似，此流程通常需要幾分鐘。即使遇到連線錯誤，也請避免重試。連線錯誤不一定代表失敗，請在幾分鐘後改用 get_screen 查詢。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "selectedScreenIds": {
      "type": "array",
      "items": { "type": "string" },
      "description": "Required. Screen IDs to edit, without `screens/` prefix."
    },
    "prompt": {
      "type": "string",
      "description": "Required. Edit instruction."
    },
    "deviceType": {
      "type": "string",
      "enum": ["DEVICE_TYPE_UNSPECIFIED", "MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]
    },
    "modelId": {
      "type": "string",
      "enum": ["MODEL_ID_UNSPECIFIED", "GEMINI_3_PRO", "GEMINI_3_FLASH", "GEMINI_3_1_PRO"]
    }
  },
  "required": ["projectId", "selectedScreenIds", "prompt"]
}

GEMINI_3_PRO 已淘汰。請改用 GEMINI_3_1_PRO 或 GEMINI_3_FLASH。

輸出

傳回更新後的 Screen 物件。

提示詞範例

PROMPT
Change the button color to blue on screen abc123 Make the hero text larger and add a subtitle Add a navigation bar to these screens Switch the layout to a two-column grid

generate_variants

為現有螢幕產生設計變體。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "selectedScreenIds": {
      "type": "array",
      "items": { "type": "string" },
      "description": "Required. Screen IDs to generate variants for."
    },
    "prompt": {
      "type": "string",
      "description": "Required. Text guiding variant generation."
    },
    "variantOptions": {
      "$ref": "#/$defs/VariantOptions",
      "description": "Required. Variant configuration."
    },
    "deviceType": {
      "type": "string",
      "enum": ["DEVICE_TYPE_UNSPECIFIED", "MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]
    },
    "modelId": {
      "type": "string",
      "enum": ["MODEL_ID_UNSPECIFIED", "GEMINI_3_PRO", "GEMINI_3_FLASH", "GEMINI_3_1_PRO"]
    }
  },
  "required": ["projectId", "selectedScreenIds", "prompt", "variantOptions"]
}

GEMINI_3_PRO 已淘汰。請改用 GEMINI_3_1_PRO 或 GEMINI_3_FLASH。

VariantOptions
{
  "type": "object",
  "properties": {
    "variantCount": {
      "type": "integer",
      "description": "Number of variants (1–5). Default: 3."
    },
    "creativeRange": {
      "type": "string",
      "enum": ["CREATIVE_RANGE_UNSPECIFIED", "REFINE", "EXPLORE", "REIMAGINE"]
    },
    "aspects": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": ["VARIANT_ASPECT_UNSPECIFIED", "LAYOUT", "COLOR_SCHEME", "IMAGES", "TEXT_FONT", "TEXT_CONTENT"]
      }
    }
  }
}

輸出

傳回產生的變體 Screen 物件。

提示詞範例

PROMPT
Generate 3 variants of screen abc123 focusing on layout and color Reimagine my landing page with radical variations Create subtle refinements of these screens Show me 5 different color schemes for this design

create_design_system

為專案建立新的設計系統。建立基礎設計權杖（色彩、字體排版、形狀、外觀），套用至所有螢幕。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "designSystem": {
      "$ref": "#/$defs/DesignSystem",
      "description": "Required. The design system to create."
    },
    "projectId": {
      "type": "string",
      "description": "Optional. Project ID. If empty, creates a global (unassociated) asset."
    }
  },
  "required": ["designSystem"]
}
DesignSystem
{
  "type": "object",
  "properties": {
    "displayName": {
      "type": "string",
      "description": "Required. Display name."
    },
    "theme": {
      "$ref": "#/$defs/DesignTheme",
      "description": "Required. Theme configuration."
    }
  },
  "required": ["displayName", "theme"]
}
DesignTheme
{
  "type": "object",
  "properties": {
    "colorMode": { "type": "string", "enum": ["COLOR_MODE_UNSPECIFIED", "LIGHT", "DARK"] },
    "headlineFont": { "type": "string", "enum": ["FONT_UNSPECIFIED", "INTER", "DM_SANS", "GEIST", "..."] },
    "bodyFont": { "type": "string", "enum": ["FONT_UNSPECIFIED", "INTER", "DM_SANS", "GEIST", "..."] },
    "labelFont": { "type": "string", "enum": ["FONT_UNSPECIFIED", "INTER", "DM_SANS", "GEIST", "..."] },
    "roundness": { "type": "string", "enum": ["ROUNDNESS_UNSPECIFIED", "ROUND_FOUR", "ROUND_EIGHT", "ROUND_TWELVE", "ROUND_FULL"] },
    "customColor": { "type": "string", "description": "Required. Hex color seed for the dynamic color system." },
    "colorVariant": { "type": "string", "enum": ["COLOR_VARIANT_UNSPECIFIED", "MONOCHROME", "NEUTRAL", "TONAL_SPOT", "VIBRANT", "EXPRESSIVE", "FIDELITY", "CONTENT", "RAINBOW", "FRUIT_SALAD"] },
    "overridePrimaryColor": { "type": "string", "description": "Optional. Override primary color (hex)." },
    "overrideSecondaryColor": { "type": "string", "description": "Optional. Override secondary color (hex)." },
    "overrideTertiaryColor": { "type": "string", "description": "Optional. Override tertiary color (hex)." },
    "overrideNeutralColor": { "type": "string", "description": "Optional. Override neutral color (hex)." },
    "designMd": { "type": "string", "description": "Optional. Markdown design instructions." }
  },
  "required": ["colorMode", "headlineFont", "bodyFont", "roundness", "customColor"]
}

輸出

傳回已建立的設計系統 Asset。

提示詞範例

PROMPT
Create a dark mode design system with Inter font and round corners Set up a design system with blue as the primary color Create a brand identity with Geist font and minimal roundness

update_design_system

更新現有的設計系統。透過 name 欄位識別資產。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Required. Resource name. Format: `assets/{asset}`. Example: `assets/15996705518239280238`"
    },
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "designSystem": {
      "$ref": "#/$defs/DesignSystem",
      "description": "Required. The updated design system content."
    }
  },
  "required": ["name", "projectId", "designSystem"]
}

使用與 create_design_system 相同的 DesignSystem 與 DesignTheme 結構定義。

輸出

傳回更新後的設計系統 Asset。

提示詞範例

PROMPT
Update the design system to use dark mode Change the font to Geist in our design system Update the roundness to fully rounded

list_design_systems

列出專案的所有設計系統（若未提供 projectId，則列出全域設計系統）。

註解

唯讀

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Optional. Project ID. If empty, lists global design systems."
    }
  },
  "required": []
}

輸出

包含設計系統的 Asset 物件陣列。

提示詞範例

PROMPT
List all design systems in project 12345 Show me the available design systems What design systems do I have?

apply_design_system

將設計系統套用至一個或多個螢幕，修改其外觀以符合該系統的權杖（色彩、字型、形狀）。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "selectedScreenInstances": {
      "type": "array",
      "items": { "$ref": "#/$defs/SelectedScreenInstance" },
      "description": "Required. Screen instances to update (from `get_project`)."
    },
    "assetId": {
      "type": "string",
      "description": "Required. Design system asset ID (from `list_design_systems`), without `assets/` prefix."
    }
  },
  "required": ["projectId", "selectedScreenInstances", "assetId"]
}
SelectedScreenInstance
{
  "type": "object",
  "properties": {
    "id": {
      "type": "string",
      "description": "Required. The screen instance ID (NOT the source screen ID). Available from `get_project`."
    },
    "sourceScreen": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}/screens/{screen}`"
    }
  },
  "required": ["id", "sourceScreen"]
}

輸出

傳回更新後的 Screen 物件。

提示詞範例

PROMPT
Apply the blue design system to all screens in project 12345 Restyle these screens with the brand identity Use design system abc to update my screens

upload_design_md

將 DESIGN.md 檔案上傳至 Stitch 專案。這是兩步驟 DESIGN.md 工作流程的第一步。上傳後，請呼叫 create_design_system_from_design_md 建立設計系統。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID (e.g., '4044680601076201931'), without `projects/` prefix."
    },
    "designMdBase64": {
      "type": "string",
      "description": "Required. Base64-encoded DESIGN.md content. The decoded content must be valid UTF-8."
    }
  },
  "required": ["projectId", "designMdBase64"]
}

輸出

傳回代表已上傳 DESIGN.md 的螢幕執行個體物件。此回應中的 id 與 sourceScreen 欄位是呼叫 create_design_system_from_design_md 時必需的輸入。

提示詞範例

PROMPT
Upload my DESIGN.md to project 12345 Add a design system document to this project Upload this markdown design file to Stitch

create_design_system_from_design_md

從已上傳的 DESIGN.md 檔案建立設計系統，並顯示於 UI 中。必須在 upload_design_md 之後呼叫。

註解

破壞性

輸入

{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "selectedScreenInstance": {
      "$ref": "#/$defs/SelectedScreenInstance",
      "description": "Required. The screen instance created by `upload_design_md`."
    },
    "deviceType": {
      "type": "string",
      "enum": ["DEVICE_TYPE_UNSPECIFIED", "MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"],
      "description": "Optional. The device type for the design system."
    }
  },
  "required": ["projectId", "selectedScreenInstance"]
}

使用與 apply_design_system 相同的 SelectedScreenInstance 結構定義。

輸出

傳回 DesignSystem，其中的 assetId 可搭配 apply_design_system 使用。

提示詞範例

PROMPT
Create a design system from the uploaded DESIGN.md Convert my design document into a design system Build a design system from my DESIGN.md file

共用型別

Screen

Stitch 專案中產生的螢幕設計。

欄位型別說明
namestring資源名稱。格式：projects/{project}/screens/{screen}
idstring(已淘汰) 螢幕 ID。
titlestring螢幕標題。
promptstring用於產生螢幕的提示詞。
screenshotFile螢幕的截圖影像。
htmlCodeFile螢幕的 HTML 程式碼。
figmaExportFile螢幕的 Figma 匯出檔案。
themeDesignTheme產生時使用的主題。
deviceTypeDeviceType裝置型別。
screenTypeScreenType螢幕型別。
screenMetadataScreenMetadata中繼資料（代理程式、狀態、顯示模式）。
widthstring螢幕寬度。
heightstring螢幕高度。
groupIdstring相關螢幕的群組 ID（例如變體）。
groupNamestring群組的顯示名稱。
generatedBystring產生器識別碼。
isCreatedByClientboolean若透過 API 上傳建立則為 true，若由代理程式建立則為 false。

File

欄位型別說明
namestring資源名稱。格式：projects/{project}/files/{file}
downloadUrlstring下載用的 URL。影像使用 FIFE 基礎 URL。
mimeTypestring例如 "image/png"、"text/html"。
fileContentBase64string(唯寫) 供上傳使用的 Base64 編碼內容。
uploadBlobIdstring上傳服務提供的 BlobId。
userFeedbackUserFeedback(唯讀) 最新意見回饋。

DesignSystem

代表用於產生一致且符合品牌形象的設計的視覺／功能設計規範。

欄位型別說明
displayNamestring設計系統的顯示名稱。
themeDesignTheme主題設定。

Asset

設計系統資源的包裝物件（供 update_design_system 使用）。

欄位型別說明
namestring資源名稱。格式：assets/{asset}
designSystemDesignSystem設計系統內容。
versionstring(唯讀) 版本計數器。0 = 未版本化。

DesignTheme

欄位型別必填說明
colorModeColorModetrue淺色或深色模式。
headlineFontFonttrue標題字型排版。
bodyFontFonttrue內文字型排版。
labelFontFontfalse標籤字型排版。
roundnessRoundnesstrue圓角程度。
customColorstringtrue動態色彩系統的種子色彩（十六進位，例如 "#ff0000"）。
colorVariantColorVariantfalse動態色彩系統變體。
overridePrimaryColorstringfalse覆寫主要色彩（十六進位）。
overrideSecondaryColorstringfalse覆寫次要色彩（十六進位）。
overrideTertiaryColorstringfalse覆寫第三色（十六進位）。
overrideNeutralColorstringfalse覆寫中性色（十六進位）。
designMdstringfalseMarkdown 設計指示。

ScreenMetadata

欄位型別說明
agentTypeAgentTypeEnumTURBO_AGENT, PRO_AGENT, IMAGE_AGENT, GENIE_AGENT, IMAGE_PRO_AGENT, HATTER_AGENT, GEMINI_3_AGENT
statusScreenStatusEnumIN_PROGRESS, COMPLETE, FAILED
statusMessagestring代理程式提供的可讀狀態訊息。
displayModeDisplayModeEnumSCREENSHOT, HTML, CODE, MARKDOWN, STICKY_NOTE
isRemixedboolean螢幕是否由 Remix 建立。
componentRegionsComponentRegion[]元件區域註解。

SessionOutputComponent

由產生工具在 output_components 中傳回。

欄位型別說明
textstring代理程式文字回應。
suggestionstring為使用者建議的後續動作。
designDesign產生的設計參照。

UserFeedback

欄位型別說明
ratingstringPOSITIVE 或 NEGATIVE。
commentstring其他留言。
designFeedbackReasonstringDESIGN_DOESNT_MATCH_PROMPT, EDIT_DOESNT_MATCH_PROMPT, COMPONENT_ISSUE, INCORRECT_THEME 等。

VariantOptions

欄位型別說明
variantCountinteger要產生的變體數量（1–5）。預設：3。
creativeRangeCreativeRange創意自由程度。
aspectsVariantAspect[]要著重的層面。

SelectedScreenInstance

供 apply_design_system 與 create_design_system_from_design_md 使用。

欄位型別必填說明
idstringtrue螢幕執行個體 ID（來自 get_project），不是來源螢幕 ID。
sourceScreenstringtrue資源名稱。格式：projects/{project}/screens/{screen}

列舉

DeviceType 列舉

值說明
DEVICE_TYPE_UNSPECIFIED未指定。
MOBILE行動裝置。
DESKTOP桌上型裝置。
TABLET平板裝置。
AGNOSTIC不綁定特定裝置。

ModelId 列舉

值說明
MODEL_ID_UNSPECIFIED未指定。
GEMINI_3_PRO(已淘汰) Gemini 3 Pro。請改用 GEMINI_3_1_PRO 或 GEMINI_3_FLASH。
GEMINI_3_FLASHGemini 3 Flash。
GEMINI_3_1_PROGemini 3.1 Pro。

ScreenType 列舉

值說明
SCREEN_TYPE_UNSPECIFIED預設為 DESIGN。
DESIGN設計螢幕。
IMAGE純圖片。
PROTOTYPE設計原型。
DOCUMENT文件（例如 PRD）。
PROTOTYPE_V2設計原型 v2。

ColorMode 列舉

值說明
COLOR_MODE_UNSPECIFIED未指定。
LIGHT淺色模式。
DARK深色模式。

ColorVariant 列舉

值說明
COLOR_VARIANT_UNSPECIFIED未指定。
MONOCHROME單色變體。
NEUTRAL中性變體。
TONAL_SPOT色調焦點變體。
VIBRANT鮮豔變體。
EXPRESSIVE表現力變體。
FIDELITY忠實變體。
CONTENT內容變體。
RAINBOW彩虹變體。
FRUIT_SALAD水果沙拉變體。

Font 列舉

支援 29 種字型家族：

INTER · DM_SANS · GEIST · SORA · MANROPE · LEXEND · EPILOGUE · BE_VIETNAM_PRO · PLUS_JAKARTA_SANS · PUBLIC_SANS · SPACE_GROTESK · SPLINE_SANS · WORK_SANS · MONTSERRAT · METROPOLIS · SOURCE_SANS_THREE · NUNITO_SANS · ARIMO · HANKEN_GROTESK · RUBIK · IBM_PLEX_SANS · NEWSREADER · NOTO_SERIF · DOMINE · LIBRE_CASLON_TEXT · EB_GARAMOND · LITERATA · SOURCE_SERIF_FOUR

Roundness 列舉

值說明
ROUNDNESS_UNSPECIFIED未指定。
ROUND_TWO(已淘汰) 圓角 2。
ROUND_FOUR圓角 4。
ROUND_EIGHT圓角 8。
ROUND_TWELVE圓角 12。
ROUND_FULL完全圓角。

CreativeRange 列舉

值說明
CREATIVE_RANGE_UNSPECIFIED未指定。
REFINE細微調整，接近原始設計。
EXPLORE平衡探索。(預設)
REIMAGINE大幅度的探索。

VariantAspect 列舉

值說明
VARIANT_ASPECT_UNSPECIFIED未指定。
LAYOUT元素排列。
COLOR_SCHEME色彩調色盤。
IMAGES圖片使用方式。
TEXT_FONT字型選擇。
TEXT_CONTENT文字內容。

MCP 註解

MCP 註解是中繼資料提示，MCP 伺服器會將其附加到每個工具定義，向用戶端（AI 代理程式或主機應用程式）說明工具的行為特性。它們是 MCP 規格的一部分，可協助用戶端在無須了解工具實作的情況下，對工具的使用做出更明智的決策。

每個工具都包含行為註解：

註解含義
readOnlyHinttrue = 唯讀，不會變更狀態。
destructiveHinttrue = 可能建立／修改／刪除資源。
idempotentHinttrue = 重複呼叫會產生相同結果。
openWorldHinttrue = 會與外部系統互動。

實務上如何與工具搭配運作

Stitch MCP 伺服器中的每個工具都會在工具註冊時宣告這些註解。例如：

  • list_projects 具有 readOnlyHint: true — 它只會擷取資料，因此代理程式可以呼叫它，無須擔心副作用。
  • create_project 具有 readOnlyHint: false、destructiveHint: true、idempotentHint: false — 它會變更狀態，因此用戶端應先向使用者確認。
  • generate_screen_from_text 具有 destructiveHint: true 與 idempotentHint: false — 每次呼叫都會建立新螢幕，因此在逾時後重試可能會產生重複項目。

為什麼這些註解很重要

這些是提示，並非強制規則。它們讓 MCP 用戶端可以：

  • 自動核准唯讀工具，無須提示使用者
  • 為破壞性操作顯示確認對話方塊
  • 在網路失敗時安全地重試冪等工具
  • 在 openWorldHint 為 true 時稽核外部互動

以 Stitch 伺服器而言，所有工具都設定 openWorldHint: false，因為它們只與 Stitch 後端互動，不會與任意的第三方服務互動。

原文: https://stitch.withgoogle.com/docs/mcp/reference/

本頁翻譯自 Google Stitch 官方文件，原文版權歸 Google LLC 所有。本站為獨立第三方翻譯，與 Google 無關聯。

← 上一頁快速上手