ui-design

ui-design 技能是前端開發與視覺原型的快速生成引擎。它協助開發人員、設計師與產品經理在單一 HTML 檔案中產出功能完整、響應式且視覺精緻的使用者介面。透過簡化現代樣式開發流程，使用者可專注於佈局、互動模式與使用者體驗，無需處理繁瑣的建置工具或複雜的專案結構。

• 使用 Tailwind CSS 產生適合生產環境的 HTML 程式碼，簡化樣式流程。

• 導入頂尖現代介面的設計模式，強調細膩對比、版型與響應式佈局。

• 整合 Lucide 圖示並統一使用 1.5 筆觸寬度，確保視覺一致性。

• 支援 Chart.js 進行資料視覺化，自動處理 Canvas 響應式縮放。

• 嚴格遵守使用者定義的設計規範，包括字體階層、色彩調色盤與組件風格。

• 實作語意化 HTML、考慮無障礙設計，並透過原生 CSS 處理懸停與焦點互動狀態。

• 使用此工具時，應清晰定義介面需求，包含如切換器、滑桿或下拉選單等必要組件。

• 本工具專為產出單一程式碼區塊設計，複製產出內容至 HTML 檔案即可即時預覽或部署。

• 建議明確指定設計語言或風格（例如：極簡、商務、暗色主題或未來感），以確保生成結果符合預期。

• 請注意，此技能專注於快速迭代與 UI 探索，而非複雜的後端整合。除非特別要求，建議避免加入過多輕量級以外的 JavaScript 庫，以維持介面效能。

• 工具內建字體處理機制，確保標題使用較緊湊的間距（tracking-tight）以提升現代感，並正確運用字重以達到最佳視覺平衡。