stitch-mcp-get-screen

Name: stitch-mcp-get-screen
Author: gabelul

github.com/gabelul设计与 UI4771 次安装14 周前更新

代码仓库

关于 stitch-mcp-get-screen

stitch-mcp-get-screen 是用于 Stitch 工作流的技能，可按项目和屏幕 ID 获取生成页面的 HTML 与截图链接，供后续框架转换使用。仅在用户明确提到 Stitch 时使用。

主要功能

01获取屏幕 HTML 与截图链接
02解析项目及屏幕 ID
03按设备类型选择转换方向
04提供 HTML 下载脚本

适用场景

01从 Stitch 屏幕链接提取页面资源
02为 Next.js 或 Svelte 转换获取输入
03查看生成屏幕的截图
04获取设计系统提取所需素材

MCP 相关

通过 MCP 的 get_screen 工具读取 Stitch 屏幕，返回 HTML 与截图的下载 URL。调用时需要完整资源路径及单独的 projectId 和 screenId。

安装

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

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-get-screen

安装后在 Claude Code 中输入/stitch-mcp-get-screen确认已加载。

附带文件scripts/fetch-stitch.sh

详细介绍

Stitch MCP — 获取屏幕

获取 Stitch 生成屏幕的完整输出：HTML 源代码 URL 和屏幕截图图片 URL。这是 Stitch 设计与框架转换之间的入口。

关键前提

仅当用户明确提到“Stitch”时，才使用此技能。

如果你已经同时拥有 projectId 和 screenId，请直接调用此工具——不要先调用 get_project。

使用时机

list_screens 返回 screenId 后
用户提供 Stitch 屏幕 URL，并希望将其转换为代码
为任何转换技能获取资源：Next.js、Svelte、HTML、React Native 或 SwiftUI

步骤 1：从上下文解析 ID

用户可能会以不同格式提供屏幕引用：

输入格式	→ projectId	→ screenId
`projects/123/screens/456`	`123`	`456`
`https://stitch.withgoogle.com/projects/123?node-id=456`	`123`	`456`
已知的独立数字 ID	原样使用	原样使用

步骤 2：调用 MCP 工具

get_screen 正在进行迁移：name 是当前标识符，且需要完整资源路径；projectId 和 screenId 已标记为弃用，但仍然必需。请传入这三项。

{
  "name": "get_screen",
  "arguments": {
    "name": "projects/3780309359108792857/screens/88805abc123def456",
    "projectId": "3780309359108792857",
    "screenId": "88805abc123def456"
  }
}

各字段的前缀规则不同，这正是此封装存在的原因：

✅ name:      "projects/3780309359108792857/screens/88805abc123def456"
❌ name:      "88805abc123def456"

✅ projectId: "3780309359108792857"
❌ projectId: "projects/3780309359108792857"

✅ screenId:  "88805abc123def456"
❌ screenId:  "screens/88805abc123def456"

name 是完整路径；另外两项不带前缀。省略 name 会导致失败——即使已弃用的那两个参数仍然必需，name 也不可或缺。

输出架构

{
  "name": "projects/3780309359108792857/screens/88805abc123def456",
  "htmlCode": {
    "downloadUrl": "https://storage.googleapis.com/stitch-output/..."
  },
  "screenshot": {
    "downloadUrl": "https://storage.googleapis.com/stitch-screenshots/..."
  },
  "figmaExport": {
    "downloadUrl": "https://storage.googleapis.com/stitch-figma/..."
  },
  "width": 390,
  "height": 844,
  "deviceType": "MOBILE"
}

步骤 3：可靠地下载 HTML

AI 获取工具经常无法处理 Google Cloud Storage URL。请使用 bash 脚本：

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"

务必将 URL 括在引号中，以处理特殊字符。

步骤 4：确定框架并选择转换路径

获取屏幕后，确认用户想如何使用它。

先检查响应中的 deviceType——它会影响建议的选项：

`deviceType`	建议的合理默认选项
`DESKTOP`	Next.js、Svelte、HTML
`MOBILE`	Next.js（PWA）、Svelte、HTML、React Native、SwiftUI
`AGNOSTIC`	任意

然后根据用户意图选择路径：

用户意图	→ 加载技能
“转换为 Next.js”、“React 应用”、“App Router”	`stitch-nextjs-components`
“转换为 Svelte”、“SvelteKit”	`stitch-svelte-components`
“转换为 HTML”、“PWA”、“Capacitor”、“Ionic”、“Web 应用”	`stitch-html-components`
“React Native”、“Expo”、“iOS 和 Android”、“跨平台”	`stitch-react-native-components`
“SwiftUI”、“Xcode”、“原生 iOS”、“仅 iOS”	`stitch-swiftui-components`
“提取设计系统”、“获取颜色/字体”	`stitch-design-system`
“只给我看屏幕截图”	展示 `screenshot.downloadUrl`
未提及框架，且是桌面设计	询问：Next.js、Svelte 还是 HTML？
未提及框架，且是移动设计	询问：React Native、SwiftUI 还是 HTML（Capacitor）？

参考资料

scripts/fetch-stitch.sh — 可靠的 GCS HTML 下载器

支持 Markdown

登录后评论