AI 驅動設計系統自動化
從 Figma 重構到 Storybook 閉環開發
針對混亂舊專案清理與新產品 0 到 1 敏捷搭建，運用 5 套特化 AI Skill 實現「設計稿規範化、Token 提取、Storybook 元件庫自動生成與 AI 原型拼裝」的完整工作流。
提案核心亮點
Why this course舊專案重構救星
不只示範 0 到 1 新建，更專注解決真實團隊中最棘手的混亂 Legacy 設計稿與無規範前端代碼。
設計師友善的 Storybook 導覽
針對初次接觸代碼元件庫的設計師，深入淺出介紹 Storybook 界面結構、屬性調控與視覺驗收方式。
自帶 5 款特化 Skill 包
課後提供經過驗證的 AI Prompt / Skill 腳本包，學員可立即導入 Cursor、Claude Desktop 或團隊 CLI。
精簡課程大綱
Total ~110 Mins痛點分析與 AI Pipeline 全局機制
解析傳統設計系統維護與舊專案改造的常見瓶頸，展示 5 個特化 AI Skill 如何串接成為完整閉環。
Figma 設計稿重構與 Design Tokens 自動化
將散亂圖層一鍵提煉為獨立 Component 並自動回填；同時導入 M3 規範，自動建立色盤與字型 Variables。
跨來源規範萃取與 Storybook 元件庫從零入門
從多源頭萃取設計規範文件，並為學員揭開 Storybook 的神祕面紗：拆解「設計師視角」的界面結構、Controls 屬性面板操作，再由 AI 自動生成對應的元件庫代碼。
- 觀念建立：為什麼 Storybook 是工程師與設計師溝通的「活體組件陳列室」？
- 界面結構拆解：側邊導覽樹（Component Tree）、畫布 Canvas、Doc 文件預覽。
- 動態操作教學：如何使用 Controls 面板實時調控 Variant 樣式、文字與 State 狀態。
AI 原型快速組裝與 Skill 落地部署指南
實戰讓 AI 直接讀取產出的 Storybook 元件庫，無縫組裝出產品新頁面；課末指導 Skill 的環境打包與配置。
適合對象
-
首要受眾 產品設計師 (Product Designer) 與 UI/UX
希望將散亂的 Figma 設計稿一鍵規格化、快速建立 Design Tokens，並跨越對程式碼元件庫（如 Storybook）的認知門檻，達成順暢交付。
-
前端 / 全端工程師
欲大幅減少手刻 UI 元件與維護 Storybook 文檔的重複性工作，實現設計與代碼高保真同步。
-
Design Ops 與設計負責人
建立標準化自動化管線，解決跨部門資產維護與歷史混亂專案整合難題。
-
獨立開發者與產品經理
無需從零手繪所有元件，透過現有元件庫以 AI 高效率拼裝驗證產品功能。
課後收穫
- 零基礎搞懂 Storybook：看懂元件庫結構、會調 Controls 驗收，消除跨職能溝通隔閡。
- 完整的自動化流程：掌握 Figma → Document → Storybook 端到端管線。
- 5 款即插即用 Skill 包：提供經過驗證的腳本配置，課後直接導入團隊使用。
- Legacy 專案重構能力：面對歷史混亂檔案不再棘手，具備系統性清洗與升級策略。