用途：把 Stitch 屏幕设计稿落地为数据密集型的 React + Vite 仪表盘，目标栈为 React 18、Vite、TypeScript、TanStack Query、React Router，可选 ethers v6 或 viem 做链上读取。
前置条件：已配置 Stitch MCP；项目内有 DESIGN.md（参见 design-md 技能）以还原设计令牌；已用 npm create vite@latest 生成 Vite + React + TypeScript 脚手架。
工作流：先运行 list_tools 记下 Stitch 前缀（如 stitch:）；用 [前缀]:get_screen 按项目与屏幕 ID 获取屏幕；把 HTML 与截图保存到 .stitch/designs/{screen}.html 和 .png；读取 DESIGN.md，将 colors.、typography.、spacing.* 映射为 src/index.css 中的 CSS 变量；按 src/components/、src/pages/、src/hooks/ 拆分生成组件；用 TanStack Query 接入异步数据，展示型组件保持纯函数。
HTML 到 React 的映射要点：布局用 Tailwind 或 CSS Modules 并对齐 DESIGN.md 的间距令牌；卡片用带令牌化圆角与 elevation 降级的 section，兼顾 forced-colors；表格用语义化 table 或 TanStack Table，不要只用 div 网格；按钮用 button type="button" 并保留可见焦点环；表单用 label htmlFor 配 input id，错误用 aria-describedby 关联；加载用 Skeleton 并在容器加 aria-busy；钱包连接隔离在 WalletProvider 中，绝不在生成代码里嵌入私钥。
设计令牌与质量：在 src/index.css 中用变量桥接 DESIGN.md 的颜色与字体；发布 UI 前本地运行 npx @google/design.md lint DESIGN.md。质量清单包括 WCAG 2.2 AA 对比度通过 linter、键盘焦点顺序与视觉顺序一致、在 375px 与 1280px 宽度响应式测试、仓库无密钥（RPC URL 走环境变量，VITE_* 前缀仅用于公开端点）、TypeScript 严格模式且合约 ABI 上不用 any。
Web3 约定：用 useReadContract（viem/wagmi）或 ethers Contract 配合 TanStack Query 的 queryFn 做只读调用；用 formatUnits 格式化代币数量，在设置页脚显示网络名与链 ID；用通俗语言呈现交易错误，有 txHash 时链接到区块浏览器；对 gas 敏感的流程应批量读取，避免渲染循环中重复 eth_call。
文件结构：src/components/ 放 Stitch 展示型 UI，src/pages/ 放路由级页面，src/hooks/ 放 useQuery 封装与钱包钩子，src/lib/ 放 ABI 辅助与格式化器，src/styles/ 放令牌 CSS 变量。
限制：文档未提供具体收费、价格、平台支持范围或性能数据；使用时需自备 Stitch MCP 与 DESIGN.md。若在 stitch.withgoogle.com/docs 上相对链接跳转异常，请改用完整 https://stitch.withgoogle.com/docs/... URL。