用途:把 Stitch 屏幕设计转换为 uni-app + Vue 3 + uview-plus 的模块化页面与共享组件。仅在用户明确提到 Stitch 且目标为 uview-plus(up-* 组件)时使用。
主要能力:通过 Stitch MCP(get_screen)获取设计 JSON、HTML 下载地址、截图与尺寸;用 up-* 组件重建页面,默认使用 up-* 而非 u-;覆盖 up-status-bar、up-safe-bottom、up-popup、up-upload、up-subsection、up-tabbar、up-empty、up-gap、up-line 等;优先使用 var(--up-) 与运行时主题配置,而非硬编码颜色;强调页面外壳、安全区与底部 CTA 处理。
使用方式:前置条件为 Stitch MCP Server、Vue 3 的 uni-app/HBuilderX 或 Vue CLI 项目、已安装并接入 uview-plus。解析 projectId 与 screenId(可从 Stitch URL 的 /projects/{id} 与 node-id 查询参数获取,或用 stitch-mcp-list-projects、stitch-mcp-list-screens)。下载 HTML 可用:bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"。随后按页面外壳、共享组件、抽取静态数据的方式重建,并对照架构检查清单验证。
适用场景:Stitch 设计稿转 uview-plus 页面、顶部标签、分段筛选、选择器、弹层、上传、底部导航、空状态、分隔与安全区等。
限制:不生成 u-* 标签;不适用于非 uview-plus 目标;需用户明确提及 Stitch;测试由用户命令触发,不主动调用 MCP;具体组件 API 与主题细节以官方文档为准,资料未提供完整 API 细节。