参考

#工具分类只读
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 设计和前端代码的容器。

注解

destructive

输入

{
  "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 项目的详细信息。

注解

readOnly

输入

{
  "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 项目。默认情况下,列出用户拥有的项目。

注解

readOnly

输入

{
  "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 项目中的所有屏幕。

注解

readOnly

输入

{
  "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

获取项目中指定屏幕的详细信息。

注解

readOnly

输入

{
  "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 再次调用。

注解

destructive

输入

{
  "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 查看。

注解

destructive

输入

{
  "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

为现有屏幕生成设计变体。

注解

destructive

输入

{
  "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

为项目创建新的设计系统,建立适用于所有屏幕的基础设计令牌(颜色、字体排印、形状、外观)。

注解

destructive

输入

{
  "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 字段识别资产。

注解

destructive

输入

{
  "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 schema。

输出

返回更新后的设计系统 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,则列出全局设计系统)。

注解

readOnly

输入

{
  "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

将设计系统应用到一个或多个屏幕,调整其外观以匹配该系统的令牌(颜色、字体、形状)。

注解

destructive

输入

{
  "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 创建设计系统。

注解

destructive

输入

{
  "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 之后调用。

注解

destructive

输入

{
  "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 schema。

输出

返回带有 assetId 的 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该屏幕是否由重混功能创建。
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 无关联。