Visual Copilot：用 AI 將 Figma 一鍵生成現代網頁框架程式碼 (上)

Visual Copilot 是什麼？

由 Builder.io 推出的 Figma-to-code plugin
能即時從既有 Figma 設計稿一鍵產生 React、Vue、Angular、Svelte、Qwik、Solid 等常見的網頁前端框架或原生的 HTML 程式碼
可以搭配自己偏好的 Styling 方式，包括純 CSS、Tailwind、Emotion、Styled Components 等
也可以進階再使用 AI Prompt 持續迭代成其他你偏好的 UI library 像是 MUI、其他框架像是 Next.js 的程式碼、幫忙拆分 component 等工作
2023.12.03 更新：Visual Copilot 的 Quality 功能目前已轉為收費功能，詳情參考連結

Demo

在官方 Release post 中講得蠻詳細的，還有許多生動的 gif 圖示其實不難懂。以下也示範如何從實際體驗 Visual Copilot，到測試是否能將產出的結果用在一個實際的 Next.js 專案中。

這裡可以直接使用官方的示範 Figma 設計稿，登入 Figma 帳號後點擊右上角的「Try it out 按鈕」即可複製一份 template。或也可以使用手邊任一個既有的設計稿：

demo-1

在 template 的最上面很貼心地展示如何使用的 step by step 的圖示。

這裡先點擊左上角像 PS4 的 icon（或可用快捷鍵 shift + i 開啟），選到 Plugins tab，在搜尋框搜尋找到 Builder.io - AI-Powered… 點擊打開 plugin：

demo-2

我們挑選下方的 Sample Designs 中的「Testimonial」這個區塊，並按下「Generate code」：

demo-3

等待幾秒鐘後會跳轉至 Builder.io 的 space 頁面，這裡你可以看到 Visual Copilot 自動將設計稿輸出成 desktop、mobile 版本的前端框架程式碼：

demo-4

在下方的 Framework 及 Styling 上就如前述可以切換你喜好的框架及樣式工具，而一旁還有個 Quality 的 switch bar，這個功能需要你註冊並登入一個 Builder.io 的帳號：

demo-5

登入後打開剛剛的 space，再叫出 code 功能（若沒出現可點擊右上角 < > 的 icon），可以看到下方多了一個像是 ChatGPT 的聊天的輸入框，可以直接下 prompt 利用 GAI 幫忙優化程式碼，官方也提供了一些範例可以直接選擇：

demo-6

這裡筆者測試假如我今天是一個想用 Next.js、Tailwind 來啟專案的人。在選擇完 React、Tailwind 後，我套用了以下幾個 prompt：

套用 Next.js 的 Image 元件：use the Next.js Image component for images instead of the img tag, including converting srcset to src
因為不想要一開始編譯出來的內容含有許多類似 w-[125px] 這種自定義 tailwind class：don't use Tailwind arbitrary values like w-[125px]

我們將上述這段程式碼貼到 CodeSandbox 上的 Next.js v14 template 試試效果，將產出的內容貼到 app/page.tsx 底下，另外在 next.config.js 中加上圖片網域的設定：

const nextConfig = {
  images: {
    domains: ['cdn.builder.io'],
  },
};

另外星星的圖片似乎因為原本是 SVG 所以有問題，所以先試著直接將原本的 SVG content 複製下來取代 Visual Copilot 產出的 <Image /> ，得到以下結果：

demo-7

試著 resize 視窗寬度也可以發現 RWD 也完成了，其實完成度還挺高的，且經過幾次 prompt 調校後，程式碼品質其實還不算太差。

另外，再更進階也可以點擊下方提示的 prompt 按鈕「use Props 」後，會自動帶上「use props instead of hard coding all values, including typescript types」這樣的 prompt 來將原本比較 hard-coded 的 component 轉成帶上 props 的 tsx 元件：

demo-8

這邊參考官方影片的示範，如果你有一個習慣的 prompt 組合，也可以點擊左下角的齒輪按鈕，將你的這些 prompt 設定成自訂指令（跟 ChatGPT 蠻類似的）：

demo-9

設定好後在每次執行去重新產出程式碼時就會自動套用這些 prompt，能讓你節省每次都要重複調校的工。且這裡若設定的好其實可以更接近你原本 codebase 的 coding style，例如像是你的 Tailwind 有什麼樣的 prefix、套用了什麼既有的 UI library 等等。

