SuperAPI AI 工具集

stitch-vue-vant-components

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:将 Stitch 设计稿转成干净、模块化的 Vue 3 + Vant 4 移动端组件,基于 Vite 与 .vue 单文件组件。仅在用户明确提到“Stitch”并需要转换为 Vue 3 + Vant 4(Vite、移动优先)时使用。

主要能力:通过 Stitch MCP(或 stitch-mcp-get-screen)获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与设备类型;用 Bash 脚本处理 Google Cloud Storage 下载失败的高可靠抓取;按契约映射到 van-button、van-field、van-nav-bar、van-cell-group、van-card、van-submit-bar 等 Vant 4 组件;将静态文本、图片 URL、列表抽到 src/data/mockData.js;把事件与组合式逻辑隔离到 src/composables/。

使用方式:前置需 Stitch MCP Server、Node.js 与 npm。先运行 list_tools 找到 MCP 前缀,再用 projects/{project}/screens/{screen} 构造名称调用 get_screen。无 URL 时可用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现 ID。可靠下载命令: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 在移动视口确认。若存在 DESIGN.md,映射 Vant token 时对齐其颜色与间距;Tailwind 工具类转 px/主题参考 references/tailwind-to-vant.md,组件 API 参考 references/contract.md。

限制:触发条件严格,仅限明确提到 Stitch 的转换请求。下载失败时应给 URL 加引号并确保脚本可执行。生成组件按项目要求省略第三方许可证头。运行结果、资源 ID、版本等在缺失时标记为未验证;写入、付费、发布等不可逆动作需明确授权。

暂未提供:具体收费、平台支持范围、性能指标与效果承诺等资料未在给定内容中说明。