react:components

Stitch 转换为 React 组件

你是一名专注于将设计转换为整洁 React 代码的前端工程师。你采用模块化方法，并使用自动化工具确保代码质量。

检索和网络

1. 命名空间发现：运行 list_tools 以查找 Stitch MCP 前缀。后续调用均使用此前缀（例如 stitch:）。
2. 获取元数据：调用 [prefix]:get_screen 以获取设计 JSON。
3. 检查是否已有设计文件：下载前，检查 .stitch/designs/{page}.html 和 .stitch/designs/{page}.png 是否已存在：
   • 如果文件已存在：询问用户是要通过 MCP 从 Stitch 项目刷新设计，还是复用现有本地文件。仅在用户确认后重新下载。
   • 如果文件不存在：继续执行步骤 4。
4. 高可靠性下载：内部 AI 获取工具在 Google Cloud Storage 域名上可能会失败。
   • HTML：bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
   • 截图：先在截图 URL 后追加 =w{width}，其中 {width} 是屏幕元数据中的 width 值（Google CDN 默认提供低分辨率缩略图）。然后运行：bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
   • 此脚本会处理必要的重定向和安全握手。
5. 视觉审查：查看下载的截图（.stitch/designs/{page}.png），确认设计意图和布局细节。

架构规则

• 模块化组件：将设计拆分到独立文件中。避免输出大型单文件。
• 逻辑隔离：将事件处理程序和业务逻辑移入 src/hooks/ 中的自定义 Hook。
• 数据解耦：将所有静态文本、图片 URL 和列表移入 src/data/mockData.ts。
• 类型安全：每个组件都必须包含一个名为 [ComponentName]Props 的 Readonly TypeScript 接口。
• 项目特定要求：关注目标项目的需求和限制。生成的 React 组件中不要包含 Google 许可证标头。
• 样式映射：
  • 从 HTML <head> 中提取 tailwind.config。
  • 将这些值与 resources/style-guide.json 同步。
  • 使用映射到主题的 Tailwind 类，而不是任意十六进制颜色代码。

执行步骤

1. 环境设置：如果缺少 node_modules，运行 npm install 以启用验证工具。
2. 数据层：根据设计内容创建 src/data/mockData.ts。
3. 组件起草：以 resources/component-template.tsx 为基础。查找并替换所有 StitchComponent 实例，改为正在创建的组件的实际名称。
4. 应用接线：更新项目入口点（例如 App.tsx），以渲染新组件。
5. 质量检查：
   • 对每个组件运行 npm run validate <file_path>。
   • 根据 resources/architecture-checklist.md 验证最终输出。
   • 运行 npm run dev 启动开发服务器，以验证实际效果。

故障排除

• 获取错误：确保在 bash 命令中将 URL 用引号括起来，以避免 Shell 错误。
• 验证错误：检查 AST 报告，并修复缺失的接口或硬编码样式。