oil-oil/draw-ui

解決的問題

draw-ui 為 AI 代理提供了一種專用的 UI 設計技能，彌合抽象頁面需求與具體視覺設計或功能程式碼之間的差距。透過強制執行需求確認與基於參考的生成流程，解決了 AI 生成介面過於通用或與業務需求視覺脫節的問題。

工作原理

此工具以兩種主要模式運作：

1. 設計生成：將文字需求轉換為 UI 設計草圖。代理首先確認頁面的核心功能、可用的參考截圖以及固定區域（如導航列）。採用兩種提示策略：「類比」用於提供創意方向，「清單」用於確保精確的業務資料。可使用參考影像保持風格一致性，或鎖定特定佈局框架。
2. 程式碼重構：將設計草圖或截圖轉換為可執行的 HTML/CSS 或微信小程序頁面。將佈局（由程式碼處理）與複雜視覺資產（由影像生成/提取處理）分離，然後迭代比較生成的頁面與原始設計，以優化輸出結果。

適用對象

• 希望自動化建立 UI 原型或原型的 AI 代理使用者。
• 希望快速將設計截圖轉換為功能前端程式碼（HTML/CSS 或微信小程序）的 開發者。
• 需要利用 AI 快速探索不同 UI 方向的 產品設計師。

核心亮點

• 參考驅動設計：支援「框架鎖定」，在重新生成內容區域時保持導航列／側邊欄的一致性。
• 多平台輸出：可產生標準網頁程式碼（HTML/CSS）與微信小程序專用程式碼（WXML/WXSS）。
• 資產分離：智能地將頁面拆分為由 CSS 驅動的佈局與獨立的影像資產，避免文字模糊或雜訊。
• 迭代優化：採用截圖比對工作流程，確保最終程式碼與原始設計像素完全相符。