Design / UX
AI 時代的 UI 設計師：從 Figma 畫稿轉向 Prototype-first 的設計工作流
Threads 貼文提出 AI 時代 UI 設計師的新流程：先從 PRD 產出設計 Spec，再讓 AI Agent 生成可跑的前端 prototype，最後反向讀 DOM、樣式與互動狀態生成 Figma 設計稿。重點不是 Figma 消失，而是設計師的工作重心從手動畫框轉向需求結構化、流程驗證、視覺決策與可交付規格治理。
2026年5月20日1 分鐘閱讀👁 5
Design Workflow · Figma · AI Agent
AI 時代的 UI 設計師：不是少畫 Figma，而是先把產品跑起來
竹子的 Threads 貼文點出一個很實用的設計流程轉向：先根據 PRD 寫出給自己畫圖用的 Spec，再用 AI Agent 生成一個能跑、能 Demo 的前端 prototype，接著反向讓 AI 讀 DOM 與樣式，把可驗證的 prototype 轉成 Figma 設計稿。這不是「設計師被取代」，而是設計工作從手工拉框升級成產品流程、互動狀態與交付規格的管理。
舊流程
需求討論 → Figma wireframe → 高保真稿 → prototype → 開發解讀。問題是大量時間花在靜態畫面與手工同步。
新流程
PRD → 設計 Spec → AI 生成前端 prototype → 瀏覽器驗證 → DOM / CSS 反推 Figma → 開發交付。
設計師價值
價值從「會畫」移到「會定義流程、狀態、風格、限制、驗收標準」，並能判斷 AI 生成的體驗是否合理。
核心洞察：Figma 仍然重要，但它不再一定是第一步。對許多產品團隊來說，先生成一個可跑 prototype，反而更快暴露資訊架構、互動狀態、邊界情境與工程限制。
| 階段 | AI 可以做 | 設計師必須負責 |
|---|---|---|
| 需求轉譯 | 把 PRD 拆成頁面、流程、元件與狀態 | 確認使用者目標、優先級與商業限制 |
| Prototype | 生成可跑的 React/Vue/HTML prototype | 檢查資訊架構、互動節奏、錯誤狀態與可用性 |
| 視覺系統 | 依 prompt 套版型、色彩、spacing、component variants | 建立品牌一致性、設計 token、元件規範 |
| Figma 化 | 讀 DOM / CSS / screenshot，回生成設計稿 | 整理成團隊可維護、可交付、可迭代的 design system |
可複製的工作流
- 先把 PRD 改寫成設計 Spec：目標使用者、核心任務、頁面清單、流程、狀態、視覺方向。
- 要求 AI 生成「能跑即可」的前端 prototype，不急著追求工程品質。
- 用瀏覽器直接測互動，快速修正資訊架構與流程。
- 定稿後再把 DOM、CSS、截圖與元件結構轉回 Figma，補上設計系統命名與規格。
- 交付時附上 prototype、Figma、狀態表與驗收條件，而不只是靜態圖。