design-to-production
將 HTML 原型轉換為生產級 React 元件
手動將設計原型轉換為 React 元件既耗時又容易出錯。此技能可自動化從 HTML 分析、元件骨架建構到品質驗證的整個工作流程，在強制執行一致程式碼標準的同時，將實作時間減少 70%。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「design-to-production」を使用しています。 Convert .superdesign/design_iterations/glassmorphism-card.html to a React component
期待される結果:
- ✓ 已分析 HTML 結構：3 個按鈕、2 個輸入框、彈性佈局
- ✓ 已對應至 shadcn/ui：Card、Button、Input、Badge
- ✓ 已建立骨架：modules/practice/components/GlassmorphismCard.tsx
- ✓ 準備實作：已新增 5 個待辦事項
- 執行驗證：./.claude/skills/design-to-production/scripts/validate.sh modules/practice/components/GlassmorphismCard.tsx
「design-to-production」を使用しています。 Analyze .superdesign/design_iterations/login-form.html
期待される結果:
- ✓ 元件：LoginForm
- ✓ 玻璃擬態類別：glass-card、btn-glass、neon-glow-purple
- ✓ 佈局模式：vertical-stack
- ✓ 建議範本：interactive-card（偵測到 4 個按鈕）
- ✓ 下一步：使用 --name LoginForm --module profile --template interactive-card 建立骨架
セキュリティ監査
安全All 606 static findings are false positives. The analyzer misidentified markdown documentation syntax (headings, code examples) and legitimate build script patterns as security issues. The actual shell scripts are safe build tools that validate inputs and operate on controlled paths.
リスク要因
品質スコア
作れるもの
快速元件實作
將 HTML 設計迭代轉換為生產級 React 元件，耗時不到一小時，而非半天
設計一致性強制執行
自動確保所有實作的元件遵循玻璃擬態模式和 shadcn/ui 慣例
交接工作流程自動化
透過自動化 HTML 到 React 的轉換流程，簡化設計師到開發人員的交接過程
これらのプロンプトを試す
Convert the HTML prototype at .superdesign/design_iterations/button-component.html to a React component
Analyze .superdesign/design_iterations/glassmorphism-card.html and scaffold a complete interactive-card component with proper glassmorphism classes
Implement the hints panel from our design iteration, scaffold the component, then validate it meets all quality standards
Process all HTML files in .superdesign/design_iterations/ and scaffold React components for each one, then run validation on all generated components
ベストプラクティス
- 將 HTML 原型儲存在 .superdesign/design_iterations/ 中以保持一致的專案結構
- 實作元件邏輯後立即執行驗證，以便及早發現問題
- 使用互動式對應步驟來審查並覆寫建議的 shadcn 元件對應
回避
- 跳過驗證檢查 - 它們會在程式碼審查之前發現常見問題
- 修改建立的元件結構而不更新相應的驗證規則
- 使用未在 styles/glassmorphism.css 中定義的自訂玻璃擬態類別
よくある質問
支援哪些 HTML 檔案格式？
我可以自訂元件範本嗎？
強制執行哪些品質標準？
這適用於其他 UI 庫嗎？
產生的元件儲存在哪裡？
我可以一次轉換多個元件嗎？
開発者の詳細
ファイル構成