別再用對話框畫圖了！GPT Image Canvas：讓 AI 繪圖變成像在白板上 brainstorming 一樣直覺 | Stop Chatting, Start Drawing: GPT Image Canvas

將 AI 生成圖像從「抽獎式對話」進化為「專業視覺画布」 | Transform AI image generation from a 'lottery-style chat' into a professional visual canvas.

🔎 工具速覽 / AT A GLANCE

Category	AI Visual Tool / Local Canvas
Pricing	Open Source (Free)
BestFor	UI/UX Designer, Product Manager, AI Artist, System Architect
GitHub Stars	⭐ 142

🚀 引言 / Introduction

身為系統設計顧問，我最怕聽到老闆說『你隨便畫個草圖給我看』，結果對話式 AI 給我的圖像在抽獎，每次都要重新輸入 Prompt 像在寫情書一樣卑微。gpt-image-canvas 徹底改變了這點，它把 tldraw 的無限画布與 GPT-Image 2 結合，讓你在畫面上直接生成、調整，不用再跟對話框玩『猜猜看這次會出什麼』的遊戲。這就像是在下午茶雞排時間，你能快速把構思視覺化，而不用擔心肝指數飆高到修不完的 Bug

As a system design consultant, the worst thing I can hear is 'Just sketch something quickly' from the boss, only to find that chat-based AI generates images like a lottery—making me feel like I'm writing love letters just to get a decent prompt. gpt-image-canvas changes the game by merging tldraw's infinite canvas with GPT-Image 2, allowing you to generate and refine directly on the canvas. It's like being able to visualize your ideas during a chicken steak break without stressing your liver over endless debugging.

🛠️ 核心功能 / Key Features

AI Infinite Canvas: Powered by tldraw, supporting prompt-to-image and reference-image generation.

AI 無限画布：基於 tldraw，支持 Prompt 轉圖片及參考圖生成。

Local-first Storage: Generated images and project snapshots are stored locally for reliability.

在地優先存儲：生成的圖片與專案快照直接儲存在本地，不用擔心雲端遺失。

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

彈性 API 接入：支持 OpenAI 原生 API 及任何相容端點（如 PackyCode）。

Cloud Backup Mechanism: Optional Tencent Cloud COS integration to ensure your work is safely backed up.

雲端備份機制：可選擇整合騰訊雲 COS，確保你的心血不會跟 Bug 一樣消失。

Intelligent Auth Routing: Credential-aware homepage with support for API Key and Codex login switching.

智能權限路由：內建認證感知主頁，支持 API Key 與 Codex 登入切換。

💡 技術亮點 / Tech Highlights

Escape 'Chat Hell': No more copy-pasting prompts; operate directly on the canvas.

告別『對話地獄』：不再需要在那邊複製貼上 Prompt，直接在画布上操作。

Dev-Friendly Stack: Built with Hono, SQLite, and Node.js 22—lightweight and powerful.

開發者友好的技術棧：Hono + SQLite + Node.js 22，輕量且強大。

Generation History: Support for locating, rerunning, and downloading, so you never lose a previous version.

歷史紀錄追蹤：支持定位、重新運行與下載，再也不用擔心找不到之前的版本。

📦 快速上手 / Quick Start

Prerequisites: Install Node.js 22+ and pnpm 9.14.2.

環境準備：安裝 Node.js 22+ 與 pnpm 9.14.2。

Quick Launch: Run `pnpm install` $\rightarrow$ copy `.env.example` to `.env` $\rightarrow$ execute `pnpm dev`.

快速啟動：執行 `pnpm install` $\rightarrow$ 複製 `.env.example` 為 `.env` $\rightarrow$ 執行 `pnpm dev`。

Configure Key: Enter your `OPENAI_API_KEY` in `.env` to start creating.

配置 Key：在 `.env` 中填入 `OPENAI_API_KEY` 即可開始揮灑創意。

Access: Open your browser and go to `http://localhost:5173` to start working.

訪問地址：打開瀏覽器進入 `http://localhost:5173` 即可開始工作。

準備好試試 別再用對話框畫圖了！GPT Image Canvas：讓 AI 繪圖變成像在白板上 brainstorming 一樣直覺 | Stop Chatting, Start Drawing: GPT Image Canvas 了嗎？

Ready to try 別再用對話框畫圖了！GPT Image Canvas：讓 AI 繪圖變成像在白板上 brainstorming 一樣直覺 | Stop Chatting, Start Drawing: GPT Image Canvas?

前往 GitHub 頁面 →