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

stitch-vue-bootstrap-components

前端与建站

查看项目

更新于 10-16 07:52

技能介绍

用途

该技能面向前端工程师，用于将 Stitch 设计稿转换为干净、模块化的 Vue 3 + Bootstrap 代码。使用前需满足约束：仅当用户明确提到 “Stitch” 且要求把 Stitch 屏幕转换为 Vue 3 + Bootstrap 时使用，目标技术栈为 Vite、.vue 单文件组件，以及 BootstrapVue Vue 3 支持（@vue/compat）或 BootstrapVueNext（Bootstrap 5 + Vue 3）。

主要能力

  • 通过 Stitch MCP（或 stitch-mcp-get-screen）获取屏幕元数据与 HTML。
  • 支持从 Stitch 设计 URL 解析 projectId（路径）与 screenId（node-id 查询参数）；无 URL 或需要浏览时，使用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现并获取 ID。
  • 使用技能内脚本与资源进行可靠抓取与质量检查。
  • 将设计拆分为独立 .vue 文件，避免单个巨型 SFC。
  • 将事件处理器与组合式函数放入 src/composables/ 或 script setup 内，实现逻辑隔离。
  • 将静态文本、图片 URL 与列表移入 src/data/mockData.js（或 .ts），实现数据解耦。
  • 优先使用框架组件：卡片用 b-card，提示用 b-alert，布局用 b-container、b-row、b-col，按钮用 b-button 等；不直接使用 div.card 或自定义 .card-header/.tips-text，也不在 b-* 适用时使用原生 button class="btn" 或 div class="card"。
  • 支持从 Stitch HTML 转换：使用 references/tailwind-to-bootstrap.md 将 Tailwind 工具类映射为 Bootstrap 工具类/组件，再参考 references/contract.md 处理组件 API。
  • 若项目存在 DESIGN.md（来自 stitch-design-md），映射到 Bootstrap token 时对齐颜色与间距。

使用方式

  1. 环境准备：若项目无 node_modules，运行 npm install。
  2. 通过 list_tools 发现 Stitch MCP 前缀（如 mcp_stitch__stitch:）。
  3. 调用 [prefix]:get_screen，传入 projectId 与 screenId（数字 ID），获取设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与设备类型。
  4. 高可靠下载 HTML：AI 抓取工具可能在 Google Cloud Storage URL 上失败，使用 Bash 运行脚本：bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"，注意 URL 需加引号。
  5. 使用 screenshot.downloadUrl 确认布局与细节。
  6. 创建数据层：根据设计内容创建 src/data/mockData.js。
  7. 草拟组件：以 resources/component-template.vue 为基础，替换占位符为真实组件名，并按 contract 使用 Bootstrap Vue 标签。
  8. 接线：更新应用入口（如 App.vue 或路由）渲染新组件。
  9. 质量检查：对照 resources/architecture-checklist.md 验证，运行 npm run dev 进行视觉确认。

适用场景

  • 将 Stitch 设计稿转换为 Vue 3 + Bootstrap 组件。
  • 从 Stitch HTML（如 get_screen htmlCode）转换，需处理 Tailwind 到 Bootstrap 的映射。
  • 配合 stitch-ui-design-spec-bootstrap 约束生成的设计规格。
  • 项目已有 DESIGN.md 设计系统，需要对齐颜色与间距。

限制与注意事项

  • 仅在用户明确提及 “Stitch” 时使用。
  • 需具备 Stitch MCP Server、Node.js 与 npm。
  • 需要 Stitch 项目与屏幕 ID。
  • 抓取错误时：在 bash 命令中为 URL 加引号，确保 scripts/fetch-stitch.sh 可执行。
  • 组件映射需遵循 references/contract.md：布局（b-container/b-row/b-col）、按钮（b-button）、表单（b-form-group、b-form-input）、卡片（b-card）。
  • 生成的组件应省略第三方许可证头。
  • 官方文档链接与用法见 references/official.md。
  • 该技能涉及的收费、价格、平台、效果或具体使用步骤等未在资料中提供的细节，暂未提供。