SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场stitch-uview-components

stitch-uview-components

前端与建站

查看项目

更新于 10-16 07:54

技能介绍

用途

本技能面向前端工程师，用于把 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。
  • 使用技能内脚本与资源进行可靠抓取和质量检查。
  • 将设计拆分为 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）。
  • 生成页面/组件时省略第三方许可证头。

使用方式

前置条件

  • Stitch MCP Server（https://stitch.withgoogle.com/docs/mcp/guide/）
  • uni-app / HBuilderX 或用于 uni-app（Vue 2）的 Vue CLI
  • Stitch 项目与屏幕 ID，获取方式有两种：(1) 从 Stitch 设计 URL 解析 projectId（路径）和 screenId（node-id 查询参数）；(2) 无 URL 或需要浏览时，使用 stitch-mcp-list-projects 和 stitch-mcp-list-screens 发现并获取 ID。

检索与网络

  • 发现 Stitch MCP 前缀：运行 list_tools 找到前缀（例如 mcp_stitch__stitch:）。

  • 获取屏幕元数据：调用 [prefix]:get_screen，传入 projectId 和 screenId（数字 ID），获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸、deviceType。

  • 高可靠 HTML 下载：AI 抓取工具可能在 Google Cloud Storage URL 上失败。使用 Bash 运行技能脚本：

    bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"

    确保 URL 带引号。

  • 视觉参考：使用 screenshot.downloadUrl 确认布局与细节。

执行步骤

  1. 环境：确保 uni-app 项目已安装并配置 uView 2（main.js、uni.scss）。
  2. 数据层：根据设计内容创建或更新数据源（例如 data/mockData.js）。
  3. 页面草稿：以 resources/page-template.vue 为基础；按 contract 替换占位符为真实页面名和 uView 2 标签。
  4. 接线：在 pages.json 中注册页面；按需添加 tabBar 或导航。
  5. 质量检查：对照 resources/architecture-checklist.md 验证；在 HBuilderX 或 CLI 中运行，在模拟器/设备上确认。

与本仓库集成

  • 获取屏幕：使用 stitch-mcp-get-screen 传入 projectId 和 screenId。可通过解析 Stitch 设计 URL 获取 ID，或在无 URL 或用户需要浏览/选择时使用 stitch-mcp-list-projects 和 stitch-mcp-list-screens。
  • 设计规范：如果 Stitch 是使用 stitch-ui-design-spec-uview 约束生成的，则映射到 uni-app 页面和 uView 2 组件。如果从 Stitch HTML（例如 get_screen htmlCode）转换，使用 references/tailwind-to-uview.md 将 Tailwind 工具类映射为 rpx/主题，然后使用 references/contract.md 了解组件 API。
  • 设计系统：如果项目有 DESIGN.md（来自 stitch-design-md），在映射到 uView token 时对齐颜色和间距。

适用场景

  • 用户明确提到“Stitch”并需要将 Stitch 屏幕转换为 uni-app + Vue 2 + uView 2.0 页面或组件。
  • 需要模块化拆分页面与共享组件、逻辑隔离、数据解耦的前端工程。
  • 需要遵循 uView 2 组件契约进行布局、表单、导航、列表、反馈等映射。

限制

  • 仅在用户明确提到“Stitch”并需要转换为 uni-app + Vue 2 + uView 2.0 时使用。
  • 仅使用 uView 2 组件，不使用 view/text + 自定义 class 模拟卡片等。
  • 生成页面/组件时省略第三方许可证头。
  • 抓取错误时：在 bash 命令中给 URL 加引号；确保 scripts/fetch-stitch.sh 可执行。
  • 组件映射需遵循 references/contract.md：布局（u-row、u-col）、表单（u-form、u-input）、导航（u-navbar、u-tabs）、列表（u-swipe-action）、反馈（u-toast、u-modal）。

关键词

英文：Stitch, uni-app, uView, uView 2, Vue 2, u-button, u-navbar。 中文：Stitch、uni-app、uView、uView 2、组件。

参考

  • 示例
  • 脚本
  • 组件索引（各组件文档链接）
  • Tailwind → uView 2 — 从 Stitch HTML 转换时的 Tailwind 工具类 → rpx/主题。
  • Contract（uView 2 映射）
  • 组件 API（props/events 快速参考）
  • 官方文档
  • 架构检查清单
  • 页面模板
  • Stitch API / MCP