AI 設計棧剛剛分化：Claude Design、Codex Sites、Figma、Lovart 與 MCPlato 控制室
一篇面向 2026 年的深度評測，涵蓋 Claude Design、Sites in Codex、Figma、Lovart 和 MCPlato，並說明為什麼 AI 設計現在屬於 Web 體驗棧，而不是贏者全拿的單一品類。
發布於 2026-06-05
2026 年，錯誤的問題是 「哪款 AI 設計工具最好？」
更精準的問題是：你要雇用 AI 完成哪項工作？ 創辦人需要落地頁概念；產品團隊需要響應式 Web 體驗；工程師需要託管 demo；成長團隊需要活動視覺。「AI 設計」已經分化為視覺探索、託管 Web 建立、設計系統治理、行銷創意，以及控制室式協調。
這就是為什麼 Claude Design、Sites in Codex、Figma、Lovart 和 MCPlato 應該屬於一個工作棧，而不是同一條排行榜。
從工作室工作區中浮現抽象響應式 Web 體驗的高端編輯風封面圖
圖 1：AI 設計正在變成 Web 體驗棧，而不是一個通用畫布。
命名現實核查：Claude Design 是真實存在的；Codex Sites 是簡寫
Anthropic 於 2026 年 4 月 17 日推出了 Claude Design，定位為 Anthropic Labs research preview。1 它可以透過對話和直接細化來創建設計、互動式原型、視覺單頁文件、行銷素材，以及早期落地頁概念。1 這使它成為真實的 2026 年產品方向，但它仍然是 preview，並不是專業設計治理的替代品。
Codex Sites 是有用的簡寫，但官方命名是 Sites 或 the Sites plugin inside Codex。OpenAI 的開發者頁面標題是「Sites – Codex」，並將該功能定義為一種透過 Sites plugin 從 Codex「build and deploy hosted sites」的方式。2 Sites 讓 Codex 可以建立、儲存、部署和檢查由 OpenAI 託管的網站、Web app 和遊戲。2
邊界很重要。Sites 處於 preview，面向 ChatGPT Business 和 Enterprise 工作區開放；Business 預設啟用，Enterprise 透過管理員 RBAC 控制。2 它的輸出必須是相容 Cloudflare Worker 的 ES modules，並且每一個 Sites deployment URL 都是生產部署。2 應把它當作託管 Web 體驗工作流程，而不是最終的生產級設計。
逐一產品評測
Claude Design 最適合在體驗仍然模糊時作為起點。它可以幫助團隊在承諾進入設計系統之前，探索 homepage、onboarding flow、產品敘事或原型可能呈現出的感覺。它的優勢是速度和對話式細化。它的限制在於權威性：它可以建議品味，但團隊仍然需要可及性檢查、品牌判斷和下游所有權。
Sites in Codex 在目標產物是真正託管的 Web 介面時最有吸引力：落地頁、內部工具、dashboard、互動式 demo、小型 Web app 或遊戲。它適合已經擁有結構化需求、程式碼脈絡，或想把現有專案暴露為可審閱 Web 體驗的團隊。OpenAI 的 Web development use-case collection 強化了 Codex 在 Web 工作中的角色，而 Codex changelog 更適合用來持續追蹤平台變化。34 它的弱點是：生產 URL 可能帶來一種已經完成的錯覺。部署並不等於品牌、法律、效能或安全核准。
Figma 仍然是產品與 Web 設計的專業事實來源。Figma Sites 為設計團隊提供面向 Web 的建立路徑，而 Figma Make 增加了 prompt-to-app 工作流程，包含聊天、附件、point-and-edit、樣式脈絡、程式碼編輯器和 publishing beta。56 Figma Design AI 涵蓋素材搜尋、內容替換、互動、圖層重新命名、文字操作、影像工具、向量化和 First Draft；Figma 的 AI agent 於 2026 年 5 月 20 日開始有限 beta 推出。78 這個 Web 棧仍然依賴設計系統紀律。9
Lovart 更適合被理解為創意與行銷視覺代理。它的官方頁面強調自然語言流水線、統一畫布、影像和影片生成、圖層級編輯、批次生成，以及 PNG/SVG 匯出。10 這使它對活動世界觀、情緒板、hero image 方向、產品照片概念和發布變體很有用。它不是治理響應式設計系統或檢查託管網站的最佳位置。
MCPlato 適合控制室層。它不是專業設計畫布、託管網站平台，也不是專門的行銷影像工作室。當網站專案依賴研究、來源材料、長時間執行任務、核准、會話、產物紀律和交接時，MCPlato 才有用。MCPlato 圍繞可觀察辦公 AI 工作的公開定位，使它成為協調 Claude Design、Codex、Figma 和 Lovart 周邊工作的工作區，而不是它們的替代品。11
對照表：每個工具應該負責什麼
| 產品 / 工作流程 | 主要待完成工作 | 最擅長 | 較弱項 | 最佳輸入 | 輸出 / 產物 | 最適合使用者 | 不適合 | 在工作棧中的建議角色 |
|---|---|---|---|---|---|---|---|---|
| Claude Design | 對話式視覺探索 | 概念、原型、落地頁方向、單頁文件 | 最終設計系統權威 | 簡報、產品想法、參考風格、直接回饋 | 視覺概念、原型、體驗草稿版式 | 創辦人、PM、探索方向的設計師 | 像素級生產設計 | 體驗構思層 |
| Sites in Codex | 託管 Web 體驗建立 | 網站、Web app、遊戲、dashboard、內部工具、demo | 視覺品味、治理、審閱紀律 | 需求、程式碼/專案脈絡、約束、審閱標準 | 託管網站、Web app、內部工具、dashboard、落地頁、互動式 demo | 工程師、技術營運者、產品團隊 | 未經審閱的發布或全新品牌識別工作 | 託管原型與 Web 執行層 |
| Figma | 專業設計事實來源 | 設計系統、協作、響應式 Web 設計、受治理素材 | 取代人的設計判斷 | 元件、樣式、產品需求、團隊資料庫 | 設計檔案、原型、網站、品牌素材 | 設計與產品團隊 | 非結構化研究編排 | 記錄系統設計層 |
| Lovart | 行銷創意探索 | 情緒板、活動視覺、品牌方向、批次創意 | 設計系統治理、網站檢查 | 品牌提示、活動目標、視覺參考 | 影像、影片、分層創意素材、匯出物 | 行銷人員、創作者、品牌團隊 | 產品 UI 事實來源 | 創意探索層 |
| MCPlato | 可觀察的跨材料工作協調 | 研究、核准、會話、產物、非同步任務、交接 | 專業設計畫布或託管 Web runtime | 來源、本地材料、任務計畫、核准、簡報 | 報告、大綱、任務軌跡、交付物 | 營運者、研究員、PM、管理工作的團隊 | 取代 Figma、Codex、Lovart 或設計師 | 控制室層 |
AI 輔助 Web 體驗工作流程的高端半 3D 架構剖面圖
圖 2：這個工作棧把探索、受治理設計、託管執行、創意素材和協調分開。
場景推薦矩陣
| 場景 | 主要推薦 | 次要工具 | 原因 |
|---|---|---|---|
| 落地頁視覺方向 | Claude Design | Lovart, Figma | Claude Design 加速早期探索；Lovart 擴展情緒和活動方向。 |
| 響應式網站設計 | Figma | Claude Design, MCPlato | Figma 應該負責元件、響應式行為、協作和可審閱決策。 |
| Prompt-to-web app 原型 | Sites in Codex | Figma Make, MCPlato | Sites in Codex 適合基於技術脈絡生成託管 Web app 或 demo。 |
| 內部 dashboard/工具 | Sites in Codex | Figma, MCPlato | Codex 可以產出託管技術介面；Figma 治理 UX 模式，MCPlato 協調需求。 |
| 行銷活動素材 | Lovart | Figma Buzz, Claude Design | Lovart 更適合創意多樣性、情緒板和發布視覺；Figma Buzz 幫助批量素材。 |
| 建站前的跨材料研究 | MCPlato | Claude Design, Figma | MCPlato 是來源收集、筆記、核准和交接的中心。 |
| 現有專案轉託管 demo | Sites in Codex | MCPlato | Codex Sites 可以把相容的 Web 工作轉成託管部署；MCPlato 追蹤注意事項。 |
| 受設計系統治理的 Web 體驗 | Figma | Sites in Codex | Figma 負責記錄系統；Codex 可以暴露相容實作以供審閱。 |
| 長週期網站專案協調 | MCPlato | Figma, Sites in Codex, Lovart | 多階段網站工作需要可見的研究、決策、素材、部署說明和核准。 |
團隊應該避免什麼
首先，不要把託管 URL 當作最終核准。OpenAI 的 Sites 文件明確指出，每一個 deployment URL 都是生產部署。2 一個可工作的 demo 仍然需要來源審閱、可及性審閱、品牌審閱、安全審閱和利害關係人簽署。
其次，不要讓簡寫混淆所有權。「Codex Sites」是一個方便標題，但官方功能是 Codex 內的 Sites。Figma 應該負責受治理的設計系統。Lovart 不應該成為產品 UI 的事實來源。Claude Design 不應該被當作完成的生產級設計。MCPlato 應該協調材料和決策，而不是偽裝成設計畫布或託管層。
對比設計畫布、託管 Web 物件、創意工作室和協調桌面的高端編輯風產品攝影圖
圖 3：當創意、設計、部署和協調介面保持區分時，Web 工作會更安全。
結論：勝出的工作流程是一個工作棧
2026 年的 AI 設計棧不會收斂為一個贏家。它正在專業化。Claude Design 探索體驗和視覺方向。Figma 治理設計系統和響應式協作。Lovart 建立活動視覺和品牌世界變體。Sites in Codex 把合適的想法和專案轉化為託管 Web 體驗。MCPlato 讓研究、來源材料、核准、迭代和交接保持可觀察。
最優秀的團隊會分配所有權：在 Claude Design 中探索，在 Figma 中治理，在 Lovart 中生成活動素材，用 Sites in Codex 把合適專案變成託管 demo，並在證據和決策保持可見的地方協調長週期工作。