​⚡️ 本次 Flash Lesson 重點

​這不是一堂單純介紹 AI 工具的課，而是一場 60 分鐘的 AI 設計工作流實戰。我們將示範如何把設計系統建置從「設計師手動拉 Token」轉向「AI 全自動產出」

​很多人做作品集，最痛苦的不是沒靈感，而是看到一個喜歡的網站後，要花好幾天手動拆解它的色票、字體、間距，再一個一個建成設計系統，最後還要從零刻出網站。

​☝️你會學到：

1. ​如何用 Aura.build 解析任意網站，自動產出 design.md（色碼／字體／間距／圓角／元件邏輯）
2. ​如何用 Claude Code + Figma MCP 自動建立完整設計系統（Variables Text Styles 元件）
3. ​為什麼 design.md 是關鍵橋樑——讓視覺語言變成 AI 可讀、可執行的規範
4. ​如何用同一份 design.md 自動生成 Next.js 14 + Tailwind 作品集網站

這不是一場單純的工具教學，而是一次新的設計生產方法示範。

👥 適合對象

• UI／UX 設計師
  經常需要拆解參考網站、建立 Design Token、整理元件與設計規範的人
• 產品設計師
  希望縮短設計系統建置時間，並讓設計規格能直接交付給 AI 與工程端的人
• 前端工程師
  希望取得更清楚的設計規範，減少手動確認色碼、字級、間距與元件樣式的人
• 作品集製作者
  想快速完成具有一致視覺風格的個人作品集或品牌網站，但不想從零設定設計系統的人
• 獨立開發者／產品製作者
  需要同時處理設計與開發，希望利用 AI 加速從視覺參考到網站上線流程的人
• AI 設計工具初學者
  想了解如何把 AI 從單次生成圖片，進一步應用在可持續使用的設計與開發工作流中

⏱️ 課程內容

• AI 設計工作流架構
  理解從參考網站解析、design.md 建立、Figma 設計系統生成到前端網站開發的完整流程。
• Aura.build 網站解析
  示範如何解析任意網站，擷取色彩、字體、間距、圓角與元件邏輯，並自動產出 design.md。
• design.md 規範整理
  了解 design.md 的結構與用途，將視覺風格轉換成 AI 可理解、可重複執行的設計規範。
• Claude Code 串接 Figma MCP
  根據 design.md，在 Figma 中自動建立 Variables、Text Styles 與常用設計元件。
• Next.js 作品集生成
  使用 Next.js 14 與 Tailwind CSS，依照同一份 design.md 自動生成具有一致視覺風格的作品集網站。