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

stitch-vue-bootstrap-components

前端与建站

查看项目

更新于 10-16 07:54

技能介绍

用途

本技能面向前端工程师，用于把 Stitch 设计稿转换为整洁、模块化的 Vue 3 + Bootstrap 代码。仅在用户明确提到「Stitch」并需要将 Stitch 屏幕转换为 Vue 3 + Bootstrap（Vite、.vue 单文件组件、BootstrapVue Vue 3 或 BootstrapVueNext）时使用。

主要能力

  • 通过 Stitch MCP（或 stitch-mcp-get-screen）获取屏幕元数据与 HTML。
  • 使用技能内的脚本与资源进行可靠抓取与质量检查。
  • 目标技术栈：Vue 3 + BootstrapVue Vue.js 3 Support（@vue/compat）或 BootstrapVueNext（Bootstrap 5 + Vue 3）。

前置条件

  • 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。

官方文档

  • Bootstrap Vue：Official · Vue 3 support · Docs · Components · GitHub
  • 完整链接与用法见 references/official.md

检索与网络

  • 发现 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 确认布局与细节。

架构规则

  • 模块化组件：将设计拆分为独立的 .vue 文件，避免单个巨型 SFC。
  • 逻辑隔离：将事件处理器与组合式函数放入 src/composables/ 或 script setup 内。
  • 数据解耦：将静态文本、图片 URL 与列表移入 src/data/mockData.js（或 .ts）。
  • 仅使用 Bootstrap 组件（有框架组件时优先使用）：卡片用 b-card，提示用 b-alert；不要使用 div.card 或自定义 .card-header/.tips-text。按 references/contract.md 使用 <b-container>、<b-row>、<b-col>、<b-button> 等；当 b-* 适用时，不要使用原始 <button class="btn"> 或 <div class="card">。
  • 项目特定：生成的组件中省略第三方许可证头。

执行步骤

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

与本仓库集成

  • 获取屏幕：使用 stitch-mcp-get-screen 并传入 projectId 与 screenId。可通过解析 Stitch 设计 URL 获取 ID，或在无 URL 或用户需要浏览/选择时使用 stitch-mcp-list-projects 与 stitch-mcp-list-screens。
  • 设计规范：若 Stitch 生成时带有 stitch-ui-design-spec-bootstrap 约束，则映射到 Vue SFC 与 Bootstrap Vue 组件。若从 Stitch HTML（如 get_screen htmlCode）转换，使用 references/tailwind-to-bootstrap.md 进行 Tailwind 工具类 → Bootstrap 工具类/组件的映射，再使用 references/contract.md 了解组件 API。
  • 设计系统：若项目有 DESIGN.md（来自 stitch-design-md），在映射到 Bootstrap token 时对齐该系统的颜色与间距。

故障排查

  • 抓取错误：在 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）。

关键词

  • 英文：Stitch, Vue 3, Bootstrap, BootstrapVue, Vite, b-container, b-button。
  • 中文：Stitch、Vue 3、Bootstrap、组件。

参考

  • Examples
  • Scripts
  • Component index（各组件文档链接）
  • Tailwind → Bootstrap Vue — 转换 Stitch HTML 时的 Tailwind 工具类 → Bootstrap 映射。
  • Contract（Bootstrap 映射）
  • Component API（props/events 快速参考）
  • Official documentation
  • Architecture checklist
  • Component template
  • Stitch API / MCP