SuperAPI AI 工具集

stitch-ui-vue-vant-components

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:仅在用户明确提到“Stitch”并需要把 Stitch 屏幕转换为 Vue 3 + Vant 4(Vite、.vue SFC、移动优先)时使用。

主要能力:通过 Stitch MCP 的 get_screen 获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与设备类型;用脚本可靠下载 HTML;按模块拆分 .vue 文件,逻辑放入 src/composables/ 或 script setup,静态文本与图片放入 src/data/mockData.js;强制使用 Vant 4 组件(如 van-cell-group、van-field、van-button、van-nav-bar、van-tabbar、van-card、van-submit-bar),移动优先 375px 基准、安全区与 flex 布局。

使用方式:先运行 list_tools 找到 MCP 前缀,再由 projectId 与 screenId 构造 projects/{project}/screens/{screen} 调用 get_screen;无 URL 时用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现 ID。下载 HTML 用 bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html",URL 需加引号。项目无 node_modules 时运行 npm install,创建数据层、以 resources/component-template.vue 起草组件、接入 App.vue 或路由,按 resources/architecture-checklist.md 检查并运行 npm run dev 在移动视口验证。

适用场景:Stitch 设计稿转 Vue 3 + Vant 4 移动端页面;若 Stitch 由 stitch-ui-contract-vant 生成,映射到 Vue SFC 与 Vant 4;从 Stitch HTML 转换时参考 references/tailwind-to-vant.md 与 references/contract.md;项目有 DESIGN.md 时对齐颜色与间距。

限制:仅限明确提及 Stitch 的场景;需 Stitch MCP Server、Node.js 与 npm;AI 抓取工具可能无法下载 Google Cloud Storage URL,需用脚本;写入、发布等不可逆动作需用户授权;缺失证据标记为 NOT_VERIFIED;不编造未提供的功能、收费或平台信息。