用 Stitch 设计稿生成生产级 React +…

当你已有 Stitch 屏幕设计和 DESIGN.md 设计令牌，需要落地为 React 18 + Vite + TypeScript 的数据密集型仪表盘时使用。

适用场景

解决思路

1. 运行 `list_tools` 发现 MCP 前缀（例如 `stitch:`）。
2. 用 `[prefix]:get_screen` 并传入 project 和 screen ID 拉取屏幕。
3. 把 HTML 和截图持久化到 `.stitch/designs/{screen}.html` 与 `.stitch/designs/{screen}.png`。
4. 读取 DESIGN.md，将 `colors.*`、`typography.*`、`spacing.*` 映射为 `src/index.css` 中的 CSS 变量。
5. 生成组件，拆分到 `src/components/`、`src/pages/`、`src/hooks/`。
6. 用 TanStack Query 接入异步数据请求，保持展示型组件为纯组件。
7. 布局网格/flex 用 Tailwind 工具类或 CSS modules，并对齐 DESIGN.md 的 spacing token。
8. 卡片/面板用 `<section>`，使用 token 化的 border-radius，并为 forced-colors 模式提供 elevation 回退。
9. 表格用语义化 `<table>` 或 TanStack Table，绝不用纯 div 网格承载表格数据。
10. 按钮用 `<button type="button">` 并保留可见焦点环（除非 DESIGN.md 定义了 focus token，否则保留浏览器默认）。
11. 表单用 `<label htmlFor>` + `<input id>`，错误信息通过 `aria-describedby` 关联。
12. 加载态用 Skeleton 组件，请求期间在容器上设置 `aria-busy`。
13. 钱包连接隔离在 `WalletProvider` 中，生成的代码中绝不内嵌私钥。
14. 在 `src/index.css` 中建立 token 桥接，例如 `:root { --color-primary: ...; --font-body: ...; }`。
15. 发布 UI 前本地运行 `npx @google/design.md lint DESIGN.md`。
16. Web3 只读合约调用用 `useReadContract`（viem/wagmi）或 ethers `Contract` + TanStack Query 的 `queryFn`。
17. 用 `formatUnits` 格式化代币金额，在设置页脚展示网络名和 chain ID。
18. 交易错误用平实语言呈现，存在 `txHash` 时链接到区块浏览器。
19. 对 gas 敏感流程做批量读取，避免在渲染循环中重复 `eth_call`。
20. 按 `src/components/`（展示型 UI）、`src/pages/`（路由级页面）、`src/hooks/`（useQuery 封装、钱包 hooks）、`src/lib/`（ABI 辅助、格式化器）、`src/styles/`（token CSS 变量）组织文件结构。
21. 质量检查：WCAG 2.2 AA 对比度通过 DESIGN.md 组件配对 linter。
22. 质量检查：键盘可导航，焦点顺序与视觉顺序一致。
23. 质量检查：在 375px 和 1280px 宽度下测试响应式。
24. 质量检查：仓库无密钥，RPC URL 来自环境变量（仅公开端点用 `VITE_*` 前缀）。
25. 质量检查：TypeScript strict 模式，合约 ABI 上不使用 `any`。
26. 访问 stitch.withgoogle.com/docs 链接时，若相对导航重定向异常，使用完整的 `https://stitch.withgoogle.com/docs/...` URL。

适用边界 · 注意事项

• 没有配置 Stitch MCP 或没有 DESIGN.md 设计令牌时，无法保证 token 保真度。
• 项目不是 React + Vite + TypeScript 技术栈时，本流程的目录与工具约定不适用。
• 不涉及链上读取的普通看板可跳过 Web3 相关约定。