react:components
將 Stitch 設計轉換為 React 元件
將 Stitch 的視覺設計轉換為乾淨、模組化的 React 代碼，採用 TypeScript 和 Tailwind CSS。通過自動化的 AST 驗證消除設計模擬圖的手動編碼，確保一致的代碼品質。
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «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)
Факторы риска
⚡ Содержит скрипты
🌐 Доступ к сети (1)
📁 Доступ к файловой системе (1)
Оценка качества
Что вы можете построить
快速 UI 原型製作
前端開發人員可以在幾分鐘內將已批准的 Stitch 設計轉換為可工作的 React 元件，加速從設計到開發的交接過程。
設計系統遷移
團隊可以將設計工具遷移到程式碼庫中，將 Stitch 畫面批量轉換為具有標準化 TypeScript 介面的一致性元件庫。
Vite 專案腳手架
開發人員在啟動新的 Vite 專案時，可以產生具有適當的 Tailwind 主題和資料架構的生產就緒元件基礎。
Попробуйте эти промпты
Convert my [Screen Name] screen in my [Project Name] Stitch project to a React component system.
Convert the [Screen Name] screen from Stitch into React components. Extract all business logic into custom hooks in src/hooks/ and move all static data to src/data/mockData.ts.
Convert these Stitch screens into a shared component library: [Screen 1], [Screen 2], [Screen 3]. Ensure shared components are extracted into src/components/common/ and follow the Atomic Design pattern.
Convert the [Screen Name] screen from Stitch to React. After generating each component, run npm run validate on it to ensure it passes the architecture checklist. Fix any validation errors before proceeding.
Лучшие практики
- 始終在生成的元件上運行驗證（npm run validate）以早期捕獲硬編碼樣式
- 使用 gold-standard-card.tsx 作為適當元件結構的參考
- 將所有業務邏輯提取到自訂 Hooks 中，將靜態內容提取到 mockData.ts
Избегать
- 不要生成龐大的單一檔案元件；遵循 Atomic Design 模組化原則
- 避免硬編碼十六進制顏色值；始終從 style-guide.json 映射到 Tailwind 主題令牌
- 不要跳過架構清單審查；它可以捕獲常見的結構問題