Claude Code 抓取 Stitch UI

前置环境：

• Claude Code 需配置好模型等内容，下载方法见链接内。
• Google 账号（PC注册如果卡在手机验证环节可以使用手机注册，可以通过验证）。

UI产物：

• Stitch 项目。如果使用非项目创建者的Google账户访问项目，需要项目创建者启用项目共享。

启用项目共享操作：

注意：非项目创建者的Google账户访问项目刷新后可能会展示“此页面不存在，或未与您共享”的提示，需要项目创建者再次开启共享即可访问。

配置MCP

官方参考文档，步骤标题括号中的内容为官方文档的标题。

1. 获取API key（Storing API Keys）

项目名称左侧更多 - 设置 - API密钥（如果没有就先点击【创建密钥】），隐藏显示，点击复制按钮复制。API key不以项目做区分，一个账户一个API key。

2. MCP客户端设置（MCP Client Setup）

在终端执行：

在终端执行：

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user

3. 鉴权设置（OAuth Setup）

这里需要用到 Project ID，项目链接中 projects/ 后的数字即为 Project ID

1. 安装Google Cloud SDK

• 独立安装：

curl https://sdk.cloud.google.com | bash
exec -l $SHELL
export CLOUDSDK_CORE_DISABLE_PROMPTS=1

• Homebrew

brew install --cask google-cloud-sdk

2. 双重身份验证（Double-Layer Authentication）

# 1. User Login (Opens Browser)
gcloud auth login# 2. Application Default Credentials (ADC) Login
# This allows the MCP server to "impersonate" you securely.
gcloud auth application-default login

通过Claude Code抓取UI图

1. 在Stitch中选择要抓取的图，点击【More】-【导出】
2. 在导出对话框中选择【MCP】，点击【复制提示】获得AI提示词。

3. 打开终端，进入项目路径，最终抓取的内容是一张截图 + 一个html文件，这里建议再建一个文件夹，进入文件夹后执行 claude 开启Claude Code。将上一步复制的提示词发送，等待抓取完成······ 抓取完成后页面如下，至此得到了html代码。