UX/UI 如何用AI做前端
分享我是如何用Claude 完成前端
我以前都用Claude app 但後來使用Claude CLI後 我是強烈推薦的。不過你可能會很好奇為什麼要這樣用，有什麼原因嗎？
因為帥啊，帥就完事了，在外面別人看到你用CLI都會覺得你很酷，生活不如意，但至少要帥對吧
開玩笑的，主要還是因為比較順手，用起來感覺也挺好的，所以我就漸漸轉CLI也比較省 Token。
以下我會分享三個層次的做法
- 有Design System時做前端的心得
- 沒有Design System時怎麼做前端
- 小專案時可以如何做
層次一：已經有 Figma 和 Design System
這是目前效率最高，也相對穩定的一條路
我現在的做法會是 Figma → Claude Code → 前端
設計師先完成 Figma，再透過 Figma MCP 讓 Claude Code 讀取設計並產出前端。
不得不說到了Opus5.0 或是 codex 現在已經可以超理解設計師熟悉的語言，例如：
「Card 改成 flex row，間距 16。」
「Sidebar 收合後只保留 icon。」
這些以前你要來回跟前端工程師溝通超多次的東西，你可以自己自行調整這感覺真的很不錯，設計師有很多細節你去這樣調整會得到出乎預料的結果，你會超滿意你的作品
所以有沒有一套清楚的 Design System 很重要。Color Token、Spacing、Typography、Component 和 Layout 規則越完整，產出通常就越穩定。
但我覺得真正的改變，不只是還原畫面的速度，而是整個工作流程。
以前完成 Figma 後，還要整理標註、Spec 和 Handoff 備註，再交給前端工程師。現在我可以先透過 Claude Code 把前端做出來，實際確認畫面和互動，再回頭同步 Figma。
對我來說：
Figma 開始從「施工圖」，慢慢變成一份「設計紀錄」。因為AI太快了，他改的速度遠大於你在figma 繪畫的速度
正式專案還是要搭配 Git，也要先和工程團隊確認架構及開發流程。AI 可以加快實作，但不代表原本的工程規範就不需要了。
層次二：從零建立新專案
如果完全沒有既有畫面，我覺得第一步不是立刻叫 AI 畫 UI，而是先把腦中的東西結構化。
我的流程通常會變成：
需求 → FigJam Flow → 初步 Figma → 人工調整 → 前端
我會先整理需求，再透過 Figma MCP 在 FigJam 建立使用者旅程、頁面跳轉和操作流程。也可以搭配 Mobbin MCP 找相關產品和介面參考。
簡單來說：
在開始畫 UI 之前，先把產品邏輯驗證清楚。
方向確定後，再讓 Claude Code 協助建立初步 Figma。我進去調整設計，最後再讓它根據修改後的版本實作前端。
如果只是 Landing Page，我不一定會走完整的 Figma 流程，可能直接用 Claude Code 產生網頁，或搭配 Framer 快速製作。
工具怎麼組合，還是要看專案規模，不需要每個流程都走滿。
層次三：快速完成一個小型專案
你可以去Figma 找很多現有的Design System直接請Agent看，他會理解你的Design System
更進階的方式是，把重要的設計規範直接寫進 CLAUDE.md，例如命名方式、顏色、Typography、Component 和 RWD 規則。（不過現在比最一開始的AI聰明很多了，其實不太需要再這樣做）
有固定流程的工作，則另外整理成 Skill。
先讓一條規則真的穩定生效，比整理一份五十頁、最後沒有人使用的規範更有價值。
下一步，我想嘗試讓設計稿從「參考資料」變成「驗收條件」。
例如：把Mobbin實際畫面餵給AI，然後找Figma 既有資源，請AI去做一個一樣的內容出來、元件是否使用指定規格，和功能測試、單元測試一起放進交付流程。
如果你也想開始
我會建議不要一開始就拿最大的正式專案來試。
先選一個 Landing Page，或一段相對獨立的產品流程，準備好基本的顏色、字級、Spacing 和 Component，再讓 AI 嘗試實作。
第一次的目標也不用是完全還原。先觀察它在哪些地方穩定、哪些地方容易誤解，再把這些問題逐步整理成專案規則。
這樣累積出來的規範，才會真的符合你的工作方式。
設計師的價值
我不覺得 AI 會讓設計師的價值變小，反而可能把設計師之間的差距放得更大。
定義問題、整理資訊、判斷優先順序、做出取捨，以及處理動畫、互動和細節，這些能力會直接決定 AI 最後能做到什麼程度。
以前看到一個地方不對，可能要開 Ticket、排進 Sprint，再等待工程師修改。現在很多問題，設計師可以直接透過 Claude Code 處理。
看到問題，就可以直接改。
對我來說，這件事帶來的改變，比任何單一的 AI 功能都還要大。