ui-implementer

UI Implementer 是一項專為高保真前端工程設計的專業開發技能。它透過編排多階段工作流程，填補了靜態設計資產與生產級程式碼之間的差距。代理會分析設計參考（如 Figma 連結、本機圖檔或遠端設計圖），並據此生成採用 React 19、TypeScript 和 Tailwind CSS 4 的程式碼，確保嚴格遵守視覺規格。此技能非常適合追求像素級完美實作，且希望減少手動嘗試錯誤的軟體工程師、UI 開發人員與產品團隊。它能智慧地管理基於元件的架構複雜性，提升程式碼的乾淨度、重用性與可訪問性。透過整合自適應代理切換，該技能會自動優化實作流程，選擇最合適的子代理策略來處理結構規劃、樣式準確度與功能邏輯。工作流程包含內建驗證機制，確保生成的輸出與提供的視覺參考一致，同時最大限度減少手動設計審查或重複 CSS 調整的需求。它作為開發人員的自主延伸，處理從初始元件骨架建立到基於設計系統約束的迭代優化等所有工作。

• 自動從 Figma、PNG、JPG 及網頁設計圖中提取與分析設計參考。
• 使用 React 19、TypeScript 與 Utility-first Tailwind CSS 4 生成生產級程式碼。
• 在專業 UI 開發模型之間進行自適應代理切換，以獲得最佳樣式與結構結果。
• 包含結構規劃、元件生成與品質門禁驗證的多階段實作循環。
• 支援行動優先的響應式設計原則與 WCAG 2.1 AA 無障礙標準。
• 內建驗證迴圈，確保設計精確度與所提供參考檔案的視覺一致性。
• 在提供明確的 Figma 連結或高解析度設計資產時效果最佳。
• 需要定義目標目錄與本機開發 URL，以便進行互動式預覽與驗證。
• 最適合從零開始實作 UI 元件；若需修復現有 CSS，建議使用通用開發人員工具。
• 嚴格避免手動驗證任務，優先採用自動化邏輯進行視覺對等評估。