設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析

AI TOOLS · 2026

▲ Codex × Figma 官方主視覺：程式碼與畫布，第一次真正接在同一條線上（圖片來源：Figma）

CHAPTER 01 · WHAT IS CODEX

Codex 是什麼：2026 年版

2026 年的 Codex，已經跟你印象中「幫忙補全程式碼」的那個 Codex 沒有關係。它現在是 OpenAI 的 coding agent——你給它一個目標，它自己讀懂整個專案、規劃步驟、動手寫碼、開瀏覽器驗證結果，做完回來找你驗收。

入口也早就長成一個全家桶：終端機的 CLI、VS Code 與 Cursor 都能裝的 IDE 擴充、獨立的桌面 App、跑在雲端的代理，以及手機上的遠端遙控。七月開始，桌面版 Codex 更直接併進了 ChatGPT 桌面 App，變成訂閱裡的預設成員——這次合併的來龍去脈，我在〈ChatGPT Work 是什麼〉那篇拆過。

引擎也剛換代。這週開始預覽的 GPT-5.6 系列，第一批開放入口之一就是 Codex——OpenAI 把最新的模型能力，優先灌進了這個 agent。訊號很明確：Codex 是他們押注的主戰場。

費用方面，Codex 附在 ChatGPT 的付費方案裡（Plus、Pro、Business、Enterprise、Edu 都有），免費帳號目前是限時開放部分額度，重度使用可以另外加購 credits。對設計師來說，一個 Plus 就能開始玩。

CHAPTER 02 · WHY IT MATTERS

為什麼設計師該關心一個工程師的工具

設計師這十年學會的第一件協作技能，是把設計稿「交出去」。從紅線標註、Zeplin，到 Figma 的 Dev Mode，我們把交付文件做得越來越精緻——但它終究是文件，工程師還是得看著它重新蓋一次。

2026 年 2 月 26 日，Figma 跟 OpenAI 正式把 Codex 接上 Figma MCP server。這件事改變的是交付的物理性質：agent 不再看著你的截圖用猜的，它直接讀你檔案裡的 design tree——圖層結構、auto layout 規則、variables、元件對應——然後在真實的 codebase 裡動工。方向反過來也成立：跑起來的介面，能一鍵回到畫布變成可編輯圖層。

這也解釋了為什麼 Figma 今年整場 Config 2026 都在講程式碼跟畫布的縫合。設計工具的下一個十年，賭的就是這條線。

CHAPTER 03 · DESIGN TO CODE

把設計稿變成程式碼

流程本身簡單到有點反高潮。在 Figma 裡選一個 frame，右鍵「Copy link to selection」，把連結貼進 Codex，加一句話：照這個設計實作，盡量用我現有的設計系統元件。

接下來發生的事才是重點。Codex 會呼叫 Figma MCP server 的 get_design_context 工具，拿到的是這個 frame 的結構化資料——排版階層、auto layout 規則、樣式、元件資訊——而非一張讓模型用猜的圖片。如果團隊有設 Code Connect，get_code_connect_map 會把 Figma 元件對應回 codebase 裡真正的元件路徑與 import 寫法；get_variable_defs 則把你掛在選取範圍上的 variables——顏色、間距、字級——原封不動抓出來。三個工具疊起來，產出的程式碼吃的是你的 tokens、用的是你的元件，而非另一套長得很像的平行世界。

來源也不限設計檔：get_design_context 同時支援 Figma Design、FigJam 與 Figma Make 的選取內容。白板上畫的 flow，一樣能餵。

CHAPTER 04 · CODE TO CANVAS

把跑起來的介面帶回畫布

真正的新東西在反方向。generate_figma_design 這個工具，能把一個正在跑的網頁介面——本機的、staging 的、正式站的都行——直接轉成 Figma 裡完全可編輯的 frames。

