SuperAPI AI 工具集

stitch-uviewpro-components

前端与建站

查看项目

更新于 10-16 03:15

技能介绍

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

主要能力:通过 Stitch MCP 获取屏幕元数据与 HTML;按模块拆分页面与共享组件;使用 uView Pro 组件(u-card、u-text、u-line、u-tabs、u-picker、u-radio 等)替代原生 HTML;提供组件索引、映射契约、Tailwind 到 uView Pro 样式转换、Stitch HTML 模式等参考;附带架构检查清单与页面模板。

使用方式:先确保 uni-app 项目已安装并配置 uView Pro(Vue 3、main.js、uni.scss)。用 list_tools 发现 MCP 前缀;从 Stitch 设计 URL 解析 projectId 与 screenId,或用 list_projects、list_screens 获取;调用 get_screen 取得设计 JSON 与下载地址。HTML 下载建议用脚本:bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"(URL 需加引号)。随后按契约生成页面,在 pages.json 注册,并用 HBuilderX 或 CLI 在模拟器/真机验证。

适用场景:Stitch 设计稿到 uni-app + uView Pro 的页面/组件转换,含表单、导航、列表、反馈等常见界面。

限制:必须显式提及 Stitch;需 Stitch MCP Server 与 uni-app 环境;组件映射须遵循契约,避免使用原生 button/input/div 替代 u-* 组件;Picker 用 v-model 与一维 :range,Radio 用 value 与 label,插槽用 #name 或 v-slot:name;生成页面省略第三方许可证头。具体收费、价格与效果资料暂未提供。