SuperAPI AI 工具集

stitch-uview-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 获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与设备类型;用脚本可靠下载 HTML;按 uView 2 契约映射组件(如 u-cell-group、u-text、u-line、u-row/u-col、u-form、u-navbar、u-tabs、u-swipe-action、u-toast、u-modal);将 Tailwind 工具类映射为 rpx/主题;拆分页面与共享组件,隔离逻辑,解耦静态数据。

使用方式:先确认已安装并配置 uView 2(main.js、uni.scss);用 list_tools 找到 MCP 前缀,构造 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 自检并在 HBuilderX 或 CLI 运行验证。项目 ID 与屏幕 ID 可从 Stitch 设计 URL 解析,或用 stitch-mcp-list-projects、stitch-mcp-list-screens 获取。

适用场景:Stitch 设计稿转 uni-app 页面、组件库映射、Tailwind 到 uView 主题转换。

限制:仅限 Vue 2 与 uView 2;需 Stitch MCP 与项目/屏幕 ID;AI 抓取工具可能无法下载 Google Cloud Storage URL,需改用脚本;生成页面/组件省略第三方许可证头;若项目有 DESIGN.md 需对齐其颜色与间距;具体收费、价格与平台支持暂未提供。