react:components
将 Stitch 设计转换为 React 组件
将 Stitch 中的视觉设计转换为整洁、模块化的 React 代码，使用 TypeScript 和 Tailwind CSS。通过自动化的 AST 验证确保一致的代码质量，从而消除从设计稿进行手动编码的需要。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react:components”。 Convert my Landing Page screen in my Podcast Stitch project to a React component system.
预期结果:
I've converted your Landing Page screen into a modular React component system:
**Generated Structure:**
- src/components/HeroSection.tsx - Main hero with podcast branding
- src/components/EpisodeCard.tsx - Reusable episode display card
- src/components/SubscribeForm.tsx - Email capture component
- src/hooks/useEpisodes.ts - Custom hook for episode data
- src/data/mockData.ts - Static content and image URLs
**Type Safety:** All components include Readonly<TypeScript interfaces (HeroSectionProps, EpisodeCardProps).
**Styling:** Tailwind classes mapped to your theme tokens from the design. No hardcoded hex values found.
**Validation:** All components passed AST validation. Run 'npm run dev' to preview.
正在使用“react:components”。 Run validation on my new component
预期结果:
Running AST validation on src/components/ActivityCard.tsx...
✅ Props declaration found (ActivityCardProps interface)
✅ No hardcoded hex values found
✨ COMPONENT VALID.
The component follows all architectural guidelines and is ready for use.
安全审计
低风险Static analysis detected 107 pattern matches, but manual review confirms nearly all are false positives. The skill uses a bash script (fetch-stitch.sh) to download design files from Stitch URLs via curl, and a Node.js validator (validate.js) that reads component files for AST analysis. Both operations are legitimate and necessary for the skill's design-to-code workflow. No malicious intent detected.
低风险问题 (2)
风险因素
质量评分
你能构建什么
快速 UI 原型制作
前端开发人员可以在几分钟内将经过审批的 Stitch 设计转换为可工作的 React 组件，加速从设计到开发的交接流程。
设计系统迁移
从设计工具迁移到代码库的团队可以批量将 Stitch 屏幕转换为具有标准化 TypeScript 接口的一致性组件库。
Vite 项目脚手架
开始新 Vite 项目的开发人员可以生成生产就绪的组件基础结构，其中已配置正确的 Tailwind 主题和数据架构。
试试这些提示
将我的 [项目名称] Stitch 项目中的 [屏幕名称] 屏幕转换为 React 组件系统。
将 Stitch 的 [屏幕名称] 屏幕转换为 React 组件。将所有业务逻辑提取到 src/hooks/ 中的自定义钩子，并将所有静态数据移到 src/data/mockData.ts。
将这些 Stitch 屏幕转换为共享组件库：[屏幕 1]、[屏幕 2]、[屏幕 3]。确保共享组件提取到 src/components/common/ 并遵循原子设计模式。
将 Stitch 的 [屏幕名称] 屏幕转换为 React。生成每个组件后，对其运行 npm run validate 以确保通过架构检查清单。在继续之前修复所有验证错误。
最佳实践
- 始终对生成的组件运行验证（npm run validate）以尽早发现硬编码样式
- 使用 gold-standard-card.tsx 示例作为正确组件结构的参考
- 将所有业务逻辑提取到自定义钩子，并将静态内容提取到 mockData.ts
避免
- 不要生成单体单文件组件；遵循原子设计模块化
- 避免硬编码十六进制颜色值；始终映射到 style-guide.json 中的 Tailwind 主题令牌
- 不要跳过架构检查清单审查；它会捕获常见的结构问题
常见问题
什么是 Stitch，为什么我需要这个技能？
为什么此技能使用 bash 脚本而不是标准 HTTP 请求？
AST 验证检查什么？
我可以自定义生成的组件结构吗？
如果 Stitch 下载 URL 过期怎么办？
此技能适用于移动设计吗？
开发者详情
许可证
MIT
引用
main