SuperAPI AI 工具集

stitch-mcp-get-screen

前端与建站

查看项目

更新于 10-16 03:15

技能介绍

用途:在用户明确提到“Stitch”时才可调用本技能,用于获取某个具体 Stitch 屏幕(screen)的完整详情,包括 HTML 代码、高分辨率截图下载地址、Figma 导出资源,以及 width、height、deviceType 等元数据。典型场景是用户要求“导出”代码、查看完整设计细节,或代理需要分析生成的 HTML 结构,并进一步做设计到代码(如框架转换)处理。

必要输入:projectId(必填,纯 ID,不带 projects/ 前缀)和 screenId(必填,纯 ID,不带 screens/ 前缀)。当两个 ID 都已具备时,应直接调用 stitch-mcp-get-screen,不要调用 stitch-mcp-get-project。

资源路径解析:若用户给出路径或 URL,按 web application/stitch/projects/{projectId}/screens/{screenId} 或 projects/{projectId}/screens/{screenId} 格式,从路径段中提取 projectId 与 screenId。例如 web application/stitch/projects/3492931393329678076/screens/2e22a9fb99ba49ddb6ce8907a1e74d60 对应 projectId="3492931393329678076",screenId="2e22a9fb99ba49ddb6ce8907a1e74d60"。

执行流程:识别输入格式,提取两个 ID,调用 get_screen,参数为 {"projectId": "<extracted projectId>", "screenId": "<extracted screenId>"},然后使用返回的 htmlCode.downloadUrl、screenshot.downloadUrl 和 metadata。

输出:返回 Screen 对象,含 htmlCode(UI 的 HTML/CSS 代码)、screenshot(高分辨率图片 URL)、figmaExport(Figma 文件资源)、width、height、deviceType。

意图识别与框架转换:获取 HTML 后,若用户请求暗示转换为特定前端框架,需识别关键词并加载对应技能规则。提到 uView、uViewPro 或 UniApp 时,必须加载 stitch-uviewpro-components 的完整上下文;提到 uView(非 Pro)或 uView 2.0 加载 stitch-uview-components;Element Plus/Element/Vue Desktop 加载 stitch-vue-element-components;Vant/Vue Mobile 加载 stitch-vue-vant-components;Layui 加载 stitch-vue-layui-components;Bootstrap 加载 stitch-vue-bootstrap-components;React 加载 stitch-react-components;Shadcn/Next.js/Radix 加载 stitch-shadcn-ui;其他框架查找匹配的 stitch-*-components 技能并加载其 api、examples、references。随后按目标框架技能中的组件映射、插槽用法、单位换算等规则,把 Stitch 原始 HTML 转换为目标框架代码。

限制:仅在用户明确提及 Stitch 时使用;projectId 与 screenId 需为纯 ID,不带前缀;具体可用框架转换技能与目录内容以资料所列为准,其余未提供。