用 Codex 做設計。

Codex 到底是什麼（以及不是什麼）

先消歧，幾乎每個搜「Codex」的人都會被絆一下。最早的 OpenAI Codex 是 2021 年的程式碼補全模型，驅動過早期 GitHub Copilot，2023 年已棄用。本文講的不是它。今天的 Codex 是 OpenAI 的 Agent 式編碼工具 —— 從自然語言任務出發，規劃、編寫、執行並驗證程式碼。

現代 Codex 有四種形態：終端 CLI（用 Rust 重寫、Apache-2.0 開源）、面向 VS Code / Cursor / Windsurf 的 IDE 擴充套件、用於非同步委派任務的雲端/網頁版，以及帶內建瀏覽器和 Computer Use 的桌面 App。

• 預設模型: 截至 2026 年中，推薦模型是 gpt-5.5；而 gpt-5.4 是 OpenAI 明確為前端和 Computer Use 訓練的那個模型。
• 指令檔案: Codex 讀取專案裡的 AGENTS.md（跨工具通用標準）作為專案規則 —— 也就是寫你設計約定最自然的地方。
• 沙箱: 它跑在核心級沙箱裡（預設 workspace-write），改你 UI 的 Agent 不會跑到專案之外亂動。

• 廠商：OpenAI
• 憑據：OpenAI API key（BYOK）或 ChatGPT 訂閱（Free / Go / Plus / Pro / Business / Enterprise）
• CLI 許可：Apache-2.0，開源

為什麼 Codex 現在能做設計

2026 年初有三件事湊到一起，才讓 Codex 從通用程式碼生成器變成真正的設計工具。

• 一個為前端訓練的模型: OpenAI 釋出了 GPT-5.4 —— 它第一個主線版為前端和 Computer Use 訓練的模型，對設計流程裡的影象理解大幅提升，自我驗證也更強，甚至能在定稿前先生成情緒板和多個視覺方案。
• 一個官方前端 skill: openai/skills 目錄裡有一個精選 frontend-skill，強制真審美：無卡片佈局、整屏 hero、品牌優先的層級、剋制的動效、最多兩種字型加一個強調色 —— 還逼 Codex 先寫「視覺論點」再動手。
• 瀏覽器驗證: 配上 Playwright skill，Codex 會真開瀏覽器、按斷點縮放，並把輸出跟參考圖比對，而不只是「構建透過」就完事。

三件事背後的道理是一樣的：Codex 預設沒有審美。只有當你給它約束 —— 設計系統、審美 skill、具體參考 —— 它才能產出好設計。Open Design 打包的正是這三種輸入，這也是兩者契合的原因（下文詳述）。

從零配好 Codex 做設計

從一臺乾淨的機器，到一個能構建並驗證 UI 的 Codex，完整路徑如下。

# 1. 安裝 Codex CLI
npm install -g @openai/codex
# 或：brew install --cask codex
# 或：curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. 鑑權（推薦用 ChatGPT 登入，額度更高）
codex            # 然後選 “Sign in with ChatGPT”

# 3. 生成專案上下文
codex            # 在專案裡執行 /init 生成 AGENTS.md

# 4. 裝官方前端 skill，然後重啟 Codex
# （在 Codex App 裡）$skill-installer frontend-skill

# 5. 接 Figma MCP server（可選，做設計交付）
codex mcp add figma --url https://mcp.figma.com/mcp

• 把設計規則寫進去: 把 token、基礎元件、約定寫進 AGENTS.md 或 DESIGN.md 並讓 Codex 指向它們，輸出就會貼合品牌，而不是退回那套通用樣子。
• 選對推理檔位: OpenAI 提到：低到中等推理檔位的前端效果，往往比最高檔更好。

截圖轉 UI 的工作流

Codex 做設計最高槓杆的迴路，是把參考圖變成可用的響應式 UI，再迭代到對齊為止。OpenAI 官方指引歸納為五步。

1. 從你手頭最清晰的視覺參考出發 —— 而且要包含多個狀態（桌面和移動、hover、空態、載入態），不只是一張 hero 圖。
2. prompt 要具體；含糊的 prompt 只會產出通用 UI。
3. 準備好設計系統，並告訴 Codex token 和基礎元件在哪。
4. 開啟 Playwright 互動 skill，讓 Codex 真在瀏覽器裡渲染並按斷點縮放。
5. 迭代時讓 Codex 把實現跟截圖比對 —— 而不只是確認「能構建」。

喂圖可以把截圖拖進終端，或用 image 引數，然後用具體約束來 prompt：

codex -i reference-desktop.png -i reference-mobile.png \
  "用 React + Vite + Tailwind + TypeScript 實現這個設計。
   儘量複用我現有的設計系統元件和 token。
   對齊間距、佈局和層級；做成響應式。
   用 Playwright skill 驗證 UI 跟參考圖一致，
   不一致就一直迭代。"

在第二個終端裡跑 dev server，prompt 保持小而聚焦，好的迭代就 commit、壞的就 revert（並告訴 Codex 你回退了），這樣每一輪都在乾淨的基礎上推進。

Codex + Figma：設計 ↔ 程式碼雙向打通

2026 年 2 月 OpenAI 和 Figma 宣佈官方合作，把早先的 Figma MCP beta 升級成一等公民級的雙向整合。兩個方向都能走。

