我自己平常做專案，現在主力一直都用 Codex 了，因為它的客戶端體驗真的很不錯。但不知道你是不是也遇過一個特別尷尬的場景：
當你請 Agent 順手幫你擼一個好看一點的 UI，出來的效果往往讓你覺得很不舒服。
經典的深色大卡片、毫無呼吸感的留白，甚至連自己專案原本的主題色和 Logo 都對不上，反正就是感覺非常不對勁。
你可能會說：「給 Agent 塞點 frontend design 之類的 Skill 不就好了嗎？」
我以前也這麼以為。但實際測下來發現真的沒那麼簡單：設計 UI 根本不是純靠 Prompt 就能搞定的事，它深度依賴專門的視覺模型能力、上下文設計資產的沉澱，以及反覆的微調、對比。
而 Codex 預設的對話框，天生就不是拿來做視覺設計的。
直到前幾天，我看到 Superdesign 在 Codex（ChatGPT）裡面上了官方外掛。我們之前的文章介紹過 Superdesign，不過都是 Web 平臺的形態，沒想到這麼快就整合進 Codex 裡面了。
官網上一句話總結它的定位：Turn CodeX into a design agent。
我實際試過一遍，把 UI 生成的工作流在自己的機器上跑通了。今天就結合我的實測案例，順便聊聊我對 AI Design 這件事的幾點思考。
為什麼直接在 Agent 裡做 UI 總是做不好？
在看具體怎麼用之前，我們先來琢磨一下這背後的根本問題。
如果你用過各種 Coding Agent 畫頁面，一定會發現有幾個天生的痛點，如果直接放在 Codex 純對話流裡做，基本上不可能做好：
1. 設計資產的沉澱與繼承問題
做過正式產品的同學都知道，不管是做 Web 落地頁，還是做一些通用的宣傳物料、社群海報，設計從來不是憑空生成的。
它高度依賴你產品現有的設計資產（Design Assets）——例如團隊的 Logo、配色規範、排版字體、間距規範、各種 Design Token，甚至是互動動效風格。
普通的 Agent 很難做到這一點，你每次都要在 prompt 裡費盡力氣告訴它「我的主色調是 #xxx，Logo 路徑在 public/logo.svg，別給我用紫色漸層」。只要稍微漏講一點，它基本上就會自己隨便發揮，導致效果不理想。
2. UI 的「可探索性」
寫程式的邏輯往往是非黑即白，程式跑通了就是跑通了。
但設計完全不是這麼回事，設計是極度主觀且高度依賴探索的。
面對同一個需求，你通常會想看兩到三個不同風格的變體（Variant），例如極簡風、深色科技風、扁平插畫風。看完之後，可能覺得 A 變體的排版好，但 B 變體的 Hero 區域更有衝擊力，你會想基於某個頁面繼續微調迭代。
你想想看，如果讓 Agent 在本機程式庫裡做這種多變體探索，得有多麻煩？
你只能讓它一遍遍改本機檔案，或者用那種極其繁瑣的 Git Worktree 切來切去，看效果還得一次次啟動本機 dev server，而且要比對不同效果也很麻煩。
實測：把 Superdesign 接入 Codex
既然 Superdesign 上了 Codex 外掛市集，那整合起來就極其省事，完全不需要在本機折騰什麼複雜的環境。
第一步：在外掛商店一鍵啟用
打開 Codex 的外掛中心，搜尋 superdesign：
找到 01 Superdesign 後，點擊進入詳細頁面，直接按右上角的「立即試用」即可。
點完之後，Codex 會自動彈出瀏覽器授權視窗，我們在瀏覽器裡點一下授權，整個綁定就完成了。
第二步：雙螢幕連動，右側畫布即時渲染
你在 Codex 左側對話框裡輸入設計需求（例如「幫我現有的專案做一個落地頁」）。
這時候 Codex 介面右側會自動彈出內建的 Superdesign 設計畫布。
而且它生成的時候是串流即時渲染的，所見即所得。你不用傻等它把所有程式碼寫完再回到本機 run build，在畫布裡就能眼睜睜看著整個頁面的版面配置、排版、卡片一點一點渲染出來。
在生成的過程中，我注意到一個非常驚豔的細節：
我從頭到尾都沒有主動交代我的 Logo 放在哪裡，也沒有提供任何配色規範。
但 Superdesign 會在生成之前，自動去掃描並讀取程式碼庫裡的 UI 資產與品牌風格，把原生的 Logo、調性直接抓取出來，精準融入到設計稿裡。出來的第一版，整體質感和我們原本的產品風格就是嚴絲合縫。
而且從左側的執行日誌可以看到，它直接調用了專用的視覺生成模型（例如 Gemini 3.1 Pro 等），確保整體版式與程式碼展示都維持在高水準。
第三步：Agent 自我質檢與自動二次迭代
很多生成工具生成完第一版就算交差了，好壞全靠運氣。但 Superdesign 這個插件非常聰明：生成第一版之後，它會讓 Agent 自己對生成品質做一次完整的 Code Review 與視覺審查。
你看左側對話框裡的真實記錄：
「設計稿已生成……我正在檢查原始 Logo 是否正確使用，以及模型名稱和範例內容是否符合專案規範。」
「檢查發現第一版只生成了首屏和能力介紹，缺少接入步驟、模型列表與頁尾。我會在同一份設計稿中補齊，並修正首屏寬度和過度承諾的相容性文案。」
它自己發現第一版少了接入步驟、模型列表和頁尾，於是完全沒有人工介入，就自動發起了第二輪優化！
優化後的效果非常明顯：補齊了完整的程式碼示範區塊、開發者接入步驟、多模型選擇 tab 以及 FAQ，資訊層級和細節都更豐富了。最後的頁面比較長，這裡就不展開示範了。
第四步：在畫布自由微調，一鍵套用回程式碼庫
當頁面在畫布裡渲染出來之後，它本質上就是一個自由節點。
你可以在畫布裡直接進行多種視覺探索：以目前節點為基礎分岔出不同的設計變體、微調局部文案和元件樣式。
等你選定最滿意的那一版，直接在 Codex 裡告訴它：「就用 xxx 這版，套用到程式碼庫。」
它就會自動把畫布裡確認的最終程式碼和樣式落到你的本機專案中，整個工作流程就全部閉環了。
關於 AI Design，我的一些看法
首先，我覺得「設計資產的沉澱」是走向正式環境的必經之路。
很多玩具級的生成工具之所以無法在真實業務落地，就是因為它們是「無狀態」的，每次生成都無法感知到業務情境。
真正的工程級設計工具，第一件事一定是資產感知：你的品牌資產、設計系統、元件庫在哪，它就該去那裡讀取。現在比較流行的 impeccable skill 也在朝這個方向發展。
其次，在設計情境下，畫布（Canvas）比對話流更合適。
對話流是線性的，而設計是網狀且並行的，各種分支、變體在所難免。如果給 Agent 配備一個無限畫布，把各種變體平鋪開來，讓人直觀篩選和審視，這種協作模式對設計情境來說，體驗無疑更好。
還有，專業的事交給專業工具，不需要所有事情都交給通用 Agent。
Codex 不需要把自己變成 Figma，Superdesign 也不需要去改寫一個底層的 Coding Agent。
透過官方外掛系統，把最強的設計模型、畫布體驗和資產管理能力，無縫接軌到開發者每天都在用的 Codex / ChatGPT 工作流程裡。
如果你平常也在用 Codex 寫程式，卻經常被寫前端 UI、做各種頁面折磨，強烈建議去 ChatGPT 外掛中心裝來試試看。直接在 Codex / ChatGPT 外掛商店搜尋 Superdesign 即可。