SuperAPI AI 工具集

react-components

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:把 Stitch 设计稿转换为干净的模块化 React 代码,适用于 Vite 项目的前端开发流程。

主要能力:先运行 list_tools 发现 Stitch MCP 前缀,再用该前缀调用 get_screen 获取设计 JSON;通过 bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html" 下载源码,以规避内部 AI 抓取工具在 Google Cloud Storage 域名上的失败;查看 screenshot.downloadUrl 做视觉核对。

架构规则:组件拆分为独立文件,避免单文件大输出;事件处理与业务逻辑放入 src/hooks/ 的自定义 Hook;静态文本、图片 URL 与列表集中到 src/data/mockData.ts;每个组件包含名为 [ComponentName]Props 的 Readonly TypeScript 接口;不保留 Google 许可证头。样式上从 HTML head 提取 tailwind.config,与 resources/style-guide.json 同步,使用主题映射的 Tailwind 类而非任意十六进制色值。

执行步骤:缺少 node_modules 时运行 npm install;创建 src/data/mockData.ts;以 resources/component-template.tsx 为模板,替换其中 StitchComponent 为实际组件名;更新 App.tsx 等入口渲染新组件;对每个组件运行 npm run validate <file_path>,并对照 resources/architecture-checklist.md 检查;用 npm run dev 启动开发服务器验证。

限制与排错:抓取失败时确认 bash 命令中 URL 已加引号;校验失败时查看 AST 报告,修复缺失接口或硬编码样式。具体收费、平台支持范围与效果数据暂未提供。