• 設計 → 程式碼: 在 Figma 裡複製某個 frame 的「link to selection」，粘進 Codex 配合 get_design_context，讓它用你現有的元件庫實現這個設計。
• 程式碼 → 設計: generate_figma_design 工具（「Code to Canvas」）能把跑起來的 UI 變回可編輯的 Figma frame —— 整屏、選中元素或整個檔案都行。

Figma MCP 以遠端 server 形式執行且免限流。接一次，Codex、Claude Code、Cursor、VS Code 等都能用 —— 這種可移植的多 Agent 能力，正是 Open Design 要編排的東西。

Codex vs Cursor vs Claude Code 做設計

做設計沒有唯一贏家 —— 每個 Agent 強在不同地方，老手會疊著用。公允的總結：

社群反覆得出的結論是：審美來自人。三者在沒有 skill、參考和約束時，都會退回通用樣子。這才是要解決的真問題 —— 而它是「設計工具」形狀的，不是「模型」形狀的。

常見坑，以及怎麼避開「AI 味」

對 Codex 生成設計最常見的吐槽是「顯得通用」—— 柔和漸變、漂浮面板、超大圓角、誇張陰影，那種 Inter 字型加紫色的味道，「一看就是 AI 做的」。其他常見問題還有移動端佈局崩、指令文案洩漏進 UI、以及很快撞到用量上限。

• 裝一個前端 skill: 精選的審美 skill 逼 Codex 選定一個真方向，而不是預設那套樣子。
• 開啟 Playwright 驗證: 讓 Codex 跨斷點渲染並自檢，佈局就不會在移動端悄悄崩。
• 喂 token 和參考: 真實的設計 token 和參考截圖，是對輸出質量影響最大的那個槓桿。
• 把規則寫進 AGENTS.md: 把「不要 hero 卡片、最多兩種字型、品牌優先層級」這類規則放在 Agent 每次都會讀到的地方。

注意：每條緩解措施，本質都是給 Agent 一套精選的設計上下文。而逐個專案手工維護這套上下文，正是 Open Design 幫你省掉的苦活。

在 Open Design 裡用 Codex

Open Design 就是上面這套工作流一直在呼喚的那個開源設計層。它把 Codex 當作一方介面卡，外面包上精選的 skill 與設計系統庫、結構化渲染流水線、本地桌面 UI —— 讓那些讓 Codex 變好的設計上下文從第一次執行就在，而不是每次手工拼。

1. 安裝 Open Design，選 Codex 作為你的 Agent。
2. 用 OpenAI API key（BYOK）或 ChatGPT 訂閱鑑權 —— 憑據留在你機器上，絕不經我們中轉。
3. 選一套設計系統和一個 skill，生成審美一致的 deck、原型和落地頁。
4. 每個產物和 DESIGN.md 都在你自己的 repo 裡，不在託管雲端。

同一個 Codex Agent、同一把金鑰 —— 外加一套真正可移植的開源設計工作流。它本地優先、Apache-2.0，你的工作和憑據都不離開你的機器。

常見問題

1. 01 OpenAI Codex 真的能做設計嗎？ +

   能 —— 只要上下文裡有前端 skill、設計系統和真實參考圖，Codex（尤其在 GPT-5.4 上）能產出生產級、響應式的 UI，還能在瀏覽器裡自檢。沒有這套上下文它就會退回通用樣子，而這正是 Open Design 補的缺口。

2. 02 這是 OpenAI 的 Codex Product Design 外掛嗎？ +

   不是。Open Design 是獨立開源專案，把 Codex 作為 Agent 整合，用本地優先的開源 skill 與設計系統庫補充官方工具。

3. 03 用 Codex 做設計需要 ChatGPT 訂閱嗎？ +

   OpenAI API key（BYOK）或 ChatGPT 訂閱都行。ChatGPT 登入通常額度更高；無論哪種，Open Design 都不中轉你的憑據。

4. 04 前端設計該用 Codex 還是 Claude Code？ +

   兩個都強。Claude Code 以具體、懂程式碼庫的設計決策見長；Codex 在 GPT-5.4 之後視覺打磨很強，且擅長沙箱化的非同步委派構建。很多團隊兩個都用 —— Open Design 讓你換 Agent 時不用換設計工作流。

5. 05 怎麼把 Codex 接到 Figma？ +

   加上官方 Figma MCP server（codex mcp add figma --url https://mcp.figma.com/mcp）。之後用 get_design_context 把 Figma frame 實現成程式碼，用 generate_figma_design 把跑起來的 UI 推回可編輯的 Figma frame。

6. 06 怎麼避免那種通用的「AI 味」審美？ +

   裝一個前端 skill、喂真實的設計 token 和參考截圖、把品牌規則寫進 AGENTS.md、並開啟 Playwright 驗證。Open Design 把這些做成精選庫，你就省掉了逐專案的配置。

7. 07 Open Design 跟 OpenAI 有關聯嗎？ +

   沒有。Codex 是 OpenAI 的產品；Open Design 是獨立開源專案，以一方介面卡的方式支援它。OpenAI 和 Codex 是 OpenAI 的商標。

8. 08 我的檔案和憑據安全嗎？ +

   安全 —— Open Design 本地優先。你的檔案、產物和 DESIGN.md 都留在自己的 repo，OpenAI 憑據由你的 Agent 直接使用，絕不經 Open Design 伺服器中轉。