stitch-vue-layui-components

用途 该技能面向前端工程师，用于把 Stitch 设计转换为整洁、模块化的 Vue 3 + Layui-Vue 代码。仅当用户明确提到“Stitch”且目标是转换为 Vue 3 + Layui-Vue（Vite、.vue SFC）时才使用。

主要能力

1. 通过 Stitch MCP（或 stitch-mcp-get-screen）获取屏幕元数据与 HTML。
2. 使用技能内置脚本与资源进行可靠的抓取与质量检查。
3. 将设计拆分为独立 .vue 文件，避免单个巨型 SFC。
4. 把事件处理器与 composable 隔离到 src/composables/ 或 script setup 中。
5. 将静态文本、图片 URL、列表等数据解耦到 src/data/mockData.js（或 .ts）。
6. 仅使用 Layui-Vue 框架组件：卡片用 lay-card，分割线用 lay-divider；不使用 div.card 或自定义 .card-header/.tips-text。按 references/contract.md 使用 lay-btn、lay-input、lay-card、lay-page-header、lay-result 等组件，并遵循 Layui 颜色令牌与圆角（2px/4px）。

前置条件

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

使用方式

1. 发现 Stitch MCP 前缀：运行 list_tools 找到前缀（例如 mcp_stitch__stitch:）。
2. 获取屏幕元数据：调用 [prefix]:get_screen，传入 projectId 与 screenId（数字 ID），获得设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸、deviceType。
3. 高可靠 HTML 下载：AI fetch 工具可能在 Google Cloud Storage URL 上失败，需使用 Bash 运行技能脚本： bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html" 确保 URL 加引号。
4. 视觉参考：使用 screenshot.downloadUrl 确认布局与细节。

执行步骤

1. 环境：若项目没有 node_modules，运行 npm install。
2. 数据层：根据设计内容创建 src/data/mockData.js。
3. 组件起草：以 resources/component-template.vue 为基础，替换占位符为真实组件名，并按 contract 使用 Layui-Vue 标签。
4. 接线：更新应用入口（如 App.vue 或路由）以渲染新组件。
5. 质量检查：对照 resources/architecture-checklist.md 验证；运行 npm run dev 确认视觉效果。

集成方式

• 获取屏幕：使用 stitch-mcp-get-screen 并传入 projectId 与 screenId。ID 可通过解析 Stitch 设计 URL 获得，或当无 URL/用户需要浏览选择时使用 stitch-mcp-list-projects 与 stitch-mcp-list-screens。
• 设计规格：若 Stitch 是在 stitch-ui-design-spec-layui 约束下生成的，映射到 Vue SFC 与 Layui-Vue 组件。若从 Stitch HTML（如 get_screen htmlCode）转换，使用 references/tailwind-to-layui.md 处理 Tailwind 工具类到 px/主题（仅 2px/4px 圆角），再按 references/contract.md 处理组件 API。
• 设计系统：若项目有 DESIGN.md（来自 stitch-design-md），映射到 Layui 令牌时对齐颜色与间距。

适用场景

• 需要把 Stitch 设计稿转为 Vue 3 + Layui-Vue 组件的项目。
• 希望生成模块化、数据解耦、符合 Layui-Vue 组件规范的前端代码。

限制

• 仅当用户明确提到“Stitch”且目标为 Vue 3 + Layui-Vue 时使用。
• 必须使用 Layui-Vue 组件，不能使用 div.card 或自定义 .card-header/.tips-text。
• 生成组件时省略第三方许可证头。
• AI fetch 工具可能在 Google Cloud Storage URL 上失败，需使用脚本下载。

故障排查

• 抓取错误：在 bash 命令中给 URL 加引号；确保 scripts/fetch-stitch.sh 可执行。
• 组件映射：按 references/contract.md 处理按钮（layui-btn）、输入（layui-input）、卡片（layui-card）、表格（layui-table）、page-header、result、skeleton、timeline、space。

关键词 英文：Stitch, Vue 3, Layui, Layui-Vue, Vite, layui-btn, lay-card。 中文：Stitch、Vue 3、Layui、组件。