用途:当 Stitch 设计需要落地为数据密集的 React 与 Vite 仪表盘(而非通用组件库)时使用。任务涉及 Google Stitch 项目 ID、.stitch/ 产物、DESIGN.md、Stitch 导出或 Stitch 专属校验时适用。
主要能力:从本地导出、Stitch Web UI 或当前宿主列出的屏幕工具获取已批准的 Stitch HTML 与截图;读取 DESIGN.md,将颜色、字体、间距、圆角与焦点令牌映射为 CSS 变量或所选样式系统;在生成组件前搭建或确认 React、Vite、TypeScript、React Router 与 TanStack Query 边界;表格数据使用语义化 table 或 TanStack Table,采用原生按钮与标签、可见焦点状态、加载区域 aria-busy;展示组件保持纯净,异步访问放入带类型的 query hooks;可选 Web3 读取需隔离 provider、安全格式化代币值、显示网络身份,且不得嵌入私钥或私有 RPC 凭据。
使用方式:运行本地构建、类型检查、窄屏与桌面宽度响应式检查及可访问性审查。跨客户端可用:GitHub Copilot 放入可见技能路径;Claude Code 放入本地 skills 目录或兼容插件源;Codex 安装或同步到 $CODEX_HOME/skills/stitch-react-vite-dashboard 并在重大变更后重启。无 MCP 时使用本地 .stitch/ 产物、导出的 HTML 或截图、捆绑脚本与 Stitch Web UI 回退。
限制:已验证的 Stitch MCP 面为 create_project、upload_design_md、create_design_system_from_design_md、list_design_systems、apply_design_system;除非当前宿主明确暴露,不得声称使用 list_projects、list_screens、get_project、get_screen、generate_screen_from_text、edit_screens 或 generate_variants。禁止未获用户批准上传文件或设计资产,禁止读取、打印、存储或提交 API 密钥、MCP 配置密钥、cookie 等凭据。生成产物须经本地渲染、语法或产物验证后方可视为最终。