SuperAPI AI 工具集

stitch-mcp-get-screen

智能体与模型

查看项目

更新于 10-15 21:49

技能介绍

用途:获取某个 Stitch 屏幕的完整输出,返回 HTML 源码下载地址、截图下载地址、Figma 导出地址、宽高与设备类型,作为 Stitch 设计转框架代码之间的取件环节。

使用前提:仅在用户明确提到 Stitch 时使用。若已同时拥有 projectId 和 screenId,直接调用本技能,不要先调用 get_project。典型场景:list_screens 返回 screenId 之后;用户给出 Stitch 屏幕 URL 并希望转成代码;为 Next.js、Svelte、HTML、React Native、SwiftUI 等转换技能准备素材。

用法:先从上下文解析 ID。projects/123/screens/456 或 https://stitch.withgoogle.com/projects/123?node-id=456 均解析为 projectId=123、screenId=456;若已分别知道两个数字 ID 则直接使用。调用 get_screen 时需同时传三个参数:name 为完整资源路径 projects/.../screens/...,projectId 与 screenId 为裸 ID(不带前缀)。name 虽为当前标识且必填,projectId 与 screenId 虽标记为弃用但仍必须提供。

下载 HTML:AI 抓取工具常无法处理 Google Cloud Storage 链接,应使用脚本 bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html",URL 需加引号以处理特殊字符。

后续路由:先看 deviceType。DESKTOP 可建议 Next.js、Svelte、HTML;MOBILE 可建议 Next.js(PWA)、Svelte、HTML、React Native、SwiftUI;AGNOSTIC 任意。再按用户意图加载对应技能:Next.js 用 stitch-nextjs-components,Svelte 用 stitch-svelte-components,HTML/PWA/Capacitor/Ionic 用 stitch-html-components,React Native/Expo 用 stitch-react-native-components,SwiftUI 用 stitch-swiftui-components,提取设计系统用 stitch-design-system;仅看截图则展示 screenshot.downloadUrl。未指定框架时,桌面设计询问 Next.js、Svelte 或 HTML,移动设计询问 React Native、SwiftUI 或 HTML(Capacitor)。

限制:资料未提供收费、价格、平台支持范围与效果保证等信息。