SuperAPI AI 工具集

stitch-uview-components

前端与建站

查看项目

更新于 10-16 09:49

技能介绍

用途:把 Stitch 设计稿转换为 uni-app + Vue 2 + uView 2.0 的页面和组件。仅当用户明确提到 Stitch,且要求转换为 uni-app + Vue 2 + uView 2.0(pages/、components/、.vue、u-* 组件)时使用。

主要能力:通过 Stitch MCP 或 stitch-mcp-get-screen 获取屏幕元数据与 HTML;按 uView 2 组件规范生成模块化页面与组件;提供脚本与资源做可靠抓取与质量检查。

前提条件:Stitch MCP 服务器;uni-app / HBuilderX 或 uni-app 的 Vue CLI(Vue 2);Stitch 项目与屏幕 ID。ID 来源两种方式:从 Stitch 设计 URL 解析 projectId(路径)与 screenId(node-id 查询参数);无 URL 或需浏览时用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现并获取。

检索与联网:先运行 list_tools 发现 Stitch MCP 前缀(如 mcp_stitch__stitch:)。调用 [prefix]:get_screen 传入 projectId 与 screenId(数字 ID)获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与设备类型。高可靠下载 HTML 用 Bash 运行技能脚本:bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html",URL 必须加引号。用 screenshot.downloadUrl 做视觉参考。

架构规则:页面放 pages/,共享组件放 components/,避免单页过大;事件处理与 mixins/utils 放入合适模块;静态文本、图片 URL 与列表移到 data/ 或页面 data;仅用 uView 2(优先框架组件):卡片类块用 u-cell-group + u-cell 或 u-text;提示用 u-text;分隔用 u-line / u-divider。不要用 view/text 加自定义 class(.card、.card-title、.label-optional、.tips-text、.unit)。生成的页面与组件省略第三方许可证头。

执行步骤:确认 uni-app 项目已安装并配置 uView 2(main.js、uni.scss);从设计内容创建或更新数据层(如 data/mockData.js);以 resources/page-template.vue 为基础起草页面,替换占位符并按 contract 使用 uView 2 标签;在 pages.json 注册页面,按需添加 tabBar 或导航;按 resources/architecture-checklist.md 核对,在 HBuilderX 或 CLI 模拟器/设备验证。

集成:用 stitch-mcp-get-screen 获取屏幕。若 Stitch 用 stitch-ui-design-spec-uview 约束生成,映射到 uni-app 页面与 uView 2 组件;若从 Stitch HTML 转换,用 references/tailwind-to-uview.md 把 Tailwind 工具类映射到 rpx/主题,再用 references/contract.md 查组件 API。若项目有 DESIGN.md,映射到 uView token 时对齐其颜色与间距。

示例:Stitch HTML 中 div.rounded-lg.shadow 映射为 u-cell-group,原生 button 映射为 u-button type="primary",Tailwind px 映射为 rpx。

限制:仅在用户明确提及 Stitch 的转换场景使用;其他资料未提供的功能、收费、价格与平台支持暂未提供。