官方流程長這樣：先把應用跑起來，然後叫 Codex 生成 Figma 檔案。它會問你要開新檔還是用舊檔、放進哪個工作區，接著開一個瀏覽器分頁，頁面上方出現一條擷取工具列，讓你抓整個畫面、或只抓你點的某個元素，抓完直接開 Figma 檔案檢查圖層。

回到畫布之後，就是設計師的主場了：套設計系統元件、把顏色字級掛回 variables、調 layout、做互動與空狀態、拉幾個變體出來比較。改完再走一次上一章的流程，把畫布上的決定送回程式碼。這一來一回，官方叫它 roundtrip——我覺得更貼切的說法是，畫布終於變成了程式碼的鏡子。

另外有一支 use_figma 工具走得更遠：它讓 agent 直接在畫布上動手，建 frames、開 variables、調 auto layout——等於用一句話，請 Codex 當你的 Figma 操作員。

▲ Figma 官方直播：Figma MCP × OpenAI Codex，完整走一次雙向工作流（來源：Figma YouTube）

CHAPTER 05 · IN PRACTICE

設計師的五個實戰場景

場景一，side project 不用再排工程師的隊。作品集改版、活動 landing page、給客戶看的互動 demo——貼設計稿連結給 Codex，它在真的專案裡實作，你在瀏覽器裡驗收。從「等下個 sprint」變成「等一杯咖啡」。

場景二，設計系統的大掃除。用 use_figma 批次開 variables、統一命名、把散落的樣式收斂成 collections。這種一做就是一下午的體力活，是 agent 最擅長的題型。

場景三，對稿。把 staging 的頁面用 generate_figma_design 抓回畫布，跟原始設計稿並排，走查間距、字級、色彩的落差。Codex 與 Figma 兩邊帶設計的主管都公開分享過：他們團隊的設計師已經直接在 staging 上工作——在半成品上改，而非在稿子上留言等人改。

場景四，把網路上的靈感抓成圖層。任何跑在瀏覽器裡的頁面都能變成可編輯 frames——研究競品的版型結構、拆解你喜歡的網站怎麼排字，從「截圖貼參考板」升級成「直接拿到圖層」。當然，拿到圖層是為了研究，抄是另一回事。

場景五，用圈選代替需求文件。Codex 的內建瀏覽器支援註記：介面哪裡不對，直接在畫面上圈起來寫一句，agent 照著改。給前端回饋這件事，第一次比開會快。

CHAPTER 06 · GETTING STARTED

十分鐘接起來

設定沒有想像中工程。裝好 Codex 桌面版（或直接用 ChatGPT 桌面 App 裡的 Codex），左上角開 Plugins 面板，找到 Figma 按安裝，跳出授權畫面按 Allow access，完成。回到 Codex，Figma 的工具就在了。

▲ Codex 桌面版的 Plugins 面板：Figma 外掛一鍵安裝，OAuth 授權後即接上 remote MCP server（圖片來源：Figma）

背後接的是 Figma 的 remote MCP server（mcp.figma.com/mcp），這是官方建議所有人用的版本——全席次、全方案可用，功能也最完整。另外有一個跑在 Figma 桌面 App 裡的 desktop 版 server，主要留給組織與企業的特殊場景，需要付費方案的 Dev 或 Full seat。CLI 與 IDE 版的 Codex 也能透過 MCP 設定接上同一個 server，工具面完全一致。

Figma 還針對 agent 出了 skills——一組教 agent 怎麼把 Figma 用好的說明包，跟 MCP 工具一起裝，產出品質會再上一階。

CHAPTER 07 · LIMITS AND COSTS

限制、費用與踩坑提醒

第一，垃圾進垃圾出。get_design_context 回傳的是你檔案裡實際存在的東西：圖層叫 Group 5、元件全是 detach 過的孤兒、顏色全寫死 hex——那 agent 拿到的就是這些，產出自然是一次性的近似碼。語意命名、元件掛好、variables 掛滿，這些老生常談的檔案衛生，現在直接決定程式碼品質。

