別再被老闆的『隨便改改』搞瘋了！用 gpt-image-canvas 打造你的 AI 視覺工作流 | Stop the 'Just a Quick Change' Nightmare: Master Your AI Visual Workflow with gpt-image-canvas

把 AI 繪圖變成像在白板上討論一樣直覺的 Local Canvas 體驗 | Transform AI image generation into an intuitive, local canvas experience, just like brainstorming on a whiteboard.

🔎 工具速覽 / AT A GLANCE

Category	AI 視覺設計工具 / Local AI Canvas
Pricing	開源免費 (需自備 API Key)
BestFor	需要快速原型設計、視覺腦圖、且不希望數據全部傳到雲端的開發者與設計師
GitHub Stars	⭐ 170

🚀 引言 / Introduction

各位在業界修 Bug 修到肝指數爆表、每天面對老闆『我覺得這裡顏色要更正能量一點』這種奇葩要求的朋友們，你們好。今天不聊 K8s 怎麼崩潰，我們來聊聊怎麼讓 AI 繪圖不再像是在抽獎，而是在一個可以隨意塗鴉的白板上高效產出。gpt-image-canvas 就是這樣一個能讓你找回開發樂趣的工具。

Hello to all the engineers whose liver enzymes are skyrocketing from fixing bugs and who deal with vague 'make it more positive' requests from bosses daily. Today, we're moving away from K8s crashes to talk about how to stop AI image generation from feeling like a lottery and instead turn it into an efficient, whiteboard-style workflow. gpt-image-canvas is exactly the tool that brings that joy of development back.

🛠️ 核心功能 / Key Features

tldraw Dynamic Canvas: Move beyond boring chat boxes; generate images from prompts directly on an infinite canvas to keep your visual flow uninterrupted.

tldraw 動態畫布：不再是單調的對話框，直接在無限畫布上 prompt-to-image，讓視覺思考不再被打斷。

Local-first Storage: Keep images and snapshots locally, so you don't lose inspiration due to company network outages or API latency.

Local-first 本地儲存：圖片跟快照存本地，不用擔心公司網路斷線或 API 延遲導致的靈感流失。

Flexible API Integration: Supports official OpenAI and various compatible endpoints; if it's OpenAI-compatible, it works.

彈性 API 接入：支援 OpenAI 官方以及各種兼容端點，不管是原廠還是第三方轉發，只要能跑就能接。

Comprehensive History: Supports locating, rerunning, and downloading, making it easy to recover a version from three days ago when the boss asks for it.

完善的歷史紀錄：支援定位、重跑與下載，就算老闆要求『回到三天前那個版本』也能秒找回。

💡 技術亮點 / Tech Highlights

Hassle-free Deployment: Fast startup with Node.js 22 and pnpm. With Docker Desktop, it's deployed faster than ordering afternoon tea fried chicken.

省心部署：Node.js 22 + pnpm 快速啟動，只要你有 Docker Desktop，部署起來比點下午茶雞排還快。

Credential-aware Routing: Smart homepage design—directs you to the canvas if authenticated, or prompts login if not, preventing user confusion.

身分感知路由：聰明的首頁設計，有 Key 直接進畫布，沒 Key 提醒你登入，不會讓使用者在空白頁面發呆。

Cloud Backup Option: Built-in Tencent Cloud COS backup, combining local speed with the security of not losing work to a system crash.

雲端備份選項：內建 Tencent Cloud COS 備份，在享受本地速度的同時，也能確保作品不會因為電腦當機而消失。

📦 快速上手 / Quick Start

Environment Setup: Ensure Node.js 22+ and pnpm 9.14.2 are ready (Corepack activation recommended).

安裝環境：確保 Node.js 22+ 與 pnpm 9.14.2 已就緒（建議用 corepack 快速激活）。

Launch Project: Run `pnpm install`, copy `.env.example` to `.env` with your API key, and finish with `pnpm dev`.

啟動專案：跑一次 `pnpm install`，把 `.env.example` 複製成 `.env` 並填入你的 API Key，最後 `pnpm dev` 搞定。

Enter Canvas: Open `http://localhost:5173` and start your AI visual creation journey.

進入畫布：打開 `http://localhost:5173`，開始你的 AI 視覺創作之旅。

準備好試試 別再被老闆的『隨便改改』搞瘋了！用 gpt-image-canvas 打造你的 AI 視覺工作流 | Stop the 'Just a Quick Change' Nightmare: Master Your AI Visual Workflow with gpt-image-canvas 了嗎？

Ready to try 別再被老闆的『隨便改改』搞瘋了！用 gpt-image-canvas 打造你的 AI 視覺工作流 | Stop the 'Just a Quick Change' Nightmare: Master Your AI Visual Workflow with gpt-image-canvas?

前往 GitHub 頁面 →