SuperAPI AI 工具集

stitch-ui-uview2-components

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:把 Stitch 设计稿转换为 uni-app + Vue 2 + uView 2.0 的页面与组件。仅在用户明确提到“Stitch”并需要转换到 uni-app + Vue 2 + uView 2.0(pages/、components/、.vue、u-* 组件)时使用。

主要能力:通过 Stitch MCP 的 get_screen 获取屏幕元数据与 HTML;用技能内脚本可靠下载 HTML;按契约把设计映射为 uView 2 组件;强制模块化页面/组件结构、逻辑隔离与数据解耦。

使用方式:先确认 Stitch MCP Server、uni-app/HBuilderX 或 Vue CLI(Vue 2)环境,并安装配置 uView 2(main.js、uni.scss)。获取 projectId 与 screenId:可从 Stitch 设计 URL 解析(projectId 在路径、screenId 在 node-id 查询),或用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现。运行 list_tools 找到 MCP 前缀,构造 name: projects/{project}/screens/{screen} 调用 get_screen。下载 HTML 用:bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"(URL 需加引号)。以 resources/page-template.vue 为基础,在 pages.json 注册页面,按 resources/architecture-checklist.md 自检。

适用场景:Stitch 设计转 uni-app 页面、组件拆分、Tailwind 转 uView(参考 references/tailwind-to-uview.md 与 references/contract.md)、有 DESIGN.md 时对齐设计系统。

限制:仅限 Stitch 到 uni-app + Vue 2 + uView 2.0;不适用于其他框架或版本。写入、发布等不可逆动作需用户授权。资料未提供具体收费、价格与效果数据。