社群觀點

FE Taiwan 社群討論串
- 將改變前端開發流程。LLM 和編譯器的結合令人興奮，可能影響初級工程師工作機會。
- 認為 AI 能不能「維護現有的程式碼」比「將設計稿轉成程式碼」還要有用。
- Figma 的圖層組成可能對產出的程式碼品質有影響
- 對資深工程師而言，有可能 1 小時能切好的版，而要優化或 debug AI 寫的，可能要花一整天
- 在專案初期快速產出 MVP 的畫面很有效率，但實際落地的專案可能不適合，因可能要考量「Components 結構規劃、引入第三方 UI library、畫面渲染效能等」
Huli 隨意聊
- 實際用過後覺得沒有想像中厲害。
- 有一些問題，像寬高會寫死、字體的樣式跟 font-size 可能會放在每一個元素上，如果要長久維護的話，都需要人工再去調整。
- 目前想到比較適合的地方是一次性的活動網站或是非工程師想要弄一個網站出來
ExplainThis
- 關於 Mitosis 這個流程引申可以去思考「如果生成式 AI 是解答? 要解決的問題是什麼? 」
- 只為 AI 而導入 AI，沒有想清楚「為什麼」就說要用 AI、沒有評估 AI 是不是最合適的工具選擇，那將會是浪費的。
前端輕鬆談
- 目前看到最厲害且完整的用來做 UI 的 AI 工具
- 覺得前端工程師的工作不會消失，畢竟切版工作只佔一小部分。但這工具能讓切版工作變簡單，特別對小公司或短時間缺人時有幫助。

筆者觀點

實測後確實程式碼品質還不如預期，但再加上一些 AI prompt 去調校後，確實能讓它符合 Codebase 裡既有的 coding style（像是一些習慣的 prefix 等）、套用 UI library 等，如果可以把那些訓練好的咒語們放到自訂指令集，應能部分解決程式碼品質問題。
但實測後發現 prompt 目前對 React 生態系似乎比較支援，Vue 相關有時候會不理你又吐出一樣的，後續還是要仰賴工具本身的 AI 模型持續優化。
面對「初級前端工程師要失業了」這種言論的焦慮認為 duck 不必，誠如上述許多大大的觀點，前端工作中切版只佔一小部分，還有許多架構面的優化等待我們去解決。
再進階點說目前 Visual Copilot 也沒辦法做像是 Canvas、WebGL 相關的高互動設計網站。
目前 Visual Copilot 只是 beta 階段所以先免費讓你試用，但等他未來成熟到可以產出更高品質的程式碼時有可能就會需要收費，屆時也會需要評估是否要付費使用這樣一套 AI 工具
- 果不其然，在一兩個月後 Visual Copilot 的 Quality 功能就轉為收費功能，詳情參考連結
就像 ChatGPT 一樣，使用 GAI 工具一樣是回歸到思考「Why & How」才是重點 —— 為什麼要用？要怎麼善用 AI 工具才能加速工作效率？
- 為什麼要用？適合用在哪？
  - 一次性活動網站，因生命週期短，若程式碼品質不需與既有 codebase 綁定可另啟專案搭配 Visual Copilot 快速輸出處理
  - 產品初期 MVP，道理同上
  - 非工程師的人想用 Figma 設計稿搭配現成 headless CMS 系統，直接部署網站
- 怎麼善用 AI 工具加速效率？
  - 同上述目前可用 prompt 指令集去調校程式碼品質與既有 codebase 的 coding style
  - 可以想像他是一個前端助手，以你今天想把不想做的工作丟給他做的話，會怎麼切分任務避免與你核心任務相衝突？想到可以請它快速去支援輸出一些單純的 UI component 讓你後續可以套用。

結論

這篇文章中簡介了 Viusal Copilot 及實際以範例 Demo 如何使用這個工具的基本功能，並筆記了一下社群的觀點及分享筆者的看法。

另外關於 Visual Copilot 這個主題還有運作原理、其他進階功能等，有興趣的讀者可以見下一篇文章 —— Visual Copilot (下) - 運作原理與進階功能。

Visual Copilot 是什麼？

Demo

社群觀點

筆者觀點

結論

References