# 策展 · X (Twitter) 🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：冰河 (@binghe) · 平台：X (Twitter) · 日期：2026-06-25
> 原始來源：https://x.com/binghe/status/2069815557906747713
## 中文摘要
# Codex 插件：AI-Canvas 全能無限畫布終極版發布！
前陣子，我發布了一個 Codex 插件：AI-Canvas，主要功能就是為 Codex 配上無限畫布功能，實現「指哪改哪」的體驗！（初始版）
這個插件的靈感來自 Twitter 博主：鍾二信。
我是利用他發布的影片，倒推出來插件的設計邏輯，並認出無限畫布使用的是開源的 tldraw，但我沒有抄襲博主的程式碼，而是完全依照自己的思考重新架構了這個插件！（6 月 20 號那天，他還沒發布他的插件 Cowart）
再次感謝鍾二信提供的思路與指導！當天我用了五個小時就復刻出來了。
有圖有真相！
展開畫面重點
圖片為社群媒體上的對話截圖，討論內容涉及 AI 輔助圖片標註與修改的技術架構。
主要文字內容轉錄：
- 冰河 @binghe：我理解的是：skill: 告訴 Codex 怎麼使用 Cowart，比如“打開畫布、讀取選區、填充圖片、根據標註修改”。plugin / MCP tool: 提供可調用能力，比如啟動本地服務、讀取畫布數據、寫入圖片 shape。本地 Web 程序：Cowart Canvas，也就是右邊的無限畫布 UI。開源畫布庫：很可能是 tldraw。(我瞎猜的) Codex: 負責理解用戶需求、調用工具、生成 prompt、串聯 imagegen 和 Cowart。是這樣的業務邏輯嗎？
- 鍾二信 @zhongerxin：Codex + 畫布工具，以及嘗試一種更直覺、更留痕的圖片標註修改方式。直接用 Codex 的好處是 GPT Image 2 也基本可以自由干。
- 鍾二信 @zhongerxin：是的，實際上真正開發寫代碼的地方不多，但是要打磨順還有很多要做的。
- 冰河 @binghe：嗯，我已經做出來了。確實像你說的，體驗方面要再打磨一下。如何自動化。小白操作再少點磨損。。。和理解邊界。。。用 Codex app-server 做深度集成，讓畫布服務直接啟動 Codex turn。這個可以更像“真自動執行”，但目前屬於實驗性接口，不適合作為開源插件的默認小白路徑。所以我換了條路。排隊中 -> Codex 正在讀取標註 -> 正在生成新版 -> 已完成。
畫面重點：
1. 截圖中包含一個嵌入的影片預覽，顯示一個名為「Open Cowart Canvas」的介面，左側為對話框，右側為顯示拉麵圖片的畫布，並有標註線指向圖片不同部位。
2. 底部截圖展示了類似開發者日誌的流程狀態：「排隊中 -> Codex 正在讀取標註 -> 正在生成新版 -> 已完成」。
展開數據表
| 分類 | 適合場景 | 輸出 |
|---|
| 小紅書封面 | 社交媒體 | 筆記首圖、種草封面、個人 IP 內容 | 3:4 成品封面圖 |
| YouTube 封面圖 | 社交媒體 | 知識頻道、產品視頻、教程視頻 | 16:9 縮略圖 |
| 產品營銷組圖 | 電子商務 | Amazon、Shopify、Meta 廣告、通用電商圖 | 主圖、賣點圖、場景圖、細節圖 |
| Logo 與品牌 | 品牌設計 | 新品品牌命名、產品品牌、App 或服務品牌 | Logo 方向、備選方案、品牌視覺板 |
| 營銷宣傳冊 | 營銷 | 三折頁、服務介紹冊、活動推廣冊、產品推廣冊 | 外頁、內頁、樣機、推廣圖 |
| 一鍵跨平台適配 | 工作室 | 同一張圖快速適配多平台發布 | 小紅書、Instagram、Story/Reels、公眾號、推特、LinkedIn 等比例 |
展開畫面重點
畫面為一則系統通知訊息，內容如下：
- 右上角標籤：@AI Canvas 打開 AI 画布
- 處理狀態：已處理 10s
- 訊息內容：AI 画布已准备好：🌐 打开 AI Canvas
- 提示說明：你可以在 Codex 侧边栏里打开查看。
- 預覽區塊：顯示「网页预览」與「网站」字樣，右側設有「打开方式」下拉選單。
展開畫面重點
畫面左側為對話視窗，顯示「AI 画布已经准备好：打开 AI Canvas」以及「网页预览」功能。右側主介面為「AI Canvas」，中央顯示一張古風女性角色的圖像。右側面板包含以下功能區塊：
1. 尺寸調整：提供寬度（W: 290）、高度（H: 520）設定及多種比例選項（1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 9:16）。
2. 圖片導入：提供「上传图片」按鈕。
3. AI 操作：顯示「Codex 已暂停」，並提供「新建图片框」與「按标注修图」功能。
4. SKILLS：提供「打开 Skill 面板」按鈕。
5. 選中內容：顯示當前圖片資訊（ai_image, shape:image_fUzrzVit, 290 x 520）。
6. 任务记录：顯示「还没有提交修图任务」與「还没有运行 Skill」。
底部工具列包含繪圖與編輯工具，右下角標註「MADE WITH TLDRAW」。
展開畫面重點
畫面顯示一個名為「SKILLS」的介面區塊，包含一個「打開 Skill 面板」的按鈕。下方列出了分類標籤，分別為「Commerce」、「Branding」、「Marketing」與「Studio」，其中「Branding」目前處於選取狀態。在該分類下，顯示了一個「Logo 與品牌」的功能卡片，其說明文字為「從品牌簡報生成 Logo 方向、色板、視覺板...」，卡片右側帶有一個星號圖示。
展開畫面重點
畫面為一個 AI 內容生成工具的設定介面，包含以下文字內容：
頂部導覽列：Social Media、E Commerce、Branding、M。
選項卡：
- 小紅書封面（當前已選中圖片）
- YouTube 封面圖（當前已選中圖片）
表單欄位：
- 標題：小紅書封面
- 說明：根據當前圖片和參數直出帶字體、配色和版式設計的完整小紅書封面。
- 內容類型：人像氛圍
- 主標題：高級感妝容
- 標題風格：高級克制
- 標題位置：頂部安全區
- 保留重點：人物臉部、手勢和乾淨質感
- 補充要求：背景更乾淨，保留人物臉部，不要太商業海報感。
按鈕：提交給 Codex 生成
底部提示：已提交給 Codex。若左側正在監聽，會開始生成；如果沒有動靜，請回到 Codex 說：AI Canvas 繼續處理 Skill。
展開畫面重點
畫面為一個名為「AI Canvas」的網頁應用程式介面，網址列顯示為「127.0.0.1:43218」。
介面左側為頁面管理欄，中間為畫布區域，顯示著一張女性人像照片。
右側面板為「SKILLS」區塊，包含以下文字與功能：
- 「打開 Skill 面板」按鈕。
- 標籤分類：Social Media、E Commerce、Brand。
- 「小紅書封面」：基於當前圖片生成符合小紅書平台...
- 「YouTube 封面圖」：基於當前圖片生成高識別度的 16:...
介面底部有工具列，包含選取、手型、繪圖、形狀、文字等工具。右下角有「MCP 已就緒」狀態提示。
展開畫面重點
畫面為一個名為「Untitled AI Canvas」的網頁應用程式介面，主要功能區分為左側畫布區與右側「SKILLS」控制面板。
1. 畫布區：顯示一個卡通水豚角色及其生成的 YouTube 封面圖，封面圖上標示有「寫作助手」字樣。
2. 尺寸設定面板：顯示目前畫布尺寸為寬 720、高 405（比例 16:9）。
3. SKILLS 面板：
- 標籤分類：Social Media, E Commerce, Branding, M。
- 預設選項：小紅書封面、YouTube 封面圖（目前選中）。
- 輸入欄位：
- 視頻主題：一個 Markdown 寫作利器
- 大標題：寫作助手
- 目標觀眾：泛內容觀眾
- 絡路風格：乾淨教程感
- 標題位置：左側標題區
- 保留重點：卡通形象要保持不變，背景以寫作主題相關，才要更像專業產品推薦的感覺。
- 按鈕：提交給 Codex 生成。
展開畫面重點
畫面左側為對話視窗，顯示系統訊息：「AI Canvas 已經準備好了：打開 AI Canvas。畫布 ID 是 canvas_0il1Zn0sWt。」以及「已處理完成。AI Canvas 的產品營銷組圖 Skill 已生成 3 張 Amazon 商品頁/A+ 圖：Amazon 主圖、使用場景圖、核心賣點圖。結果已經放到原圖右側，舊圖保留，並已保存畫布快照。」
畫面右側為「AI Canvas」的工作區，頂部標題為「Untitled AI Canvas canvas_0il1Zn0sWt」。左側面板列出頁面（PAGES）與圖片列表（v1 image_0OGq1-Fd, v2 image_daf06a1d, v2 image_42fa18e, v2 image_35836be2）。中央畫布顯示了四張包含人物與產品的行銷圖片。
右側控制面板包含以下選項：
- 按鈕：新建圖片框、按標注修圖。
- SKILLS 區域：包含 Social Media, E Commerce, Branding 等標籤。
- 產品營銷組圖下拉選單：目前選定為「Amazon 商品頁/A+」，其他選項包括「Shopify/獨立站」、「Meta 廣告」、「Google 展示廣告」、「通用電商套圖」。
- 視覺語氣：設定為「年輕活力」。
- 輸出數量：設定為「3 張」。
- 補充要求輸入框：「例如：圖片要適合夏季上新，少放字，重點突出材質和使用場景。」
- 按鈕：提交給 Codex 生成。
- 底部提示：「已提交給 Codex，若左側正在監聽，會開始生成；如果沒有動靜，請回到 Codex 說：AI Canvas 繼續處理 Skill。」
展開畫面重點
畫面左側為對話與處理紀錄區，顯示「AI Canvas」已完成處理，並生成了名為「Pulse」的 Logo 與品牌 Skill，包含 Logo 概念、備選 Logo 方向及品牌視覺板。
畫面右側為「AI Canvas」的工作區，標題為「Untitled AI Canvas canvas_XQU8Snq2R4」。左側欄位列出了三個圖片檔案（v1 image_hbOEH4Sn、v1 image_RElzNYIM、v1 image_hPqGd1te）。
右側主區域展示了三組設計成果：
1. 第一組：黑色背景，中央為「Pulse」字樣，上方有綠色音波圖示。下方有三個小圖示，分別為綠色音波圖示、白色「Pulse」字樣與黑色背景的組合。
2. 第二組：黑色背景，中央為「Pulse」字樣，上方有白色音波圖示。下方有三個小圖示，分別為黑色音波圖示、白色「Pulse」字樣與黑色背景的組合。
3. 第三組：包含多個設計細節，如 Logo 變體、配色方案（黑、白、綠、藍）、字體規範（Aa）、應用場景模擬（手機介面、命令列介面）。
展開畫面重點
畫面左側為對話視窗，顯示 AI Canvas 的處理進度與結果連結；中間為畫布區域，展示了三張生成的行銷宣傳設計圖；右側為工具操作面板，包含「圖片導入」、「AI 操作」、「SKILLS」設定以及「物料類型」下拉選單。
可見文字轉錄：
- 左側面板：AI Canvas、已處理 16s、AI 畫布已準備好了、打開 AI Canvas、你可以在 Codex 側邊欄打開查看。畫布 ID 是 canvas_ZG-8kKEtgf、網頁預覽、網站、打開方式、處於 skill、已處理 6m 34s、已處於 AI Canvas Skill 流程，並處理完這次「行銷宣傳冊」任務。三張結果已經放到畫布：三折頁外頁、三折頁內頁、宣傳冊樣機預覽。畫布快照也已保存，Skill 狀態已標記為完成。可以回到 AI Canvas 查看。
- 中間畫布：AI Canvas、Untitled AI Canvas canvas_ZG-8kKEtgf、PAGES、主畫布、圖片、v1 image_qbueFEUC、v1 image_FORE4xrA、v1 image_PrG8qowu、版本 v1 -> v1 -> v1、夏季課程開放、從工具到作品、從作品到收入、用 AI 工具開啟副業收、看見機會、掌握方法、完成作品。
- 右側面板：已保存、保存畫布、導入圖片、圖片導入、上傳圖片、拖拽、粘貼或上傳圖片後，可直接調用 Skill、AI 操作、Codex 已暫停、需要修圖時，回到 Codex 說：AI Canvas 繼續自動修圖、新建圖片框、按標註修圖、更多操作、SKILLS、打開 Skill 面板、Commerce、Branding、Marketing、Studio、行銷宣傳冊、生成三折頁/服務介紹冊的外頁、內頁、樣機...、行銷宣傳冊、生成三折頁/服務介紹冊的外頁、內頁、樣機和推廣圖、物料類型、三折頁宣傳冊、服務介紹冊、活動推廣冊、產品推廣冊、核心信息、可以利用 ai 工具進行副業收。
展開畫面重點
畫面左側為對話視窗，記錄了 AI 處理圖片的過程，包含「第四張已完成。現在生成 Instagram Story/Reels 9:16，這張會需要最大幅度的上下擴圖」、「9:16 版本我會把關鍵人物放在中間，頂部和底部留給平台控件遮擋的低信息區域」、「9:16 版本可用，頂部留出了足夠乾淨空間，人物仍在中間。我保存第五張並放回畫布」、「第五張已放回畫布。最後處理 LinkedIn 1:1 方圖，會做成更穩定、專業一點的中心構圖」、「最後一張方圖開始生成：我會保留原圖識別點，同時把標題和山景壓進穩定的 1:1 中心安全區」、「方圖也完成了，最後進行落盤、回寫、保存快照，然後把 Skill 標記為完成」。
畫面右側為「AI Canvas」操作面板，包含「SKILLS」區域，提供「Commerce」、「Branding」、「Marketing」、「Studio」選項。下方「一鍵跨平台適配」功能勾選了「小紅書 3:4」、「Instagram 4:5」、「Story/Reels 9:16」、「公眾號」、「推特文章封面 5:2」、「LinkedIn 1:1」。背景處理選項為「智能擴圖並補齊背景」。
畫面中央顯示了多張帶有「4萬粉達成！」文字的圖片預覽，圖片中均為同一位戴眼鏡男士的肖像。