筆記：Tired of AI-ish UI? Here is how to make it better

影片重點

• 這部影片由 Jason Zhou 分享如何用 AI 產生更有個人風格、品牌感與高品質的 UI，避免「AI-ish」的制式感。

• 影片主軸是四步驟設計流程：Layout（版型）、Theme（主題風格）、Animation（動畫/微互動）、Product（元件擴展與組合）。

四步驟流程

1. Layout（版型）

   • 先用 ASCII wireframe（文字線框圖）和 AI 快速對齊 UI 結構，確認功能區塊與資訊層級，方便反覆調整與回饋。

2. Theme（主題風格）

   • 調整顏色、字體、陰影、邊框等設計細節，讓 UI 更有品牌感與個人特色，可用工具如 Super Design 或 Twixen 來微調並快速複製樣式。

3. Animation（動畫/微互動）

   • 利用 AI 幫忙規劃動畫、hover 效果、滑入滑出等微互動，讓 UI 更有生命力，也可用 Mermaid 圖表描述互動邏輯。

給前端工程師的啟發

• 學會將設計流程拆解成小步驟，逐步引導 AI 產生更符合需求的 UI。

• 善用 ASCII wireframe 來快速對齊版型與需求，提升設計溝通效率。

• 結合工具與元件化思維，讓設計流程更高效且容易規模化。

---