Figma Chrome擴充功能登場 網頁一鍵轉設計稿 AI寫程式更高效

商傳媒｜林昭衡／綜合外電報導

設計協作平台Figma近日推出一款Chrome瀏覽器擴充功能，讓使用者能將網頁內容直接複製並貼上至Figma檔案中，成為可編輯的設計圖層。這項工具大幅簡化了應用程式開發流程，特別是對於依賴人工智慧（AI）輔助寫程式的開發者而言，解決了以往需要耗時描述設計圖給AI的痛點。

根據科技媒體《XDA Developers》報導，該名作者指出，過去在利用AI工具開發應用程式時，常常需要從一個空白介面開始，或花費大量時間向AI描述期望的網頁設計。這不僅效率不彰，AI模型也可能因訓練資料的偏好，預設產生如紫色到藍色漸層、粗體文字、模糊卡片與圓角按鈕等特定設計風格，導致設計成果過於雷同。據悉，這種風格深受Tailwind CSS框架中 indigo-500 預設顏色選擇的影響，並廣泛地滲透到網際網路的設計中。

Figma這款Chrome擴充功能問世後，開發者可選擇擷取網頁上的單一元素，或完整捕捉整個頁面（包括捲動視窗外未顯示的部分）。最關鍵的是，這些被捕捉的網頁元素並非靜態圖片，而是以Figma中實際可編輯的圖層形式匯入，省去了手動重建網頁的繁瑣步驟。該名作者表示：「這並不是一個您將截圖貼入Figma檔案，或是一張模糊圖片可以描繪的狀況。它以實際可編輯的圖層呈現，就像您親手打造的一樣，但其實您只是透過兩次點擊從網頁上『借用』過來。」

這些轉化的Figma圖層能直接作為AI程式碼生成的起點，例如透過Figma Make這樣的服務，AI模型能直接從實際的網站設計來建構程式碼，而非從模糊的文字描述開始。如此一來，模型能夠根據真實網站的細節進行迭代。雖然這款擴充功能無法讓開發者瞬間成為設計師，也無法自動清理混亂的程式碼（例如仍需藉助Claude Code來解開絕對定位的程式碼），但它成功化解了過去在撰寫程式碼過程中，面對空白頁面、努力向AI描述網頁設計的困擾，大幅提升了開發效率。