第二，選取範圍別貪心。一整頁複雜介面的 design tree 可能大到塞爆 agent 的 context，一次選一個區塊，產出反而更準。這跟給人類工程師切 ticket，是同一個道理。

第三，錢的事。Codex 本體要 ChatGPT 付費方案；Figma 這邊，remote server 的讀取類功能全方案可用，但寫入畫布類（generate_figma_design、use_figma）目前是 beta 免費，官方已預告之後會改成用量計費。現在是把工作流建起來的甜蜜期，但別把「免費」寫進長期預算。

第四，權限意識。你給 agent 的是真實檔案的寫入權——codebase 跟 Figma 檔都是。開始前想清楚它能碰哪個專案、哪個工作區，跟帶新同事是同一個道理：先給小案子，做得好再放大。

CHAPTER 08 · TAKEAWAYS

重點整理與觀點

最後說點工具表之外的事。這波整合真正的主角是 MCP 這條匯流排——同一個 Figma MCP server，接的還有 Claude Code、Cursor、VS Code、Windsurf。Figma 二月也發布了 Claude Code to Figma 的對接，如果你的 agent 主力是 Claude 這一系，這套雙向工作流一樣成立。Codex 的優勢在產品面的完整度：桌面 App 的多 agent 管理、內建瀏覽器與註記、跟 ChatGPT 訂閱綁在一起的低門檻。

而 Figma Make 是另一個象限的東西：它在畫布裡生成品，適合探索；Codex 接的是你真實的 codebase，適合出貨。兩個都會留下來，用途本來就不同。

設計師該做的判斷，我在〈設計師到底該怎麼用 AI〉畫過一張分工地圖：發散與執行交給 agent，收斂與拍板留給自己。Codex × Figma 把執行層的摩擦降到了歷史新低，這反而讓另一件事變得更值錢——你知不知道自己要什麼。

SUBSCRIPTION

AI 覺醒設計應用攻略

AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。

了解訂閱 →

常見問題

Q：Codex 要付費嗎？設計師該從哪個方案開始？

A：Codex 附在 ChatGPT 的 Plus、Pro、Business、Enterprise 與 Edu 方案裡，免費帳號目前是限時開放部分額度，用量吃完可以在 Codex 裡加購 credits。設計師從 Plus 起步就夠用了。

Q：不會寫程式的設計師，用得動 Codex 嗎？

A：可以。整個互動介面就是自然語言，你負責講清楚要什麼、驗收像不像，程式細節它自己處理。真正的門檻在描述能力與驗收眼光——而這兩件事，本來就是設計師的強項。

Q：Figma MCP server 需要什麼 Figma 方案？

A：remote 版全席次、全方案都能用，這也是官方建議的版本；desktop 版要付費方案的 Dev 或 Full seat。寫入畫布類功能在 beta 期間免費，Figma 已預告之後會改採用量計費。

Q：Codex × Figma 跟 Figma Make 有什麼不同？

A：Figma Make 在畫布裡用 prompt 生成品，適合快速探索；Codex 接管的是你真實的 codebase，產出能進版本控制、吃你設計系統的程式碼，還能把跑起來的結果送回畫布。一個管探索，一個管出貨。

Q：get_design_context 產出的程式碼可以直接上線嗎？

A：取決於你檔案的衛生程度。圖層語意命名、元件掛好 Code Connect、樣式掛滿 variables，產出就會對回你的真元件與 tokens；反之就會是一次性的近似碼，還是得人工整理。

Q：Claude Code 也能接 Figma MCP 嗎？

A：可以。同一個 Figma MCP server 支援 Codex、Claude Code、Cursor、VS Code、Windsurf 等多個 client，Figma 在 2026 年 2 月也發布了 Claude Code to Figma 的對接，雙向工作流同樣成立。