告別對話框，在畫布上直接「搓」AI 圖：gpt-image-canvas 全攻略 | Stop Prompting, Start Painting: A Guide to gpt-image-canvas

將 AI 繪圖從對話框搬到無限畫布，讓創意不再被文字框限制 | Move AI image generation from chatboxes to an infinite canvas, breaking the limits of text-based creativity.

🔎 工具速覽 / AT A GLANCE

Category	AI 視覺協作工具 / 開源系統
Pricing	免費開源 (需自備 API Key)
BestFor	視覺設計師、系統架構師、需要快速原型開發的工程師
GitHub Stars	⭐ 141

🚀 引言 / Introduction

如果你也跟我一樣，受夠了在 ChatGPT 那個窄窄的對話框裡跟 AI 玩『猜猜看我想畫什麼』，而且每次改圖都要重新打一大串 Prompt 到手酸，那你絕對得試試 gpt-image-canvas。這不是那種讓你肝指數飆高、要花三天三夜研究的複雜系統，而是一個讓你在無限畫布上直接『搓』圖的生產力神器。想像一下，在下午茶雞排還沒冷掉之前，你就能把整個產品原型視覺化，而不需要在無數個分頁之間切換，這才是我們工程師該有的生活。

🛠️ 核心功能 / Key Features

Infinite AI 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 all OpenAI-compatible endpoints.

靈活的 API 接入：支持 OpenAI 官方 API 及所有 OpenAI 兼容接口。

Comprehensive History Management: Features locate, rerun, download, and cloud backup status tracking.

完整歷史管理：支持定位、重新運行、下載以及雲端備份狀態追蹤。

💡 技術亮點 / Tech Highlights

Escape the Chatbox: AI image generation becomes as intuitive as using Figma or Miro—place, connect, and compare freely.

不再被對話框綁架：把 AI 繪圖變成像在用 Figma 或 Miro 一樣直覺，隨意擺放、連線、對比。

Hassle-free Deployment: Get it running quickly via Docker or pnpm, avoiding endless environment bugs.

省心的部署體驗：用 Docker 或簡單的 pnpm 指令就能跑起來，不用處理修不完的環境 Bug。

Credential-aware Routing: Smart homepage design that routes directly to canvas with a key, or allows gallery browsing without one.

權限感知路由：聰明的首頁設計，有 Key 就直接開幹，沒 Key 也能瀏覽 Gallery 靈感。

📦 快速上手 / Quick Start

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

環境準備：安裝 Node.js 22+ 與 pnpm 9.14.2 (建議用 Corepack 快速激活)。

Quick Start: Run pnpm install, copy .env.example to .env and fill in your API Key.

快速啟動：執行 pnpm install，複製 .env.example 為 .env 並填入你的 API Key。

Run Service: Execute pnpm dev and open localhost:5173 to start creating.

運行服務：執行 pnpm dev 後，直接打開 localhost:5173 即可開始創作。

準備好試試 告別對話框，在畫布上直接「搓」AI 圖：gpt-image-canvas 全攻略 | Stop Prompting, Start Painting: A Guide to gpt-image-canvas 了嗎？

Ready to try 告別對話框，在畫布上直接「搓」AI 圖：gpt-image-canvas 全攻略 | Stop Prompting, Start Painting: A Guide to gpt-image-canvas?

前往 GitHub 頁面 →