位於極限開發辦公室一隅……

UI 設計師 Sky 與 PM Moon 雙手抱頭，看起來快要崩潰了。

Moon：「黛西，我真的快瘋了！我們的設計師終於交出了 Figma UI 圖，後面還有很多設計需求，要畫 Prototype 也需要不少時間，而且客戶和老闆常常看到 Prototype（原型圖）後又要改！有沒有辦法讓這個流程再快一點啊？

Moon：「下週要給利害關係人看的 Demo，又只能拿靜態圖片報告，如果這樣他們根本感受不到互動流程的順暢度啊！」

黛西：(笑著走近) 「Moon，我懂你的感受。從設計圖到一個可以實際點擊的原型，這中間的距離有點大，對吧？ 如果我告訴你，現在有一個新助手 Ai Agent，它可以在幾分鐘內幫你把設計圖變成可以互動的原型，你相信嗎？」

黛西：「而且他的原型是透過 Ai Agent 將它變成 HTML、CSS、JavaScript 這樣的靜態互動畫面！而且不只這樣，我們還可以像聊天一樣，請它後續直接修改相關程式碼，後續透過 Github 或做布署，就可以做為原型圖的快速展示。」

Moon：「妳在開玩笑吧？是說... 真的寫出程式碼嗎？HTML、CSS 那些？」

黛西：「係金ㄟ！不僅是這樣，如果確認了樣式，也可以透過  Ai Agent 對話，看個人習慣，將原本的 Code 轉變為 VUE 或是 REACT 版本程式碼，基本上就可以微調使用。

Moon：「太好了！那我們趕快來試試看這個新魔法！」

咳咳~黛西帶你回到現場。

Moon 是不是也說中了你的心聲？ 身為產品團隊的一員，我們都可能經歷過「設計稿美如畫，原型卻繁瑣耗時」的窘境。利害關係人（stakeholders）想看動態效果，使用者測試需要可互動的介面，但設計資源有限，這不僅拖慢了我們的迭代速度，也讓許多寶貴的意見回饋姍姍來遲。

但今天，我們要介紹一位能填平這道鴻溝的神隊友：AI Agent。

準備好了嗎？讓我們一起看看，如何讓 AI Agent 成為我們的「原型自動生成器」，實現從設計圖到原型的魔法！

前面我們已經安裝好 VS code 並開啟了 Agent Mode ，接下來我們一起往下走。

一、取得 Figma access token

1. 下載 Figma Desktop

   試過單純雲端不知道為什麼同樣跑設定，但是雲端不行，所以這邊用 Desktop 和大家說明。

   首先進入 Figma 首頁選擇你要下載的版本。
   

2. 登入電腦版
   

   這時候會有一連串登入彈窗，依照指示登入，成功後會顯示下方畫面。
   
   

3. 前往取得 Token

   進入畫面，點即左上角 [帳號] ，進入後選擇 [Setting]。
   

   接著點擊 [Generate new token]
   

   做相關權限設定。
   

   這時候出現下方的 Mcp Token，就是等等要放入 VS Code 裡面的。
   

二、VS Code MCP 安裝 Figma MCP

1. 安裝 Filesystem

   要讓 Agent 可以新增、讀取我們本機檔案，要裝上 MCP 的 Filesystem。

   打開 VS Code 後，按下 shift + ctrl + p，輸入 mcp，然後點擊「MCP: 新增伺服器」> 「NPM 套件」，輸入 @modelcontextprotocol/server-filesystem 後按下 enter。
   
   
   

   中間會再問一次是不是允設安裝，點擊允許。如果一直沒有畫面跑出來就按 [Enter]

   接著會要我們填讓 MCP 可以有權限的資料夾路徑，這邊不要填整台電腦的根目錄，安全性的考量，我們可以額外開一個新的資料夾給 Mcp 用，就填上資料夾的路徑。

   這邊完成後，會自動產生 mcp.json ，這個是 Mcp 套件的設定檔。

2. 安裝 Figma MCP

   打開 VS Code 後，按下 ctrl + p，就會出現搜尋檔案的輸入框。

   搜尋「mcp.json」會打開我們的設定檔，這邊選擇全域設定。

   因為我們已經安裝了 Filesystem，這邊會看到有一段的設定就是 mcp：

    "servers": {
    "filesystem": {
        "command": "npx",
        "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem@2025.8.21",
            "${input:allowed_dirs}"
        ],
        "type": "stdio"
   

   在 "filesystem" 同一層的地方，貼上以下內容：

    "Framelink Figma MCP": {
        "command": "npx",
        "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=Figma_access_token",
        "--stdio"
        ]
    }
   

   Figma_access_token （紅字這段）記得換成上一段中取得的 Figma access token。

3. 取得 Figma 設計稿的連結

   要注意的是：一定要是從 Figma Desktop 上取得的才有效，不然 MCP 的權限判斷會失敗。

   要複製的 UI 區塊，點右鍵 > Copy link to selection：
   

三、在 VS Code GitHub Copilot Agent Mode 中開始將 UI 轉換為程式碼

1. 在 Agent mode 中 下 Prompt

   以下設計稿，幫我製作成 html、css，所有的圖片檔，都轉成 png，存進 img 資料夾中：
   {Figma 設計區塊的連結}

   按下 enter 後，Agent 會逐步要授權，都給予後就會產生 HTML、CSS、images 檔案。

   這邊之所以多一句「所有的圖片檔，都轉成 png」，是因為 August 測試時，發現 SVG 圖檔會常常遇到問題，不是載不下來，不然就是載很久但還是錯誤的，用 PNG 檔這個問題就少很多。

   接下來我們可以來檢驗一下成果：

   提供了這個 UI 圖：
   

   透過 Agent 產生的 HTML，操作影片如連結：購物網站初版。

   目前這個版本是有所有 Hover 或是點擊效果示意，但沒有互動。透過跟 AI Agent 對話，我請它幫我產出 Wishlist 畫面，這時候會發現，我點擊 [Wishlist] 時，會跳轉到 Wishlist 畫面，影片如連結：購物網站+願望清單。

   雖然現在的 Figma MCP 切出來的頁面，看上去還是有些怪怪的地方，但對話後如果發現它給的內容和你想要的八九不離十，這時候，前端夥伴也可以依照個人習慣，看是否再請 AI Agent 將這些程式碼轉換成為 VUE 或 REACT 版本。

   黛西身為 PM，認為這個功能在初步產原型時也非常方便，透過對話，大概產出我要的畫面流程，這樣就可以提供給我的利害關係人大概知道，整個產品流程。這對於初期想要獲得一些意見，或是回報利害關係人門是非常分方便的工具。

Moon： 黛西，這太酷了！以後我就能直接把老闆想改動的地方用一句話告訴 AI Agent，然後壤它自己變成原型，我再也不用自己或請 UI 夥伴一個一個畫原型，甚至如果成品不錯，團隊還可以從原本的程式碼轉為工程師夥伴們想要的框架，省事很多啊！

黛西： 沒錯！而且有時候甚至會議還沒結束，你就可以短時間更新原型，讓我們在當下就能讓利害關係人看到效果。這就是科技帶來的力量——讓我們專注在價值上，而不是重複性的工作上！