別再用對話框畫圖了！gpt-image-canvas：讓 AI 繪圖像在白板上開會一樣直覺 | Stop Chatting, Start Drawing: gpt-image-canvas

將 AI 繪圖從「抽卡」變成「設計」，在無限畫布上實現你的創意靈感 | Turning AI generation from a 'gacha game' into a design process on an infinite canvas.

🔎 工具速覽 / AT A GLANCE

Category	AI 輔助設計工具 / Local AI Canvas
Pricing	Open Source (Free)
BestFor	需要快速迭代視覺原型的產品經理、UI/UX 設計師及對私有化部署有需求的開發者
GitHub Stars	⭐ 141

🚀 引言 / Introduction

如果你跟我一樣，每天在 Slack/Teams 裡被老闆要求『這個視覺再調整一下』，或者在 ChatGPT 的對話框裡像抽卡一樣重複輸入 Prompt 卻始終得不到想要的圖，那你真的該試試這個工具。gpt-image-canvas 不是那種讓你傻傻等待的對話視窗，它把 AI 繪圖直接搬進了像 tldraw 這樣的無限白板裡。想像一下，你不用再面對修不完的 Bug 和飆升的肝指數，而是在喝下午茶雞排的空檔，就能快速把腦中的概念視覺化，這才是工程師該有的工作姿態。

🛠️ 核心功能 / Key Features

AI Infinite Canvas: Built on tldraw, supporting prompt-to-image and reference-image generation, breaking free from linear chat limitations.

AI 無限畫布：基於 tldraw 構建，支援從文字生成圖片及參考圖生成，擺脫線性對話的限制。

Local-first Storage: Generated images and project snapshots are stored locally, ensuring data persistence without relying on cloud sync.

本地優先儲存：生成的圖片與專案快照儲存在本地，不用擔心雲端同步失敗或資料被莫名刪除。

Flexible API Integration: Supports official OpenAI API and any OpenAI-compatible endpoints (e.g., PackyCode) for model flexibility.

彈性 API 接入：支援 OpenAI 官方 API 及任何相容的端點（如 PackyCode），讓你能靈活切換模型。

Credential-aware Routing: Smart navigation that automatically switches between the homepage and canvas based on API key or Codex login status.

智能權限路由：具備憑證感知導航，根據 API Key 或 Codex 登入狀態自動切換首頁與畫布視圖。

💡 技術亮點 / Tech Highlights

End the 'Gacha' Anxiety: Compare different versions of generated images directly on the canvas instead of scrolling through chat history.

告別『抽卡』焦慮：在畫布上直接對比不同版本的生成結果，不再需要翻找對話紀錄。

Enterprise Backup Options: Optional Tencent Cloud COS backup for those with strict data security and persistence requirements.

企業級備份選項：可選配騰訊雲 COS 備份，滿足那些對資料安全性有強迫症的系統設計要求。

Modern Tech Stack: Powered by Hono, SQLite, and Node.js 22, providing a lightweight and fast experience with effortless deployment.

現代化技術棧：Hono + SQLite + Node.js 22，效能輕快，部署起來比寫 Unit Test 還簡單。

📦 快速上手 / Quick Start

Prerequisites: Install Node.js 22+ and pnpm 9.14.2 (activation via Corepack recommended).

環境準備：安裝 Node.js 22+ 與 pnpm 9.14.2（建議用 Corepack 激活）。

Quick Deployment: Run pnpm install $\rightarrow$ copy .env.example to .env $\rightarrow$ run pnpm dev.

快速部署：執行 pnpm install $\rightarrow$ 複製 .env.example 為 .env $\rightarrow$ 執行 pnpm dev。

Configure Key: Enter your OPENAI_API_KEY in .env or set a custom OPENAI_BASE_URL to start creating.

配置 Key：在 .env 中填入 OPENAI_API_KEY 或設定自定義的 OPENAI_BASE_URL 即可開始創作。

準備好試試 別再用對話框畫圖了！gpt-image-canvas：讓 AI 繪圖像在白板上開會一樣直覺 | Stop Chatting, Start Drawing: gpt-image-canvas 了嗎？

Ready to try 別再用對話框畫圖了！gpt-image-canvas：讓 AI 繪圖像在白板上開會一樣直覺 | Stop Chatting, Start Drawing: gpt-image-canvas?

前往 GitHub 頁面 →