stitch::upload-to-stitch

Name: stitch::upload-to-stitch
Author: google-labs-code

github.com/google-labs-code设计与 UI8.6k10.1k 次安装10 周前更新

代码仓库

关于 stitch::upload-to-stitch

该技能通过脚本将本地图片、网页稿和文档上传到 Stitch 项目，适用于需要绕过 MCP 输出编码限制的设计工作流。上传前要求确认文件并提供有效 API 密钥。

主要功能

01上传图片、HTML 和 Markdown 文件
02通过 HTTP 直接发送本地文件
03按扩展名识别 MIME 类型
04支持设置屏幕标题和生成来源

适用场景

01将本地设计稿添加到 Stitch 项目
02上传提取的网页 HTML 页面
03避免大型文件的 Base64 输出限制

MCP 相关

依赖 Stitch MCP 的 list_projects 查找项目，并从 MCP 配置中读取 API 密钥；实际文件传输由脚本通过 HTTP 完成。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::upload-to-stitch

安装后在 Claude Code 中输入/stitch::upload-to-stitch确认已加载。

附带文件scripts/upload_to_stitch.py

详细介绍

上传到 Stitch

使用提供的上传脚本，将本地资源（图像、模型图、HTML 和 markdown 文件）上传到 Stitch 项目。该脚本可绕过 MCP 工具的 base64 输出令牌限制。

说明

AI 模型无法直接通过 MCP 工具上传文件，因为即使是很小的文件，其 base64 编码也会超出模型的输出令牌限制（约 16K 个令牌）。此脚本会读取文件并通过 HTTP 直接发送。

步骤

1. 确定目标项目

使用 list_projects 查找正确的 projectId。

2. 获取 API 密钥

找到当前 MCP 服务的配置文件并提取 API 密钥：

Antigravity：.gemini/antigravity/mcp_config.json 或 .gemini/jetski/mcp_config.json
Gemini CLI：~/.gemini/settings.json 或 ~/.gemini/extensions/Stitch/gemini-extension.json
Claude Code：~/.claude.json

提取：

API 密钥：从 X-Goog-Api-Key 标头或身份验证参数中获取
MCP URL（可选）：从 httpUrl 或 endpoint 参数中获取（默认为 https://stitch.googleapis.com）

重要

如果在上述任何位置都找不到 API 密钥，或者无法访问这些文件，则必须要求用户提供 Stitch API 密钥。没有有效的 API 密钥时，不要继续操作。

3. 运行上传脚本

警告

检查点 — 需要用户确认。 运行上传脚本前，必须暂停并向用户列出要上传的文件（路径、大小和类型），然后等待用户明确批准。在用户确认前，不要执行上传脚本。

使用 run_command 执行 Python 脚本：

python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]

提示

macOS / SSL 证书故障排查： 如果上传失败并显示 ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] unable to get local issuer certificate，这表示你的 Python 安装尚未配置根证书颁发机构。

如果 Python 环境中已安装 certifi，脚本会自动尝试使用该软件包加载 CA 证书包。如果未安装 certifi，你可以安装它（pip install certifi），也可以在运行脚本时手动提供 SSL_CERT_FILE 环境变量：
SSL_CERT_FILE=$(python3 -c "import certifi; print(certifi.where())") python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]

支持的文件类型

扩展名	MIME 类型
`.png`	`image/png`
`.jpg`、`.jpeg`	`image/jpeg`
`.webp`	`image/webp`
`.html`、`.htm`	`text/html`
`.md`	`text/markdown`

脚本会根据文件扩展名自动检测 MIME 类型。

脚本选项

--project-id：必填。Stitch 项目 ID。
--file-path：必填。要上传的本地文件路径。
--api-key：必填。用于 Stitch 授权的 API 密钥。
--api-url：可选。Stitch API 的基础 URL。默认为 https://stitch.googleapis.com。
--title：可选。上传屏幕的标题。上传从 Web 应用中提取的 HTML 时，将其设置为页面的路由路径（例如 '/dashboard'、'/settings/profile'、'/inbox'），以便 Stitch 中的屏幕名称/标题能清楚地标识该路由。
--generated-by：可选。指定上传文件的生成方式（例如 'stitch::extract-static-html' skill、'Claude Code'、'Codex'、'Gemini' 等）。

支持 Markdown

登录后评论