SuperAPI AI 工具集

stitch-ui-uview-plus-components

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:把 Stitch 屏幕设计转换为 uni-app + Vue 3 + uview-plus 的模块化页面与共享组件。仅在用户明确提到 Stitch 且目标为 uni-app + Vue 3 + uview-plus(up-* 组件)时使用。

主要能力:通过 Stitch MCP(或 stitch-mcp-get-screen)获取设计元数据与 HTML,再用 up-* 组件、rpx 和当前 uview-plus 主题/运行时模型重建页面。默认输出 up-* 而非 u-,覆盖 up-status-bar、up-safe-bottom、up-popup、up-upload、up-subsection、up-tabbar、up-empty、up-gap、up-line 等,优先使用 --up- CSS 变量与运行时主题配置而非硬编码颜色。

使用方式:需准备 Stitch MCP Server、Vue 3 的 uni-app/HBuilderX 或 Vue CLI 项目、已接入的 uview-plus,以及 Stitch 项目与屏幕 ID(可从设计 URL 解析 projectId 与 screenId,或用 stitch-mcp-list-projects、stitch-mcp-list-screens 浏览)。获取屏幕元数据后下载 HTML:bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"。随后按页面外壳、共享组件、抽离数据的方式重建,参考 resources/page-template.vue 与架构检查清单。

适用场景:Stitch 设计稿转 uview-plus 页面、顶部标签/分段筛选/选择器/弹层/上传/底部导航/空状态/分隔间距/安全区/自定义头部/主题等元素的框架原生重建。

限制:不生成 u-* 标签;不适用于非 uview-plus 目标;写入、发布等动作需用户授权;测试由用户命令触发。官方文档见 uview-plus.jiangruyi.com。