SuperAPI AI 工具集

stitch-ui-uviewpro-components

前端与建站

查看项目

更新于 10-16 05:48

技能介绍

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

主要能力:通过 Stitch MCP 的 get_screen 获取屏幕元数据与 HTML;用脚本可靠下载 HTML;按 uView Pro 组件契约生成模块化页面与共享组件,逻辑隔离在 script setup,静态文本与图片地址抽到 data/。

使用方式:先确认已安装并配置 uView Pro(Vue 3、main.js、uni.scss)。解析 Stitch 设计 URL 得到 projectId 与 screenId,或调用 list_projects、list_screens 获取 ID;用 name: projects/{project}/screens/{screen} 调用 get_screen。下载 HTML 用 bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html",URL 需加引号。生成前阅读 references/component-index.md 与 references/contract.md,参考 examples/usage.md;在 pages.json 注册页面。

组件规则:按钮、输入、弹窗等优先用 u-* 组件,不用原生 button/input/div;卡片用 u-card 或 u-section,提示用 u-text,分隔用 u-line/u-divider,标签页必须用 u-tabs。Picker 用 v-model 与一维 :range,Radio 用 value 与 label,插槽用 #label、#suffix 或 v-slot。

适用场景:Stitch 设计稿转 uni-app 页面、表单、导航与列表等。限制:需 Stitch MCP 与 uni-app 环境;不适用于非 Stitch 或非 uView Pro 项目;生成后需在 HBuilderX 或 CLI 于模拟器/真机验证。部分细节(如具体版本、收费)暂未提供。