淺談最近使用AI的歷程以及從 UIUX 設計師的角度看看 AI 協作如何從「產出」進化到「自動化系統維護」
最近因為同事關係玩了一下Claude AI 挖賽，真的深入玩了一下發現真的是不得了，前三個月前我還抱持著AI輔助的角色，到現在我不確定了XD
可以確定的是，UIUX設計師的工作即將迎來巨大的改變，我覺得勢必會從執行者變成引導與審核者，樂觀來說我認為UIUX設計的工作責任與權限會變更高，基本上使用AI 你就是在訓練一個你自己幫你工作
提醒！Claude AI 自動化Figma需要升級方案，照我當天的美金匯率大約費用為一個月640元左右
為什麼是Claude AI 與其他AI的差異
我現在使用的是Figma做設計，目前有利用到的AI來協助產出設計的有ChatGPT, Gemini, Figma make, Claude，直接說結論
ChatGPT / gemini
產出一次性設計，可以提供修改，但每一次的修改有可能不如預期且沒有可編輯的檔案使用
Figma make
內建的AI服務，可以串聯現成的檔案或是製作新的檔案，目前使用沒那麼聰明的原因是，例如提供頁面並下達指令為“在上方新增一個廣告區域” make仍會重新製作相同的頁面，這導致除了新增的區塊以外既有頁面的欄位會有跑版問題，個人覺得用來製作概念或是新提案比較適合
Claude
我是使用它的code來控制Figma來設計，在執行上他非常精準，同樣的需求提供頁面並下達指令為“在上方新增一個廣告區域” 他在讀取上就能完全明白“除了廣告區域以外使用提供的畫面” 所以呈現上它完全不會更動到既有的畫面欄位，而是準確地在上方增加一個區域
透過這幾個在處理設計上，Claude確實聰明很多，而且他非常具有邏輯，透過你給他的任務，他如果有不明白的地方他也會反饋給你請你提供解答或是方向，他是目前我覺得可以滿足“維護既有”與“產出新設計”最好用的AI
Claude AI的環境架設
我使用的是mac目前架設的環境是 Claude code + figma MCP 下指令的方式是使用終端機（但我看有人直接用Claude APP 也可以，只是我還沒試過）如果你也想試試看的話，提供我的步驟可以一起來玩玩看！
Claude Code 需要 Node.js v18 以上版本，請先確認環境是否符合要求
Step 1. 安裝基礎環境 (Node.js & Xcode Command Line Tools)
確認目前的 Node.js 版本開啟終端機輸入以下指令：
node --version
若顯示版本低於 v18（例如 v12、v14、v16）得先升級（可詢問gemini升級方式）
STEP 2 安裝 Claude Code 並啟動
1.確認 Node.js 版本正確後，在終端機輸入指令：
npm install -g @anthropic-ai/claude-code
2.啟動 Claude Code
claude
STEP 3 串接 Figma MCP Server
這個步驟很重要，串接之後Claude code才可以直接控制並讀取 Figma 的結構化設計資料，並且可以生成符合設計系統的程式碼提供給工程師參照
- 原本的終端機啟動的 Claude Code不要關閉讓他繼續運行，另開一個新的終端機視窗輸入：
claude mcp add — transport http figma https://mcp.figma.com/mcp
#執行後應顯示：MCP server “figma” added
2. 這時候將兩個視窗關閉，重新啟動 Claude Code（MCP 連線設定需要重啟才生效）開啟一個新的終端機並且輸入
claude 3.完成 Figma 授權認證，Claude Code 啟動後，在對話框輸入：
/mcp
- 在清單中找到 Figma，選擇它
- 選擇 Authenticate
- 瀏覽器自動開啟 Figma 授權頁面，點 Allow access
- 回到終端機，顯示「Authentication successful. Connected to Figma」即完成
4. 確認連線狀態，完成後回到Claude起始畫面並輸入
/mcp
再選一次Figma 旁邊會顯示 connected表示成功連線
恭喜你以上的安裝環境已經告一段落啦～以上是大概安裝的方式與方向，在安裝環境的過程中有可能會出現一些卡關，我之前在安裝的時候也有遇到一些問題，我是使用gemini協助我，真是不得不讚嘆科技的偉大
如果你有遇到任何問題，你就快照下來並且丟給gemini或是ChatGPT相信都可以得到更仔細的解答！
Claude code控制Figma實際對話分享
環境架設好了，列出幾個設計上常見的需求示範
首先下達指令最重要的事情就是，假若你是有一定的設計規範要遵守的話，必須將Figma連結一並提供給Claude他才有辦法產出符合的設計
蠻有趣的一點是他在執行的過程會自言自語把他的過程都顯示出來，所以會很清楚知道他執行的邏輯跟順序是什麼，這樣的好處是也可以讓自己釐清需求的面貌，且再修改的狀態下比較好去說明哪一塊要調整
下達指令的方式參考
在過程中如果有任何看不懂的地方，直接跟他說你的疑慮他會說明的非常清楚
目前我用它來幫我處理過幾件事情，如果你也架好了環境也可以來試試看
1. 既有設計頁面增加新的設計
範例：「在現有的註冊流程上方新增一個進度條，並確保它的寬度隨 Auto Layout 自動伸縮」
2.整理component
範例：「請使用（貼上網址），並將頁面上所有 Icon 替換成設計系統中的 Icon/Standard 元件」
3. 優化檔案名稱包含page/ frame/ component
範例：「請檢查檔案（貼上網址） ，將所有page與 Frame 依照內容功能重新命名，並檢查是否都套用了 Global Styles」
結語
在過去的工作經驗裡，從發想到實作最後調整，其實中間都會花費不少的時間，藉由Claude code的便利，基本上可以說是實作部分只要下達對的指令給他沒有做不到的事情而且做得更好，更好的意思是：
1.做稿的效率變快
過去大量的檔案人為修改的時數較長，而且也有可能遺漏，但透過 Claude 調整它可以自動幫你做檢查
2.維護的品質提升
不管是大到檔案的命名小到元件的命名，因為它本身的專長就是寫程式，命名的方式會更符合程式邏輯，也會更好維護統一
這兩點的改善，可以讓設計更專注在定義流程上，有更多的時間去思考是否有解決用戶的問題？是否更符合時代的操作？同時也需要花時間去review AI產出的成果是否真的符合我們的標準，學習如何更精確的下達需求指令，我認為思考的方式會需要更縝密
我覺得整體來說的工作力度其實沒有改變，改變的是工作流程上的比重，我不認為使用AI會更輕鬆，相反的會有機會探討更多的東西，再觀察AI的工作方式之後也許會有更多可行的想法，會勇於做更多的嘗試（因為時間成本變少）而且因為他不是人所以再試錯上有更多的空間（心理壓力也不會太大XD)
