前置环境：
- 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
- 安装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
- 双重身份验证（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图
- 在Stitch中选择要抓取的图，点击【More】-【导出】
- 在导出对话框中选择【MCP】，点击【复制提示】获得AI提示词。
- 打开终端，进入项目路径，最终抓取的内容是一张截图 + 一个html文件，这里建议再建一个文件夹，进入文件夹后执行
claude开启Claude Code。将上一步复制的提示词发送，等待抓取完成······ 抓取完成后页面如下，至此得到了html代码。
