zhu-guli326/image2_UI_skill

解決的問題

它解決了將靜態 UI 參考、設計草圖或文字描述轉換為完全功能、可互動且可編輯的使用者介面的問題。與僅生成 UI 圖像的工具不同，此專案將結構元素（程式碼與元件）與視覺資產（影像）分離，確保最終輸出是一個真正的前端專案，而非僅是原型。

如何運作

該工具以三種主要模式運作：從螢幕截圖或設計檔案重建現有的 UI、重新設計參考以符合特定產品的品牌風格，或從文字描述創建全新的介面。它利用稱為「image2」的系統生成高品質的視覺資產（如人物、產品或插圖），同時使用標準設計系統（如 iOS、Material、Ant Design 或 shadcn/Radix）來處理結構元件、導航與版面配置。

適用對象

此工具專為需要快速建立可點擊介面原型、複製現有應用程式版面、建立登陸頁面或儀表板，或為電商、社交及工具類產品生成高保真 UI 原型的開發人員與設計師所設計。

特色

• 基於程式碼的輸出：提供可編輯的 HTML 與前端專案，可與實際資料整合。
• 混合生成：結合真實程式碼用於 UI 結構，並使用 AI 生成的視覺資產處理圖像。
• 設計系統整合：優先重用現有元件與圖示庫中的元件，以維持一致性。
• 設備特定細節：處理手機專屬元素，如安全區域、動態島與狀態列。
• 進階版面：支援複雜的視覺組合，包括裁切主題、層疊元素與編輯風格版面。