前言

到這裡，我們已經順利完成「註冊功能」設計的部份，為自己鼓掌👏！
在這個 AI 盛行的年代，想分享如何運用 AI 透過自然語言輸入，或是直接匯入設計稿，快速生成對應的前端介面。

簡單來說，它能做到的事有：

• 用文字描述介面或餵設計稿，一鍵生成 UI 元件的現代前端框架程式碼。
• 支援即時畫面預覽，邊看邊修改元件內容。
• 完成好的成品，可以直接匯出程式碼。

我們就來實作看看，怎麼把Figma設計好的畫面，用 V0 快速轉換成 Vue 前端程式碼，一起來感受AI的魔法魅力吧( •̀ ω •́ )✧！

登入 V0，開始製作前端介面

1. 前往 v0網站 註冊帳號，如果是第一次使用請先完成註冊。

2. 登入後，在首頁的對話框下方可以看到「Import from Figma」按鈕，點擊下去開始匯入設計專案。
   

3. 第一次使用會跳出授權視窗，閱讀內容確認沒問題後，請點選「Allow access」完成授權。
   
   （確認條款內容，沒問題就繼續下一步！）

4. 接著到 Figma 工作區域 複製要匯入的圖層Link：
   進到設計工作區後，點右上角「Share」，找到「Copy Link」複製圖層連結，看到文字呈現「 Link copied! 」就表示已成功複製。
   

5. 接著回到 V0 網站，貼上連結並按「Next」繼續。此時畫面上會出現剛剛複製的圖層樣貌，並列出使用到的顏色色碼，確認沒問題後按「Confirm」開始生成。
   

6. 接著就會進入對話框，專案程式碼會開始生成，完成後會出現「 Preview 」，顯示成果預覽。
   
   （透過v0直接生成的Preview結果）

（Code的部份可以查看生成的程式碼）

7. 從「Preview」可以看到有圖片缺失，這時候可以回到Figma將圖片下載，直接拖曳進 V0 的「Code」區域後送出對話框，AI就會自動幫你更改補上對應程式碼，圖片就能正常顯示囉！
   

8. 預設生成為 React，可使用 Prompt 指令請 AI 轉為 Vue 寫法。
   如果沒有做任何設定，預設 V0 會以 React 語法生成，不過我們可以用自然語言下指令轉換為 Vue 版本，在對話框輸入以下 Prompt：

請將原本的程式碼轉換為 Vue Composition API 的寫法，使用 `<script setup>` 語法風格，並以 JavaScript 撰寫，不使用 TypeScript。 

執行後，原本多個檔案會整合成一個 SeaMuseum.vue，再仔細觀察的確也有照我們的要求以Vue Composition API風格以及 <script setup> 的方式撰寫，CSS的部份我們沒有特別要求，所以樣式仍維持 Tailwind。

9. 點選右上角「Download」的icon圖示，下載單一元件檔(SFC)，點擊後會跳出視窗提示是否要修改檔案名稱，沒問題後按下「確定」會開始下載。
   
   （觸發「Download」圖示，會顯示修改檔案名稱彈窗詢問。）

結語

像這樣透過 AI 就能幫我們把整體畫面架構，與初步切版的工作先處理好，讓我們能把更多心力專注在資料串接、效能優化與邏輯設計上。
善用 AI 作為輔助工具，可以大幅提升開發效率，讓時間更集中投入在其他需要更花腦力思考的地方 💡

不過也要提醒一點很重要的事❗——AI 生成的程式碼仍然需要我們進行 code review，看懂它的處理方式、整體架構邏輯，這樣未來一旦需要修改功能或處理 Bug 時，才有辦法快速掌握出問題的位置與所屬檔案，才能真正達到高效維護與穩定開發哦。

參考資料與延伸閱讀

⑴ 使用工具來源：v0.app