淺談 Claude 與 Figma 協作設計
首先來介紹本次的兩位主角：當今主流 UI 與 Prototype 設計工具 Figma、 生成式 AI 訓練模型 Claude
Figma 的協作功能、雲端同步與強大插件生態，使其成為當今主流 UI/UX 設計工具，讓多方團隊可以在線上即時共編，是個無縫銜接的視覺化平台：https://www.figma.com/design/
Claude 作為 Anthropic 所開發的 AI 模型，提供洞察分析資料與需求內容整理的優勢，運用邏輯推理與生成能力精要複雜指令，讓文字需求可以更順利轉換為設計語彙：https://claude.ai/
前期我們可以利用 Claude 消化複雜文件、客戶的功能需求，並由其產出建議的草稿快速與團隊溝通，在 Wireframe 的階段高效取得時間優勢、加速對焦，而 Figma 則可負責視覺呈現與團隊協作的執行工作，利用兩者分工達成複雜的產品雛型與 UXUI。
第一階段：UX 使用者體驗
這個階段的重點是梳理使用者痛點與需求，並建立清晰的資訊架構與體驗流程，再進階會製成 Wireframe 與 UX Flow 供 UI 繪製。
1. 需求分析與資訊架構
以往 SA 與 UX 設計師需要花大量時間整理需求文件、產品規格書，再手動整理出複雜的流程圖，透過設計師轉化為 Wireframe 與 UI 的前期過程不僅耗時，也容易因人為的疏失而產生資訊版本的落差，而現在我們可以試著將需求文件直接交由 Claude，給予明確指令；
例如：我需要設計一個「線上申請人壽保險」的APP介面。請根據需求與文件，整理出專案背景、設計目標、優化建議，流程包含： 1. 填寫個人基本資料 2. 健康告知與受益人設定 3. 選擇保險方案與繳費方式 4. 上傳簽名與證明文件 5. 完成申請；請幫我生成每個階段的 Wireframe 頁面，包含完整的欄位與介面。
Claude 替我們將需求文件整理出清晰的架構，「線上申請人壽保險」的步驟拆解、受益方個資、方案配置等，並產製每個步驟頁面的基礎欄位、文案，提供 UX 設計師流程上的引導確認以及方向建議。
同樣也能請 Claude 幫我們釐清專案需要達成的設計目標、現有產品 TA，產品痛點等，替後續的介面設計指出明確的注意要點，為我們節省了大量的初階整理工時。
2. 文案撰寫與優化
而金融保險產品的文案需兼具專業性與易讀性，但過去我們常遇到文件中的欄位文案未提供、用字遣詞不一致，因此文案撰寫通常是設計師、PM、客戶反覆溝通的痛點。
透過 Claude 我們可以將文案確認的任務前置化，直接將 Figma 中的線框圖或指令交給 Claude 分析；
例如：請為此投資型保單產品頁面優化標題與描述，使其更具吸引力並符合金融產品的嚴謹性。
Claude 能迅速產出多面向的文案建議，在文字上加入情感化命名，結合行銷層面的優勢，並針對產品類別降低心理門檻、增添設計的溫度，也使設計得已與文案同步進行，有效避免進度延遲。
在金融保險產品中，許多文案需符合相關法規、避免誇大不實，藉由 Claude 的即時資料整合，能在極短的時間內提供可用的文案建議，並轉給客戶參考確認。
第二階段：UI 介面視覺
當我們依照 Wireframe 繪製完成 UI 彩稿後，也能夠借助 Claude 檢查畫面是否遵循規則，並提供更好的優化建議。
1. 介面元素檢核
檢查介面元件是否符合設計系統規範、無障礙設計原則，是個高重複性且易因人為有疏漏的工作，此時我們可以將複雜的表單或是設計好的 UI 介面提供給 Claude；
例如：請檢核第四步驟的此表單的設計是否符合無障礙設計原則，並指出可優化的項目；
Claude 就會從無障礙 WCAG 準則、色彩對比度、引導狀態種類等專業角度提供建議，協助我們在檢視元件及設計弱點，確保設計品質。
第三階段：開發交付與協同
UI 設計稿完成後，常與到工程師實作困難或發現潛在問題，對於不熟悉切版與程式的設計師，除了提供 Figma 的 Dev Mode，也可以同時透過 Claude 產生分析，釐清雙方的問題並找出最佳的解決辦法。
1. 技術問題與優化建議
在開發人員回報 Bug 或實作困難時，可以請他們提供相關的介面截圖、錯誤訊息和問題描述，將這些資訊一併提供給 Claude；
例如：請分析這個畫面的問題，並提供兩種可能的解決方案：一種是介面調整方案，另一種是技術實作方案，以解決目前遇到的主要問題。
Claude 可以幫助我們分析現有介面與開發的落差，並給出程式碼加速與工程師對焦。
透過上面案例可以看到 Claude 幫助我們處理難懂的文件、大量的文字，運用邏輯分析與內容生成快速給予設計引導，而 Figma 則提供了一個強大的畫布與即時協作平台，將需求轉化為具體的視覺設計。
在金融保險這樣重視合規性與精確性的高專業領域，藉由 AI 工具快速處理和分析大量資訊，為設計師提供強大的基礎輔助，提升我們的產出效率與品質，也讓資深的 UXUI 設計師能夠從事更多需要思考與決策的項目，為客戶打造快速、流暢、更優質的產品體驗！
