一鍵生成：用 AI 將 Figma 設計稿直接生成可維護的程式碼

Kordan Ou -

長期以來，切板總是對於前端開發人員來說最痛苦且費時的事情，我們目睹了 Web 技術的驚人進步，但將設計稿直接轉化為程式碼一直沒有令人滿意的解決方案。通常我們需要數小時的精細工作去確保，以確保程式碼刻出來的畫面在視覺上跟設計相符，而且在功能上無瑕疵。

從歷史角度來看，我們曾嘗試透過各種工具和插件來縮小設計和程式碼之間的差距。儘管這些解決方案提供了一些幫助，但它們仍然需要大量手動工作，並且容易出錯。

就在昨天， Builder Velocity 發佈了 Visual Copilot（由 AI 驅動的「Figma to Code」），只需一個滑鼠點擊即可將 Figma 設計即時轉換為 React、Vue、Svelte、Angular、Qwik、Solid 或 HTML 程式碼。可以使用自己偏好的 CSS，包括純 CSS 程式碼、Tailwind、Emotion、Styled Components，並使用 AI 持續迭代或 JavaScript 框架（例如 Next.js）的程式碼。

## 「Figma to Code」- 加入 AI 帶來的革命性演進

Visual Copilot 這一革命性解決方案解決傳統上設計轉換為程式碼的困難問題，有著以下特點：

  • 即時程式碼生成：「Figma to Code」能夠一鍵生成高質量的程式碼，支援 React、Vue 和 Svelte 等框架。舉例來說，我們可以使用 HTML 和 Tailwind CSS 來生成語義化且優化的程式碼。
  • 多元的框架支援： 它支援各種框架和樣式系統，自動生成語義化的元件名稱結構和 CSS 變數，提高了程式碼的可讀性和可維護性。
  • 支援多裝置以及 RWD：Visual Copilot 自動調整元件以適應所有螢幕尺寸，無需手動調整移動回應能力。當您調整螢幕大小時，設計會無縫適應。
  • 可重用性： 「Figma to Code」使用 TypeScript 道具類型，將程式碼分解為多個可重用的元件，提高了程式碼的模組化和可擴展性。
  • 自訂偏好： 開發者可以新增自定義指令以影響程式碼生成，這意味著開發者可以根據項目需求訂製生成的程式碼。
  • LLMs 的參與： LLMs 在轉換文字為程式碼方面表現出色，為「Figma to Code」提供了極高的精確性、質量和速度。
  • 輕鬆發佈： 「Figma to Code」支援一鍵發佈到即時生產網站，簡化了部署過程。

（這篇文章 圖文並茂，並且附上簡短影片，推薦閱讀。）

結合 AI Prompting 協助修改特定元件

在演示中，本來是靜態畫面的計時器，就直接透過 AI 下 Prompt 讓這個計時器真正互動起來，然後就可以點擊同步，將它同步到程式碼庫，直接 Hot Reload 重新啟動，就這樣，一個漂亮的滴答滴答的計時器就出現了，無需思考，只需看到它直接在眼前發生的過程。連接到程式碼庫、建立自定義元件、點擊同步、透過 API 在可視化編輯器畫布內使用真實網站發佈就這麼簡單。

Visual Copilot 應用 AI 的突破在於，產生高質量的程式碼。雖然 LLMs 在將文字轉換為文字提示程式碼方面非常出色，但這往往不是開發者所需要的，開發者需要開發符合設計稿中詳細描述的規格，而 LLMs 並沒有接受過這方面的訓練，從根本上說，它們無法以經過專門訓練的模型的準確性、質量和速度進行轉換。

Visual Copilot 用超過 200 萬個資料點訓練專門的模型，以便將平面和非結構化設計轉化為回應式程式碼層次結構，然後將其傳遞給開源編譯器 mitosis，後者會將其編譯為您所選擇的框架的程式碼，這是 LLMs 非常瞭解的格式。

與過去不同，生成的是可維護的程式碼

多數的開發者可能會想「我已經有既有的程式碼以及元件庫了，這個工具不一定能幫到忙。」，但實際上 Visual Copilot 可以允許我們使用程式碼中已有的其他元件來建立元件，或是使用映射到 Figma 元件的設計系統進行設計，當我們使用這些元件進行設計並點擊匯入後就可以自動使用它們。

Visual Copilot 上可以選擇任何層並輸出高質量的程式碼，與原本程式庫的設計保持一致。包含樣式化元件，它會自動為你的元件賦予簡潔的上下文名稱，然後對於其他任何需要的東西，需要做的就是寫一個提示。

舉例來說：如果使用了 Material UI 元件，我可以直接告訴 AI，就像我們自己寫的一樣，，使用了 nextjs 圖片元件，也可以得到從 next image 匯入的程式碼，並直接使用 nextjs 圖片元件。

實測：如何使用 Visual Copilot

1. 使用 Figma Plugin 轉換設計稿

首先要準備好既有的 Figma 設計稿，然後下載 Figma Plugin 使用 Visual Copilot，一開始使用的時候是不需要有 Builder.io 的帳號，產生程式碼之後按下右上角的 Save，這時候就需要註冊帳號，未來所有產生的程式碼都會儲存在這個帳號之中。

2. 鏈接產生的程式碼到既有的 Repo

在 Figma 透過 Builder CLI 工具，可以選擇產生新的專案還是連結既有的專案。

在程式庫的初始化動作如下，其中的 app/page.tsx 是初始樣板的預設頁面：

npm init builder.io@latest
cd builder-app
npm install
npm run dev
cd builder-app
vi app/page.tsx

一旦鏈接之後就可以將程式碼與 Builder 的編輯畫面同步，我們可以即時預覽程式碼的變化，馬上就可以看到更改後的結果並且是雙向同步的。例如：給定了一個新的設計，而程式碼庫中還沒有，我們可以簡單地刪除這裡的內容，到 Figma 中選擇我們想要帶過去的內容，我們可以點擊複製，然後簡單地粘貼我們漂亮的新內容。

簡單而無縫的方式即將到來，你將能夠把 Figma 連接到一個條目和 Builder 中，我們只需點擊推送內容，最新的更改就會即時反應在 Builder 中，當你對 Builder 中的最新版本感到滿意時，再推送一次，我們就可以發佈了。

匯入設計後，只需點擊一下，您就可以將其發佈到您的即時製作網站。這個過程沒有任何繁瑣的步驟，例如命名或手動程式碼調整。即時網站透過我們強大的發布 API 進行即時更新，無需任何程式碼部署或送出。這幾乎是即時的，確保設計不僅可以快速轉換為程式碼，而且可以立即用於即時平台上的使用者互動。

結語

根據我的實測（如下圖），我將設計稿轉換為程式碼花不到三分鐘，而且一行程式碼沒有改就可以得到這個效果，這可能會完全改變前端開發的方式，大幅提高效率和品質。它代表著前端開發的未來，並且這個還只是在初期 Beta 階段，我們可以期待 Builder.io 不斷地改進和創新。

Visual Copilot "Figma to Code" 這個工具目前還是免費，根據他們的發佈會，未來他們還會推出 iOS 以及 Android SDKs，可以直接用可視化的方式生成雙平台的程式碼。

Join the private beta here to learn how to optimize your mobile workflow with Builder native mobile SDKs.