教你用提示詞讓 Claude 或 ChatGPT 生成 SVG 圖表

靈感來源：路導的AI知識庫
點我閱讀原文

你是否也遇過這種狀況？

• 做簡報時，想加張圖解圖，結果找圖找了半小時還是沒頭緒
• 想讓文章看起來更有層次，但自己畫圖太慢、外包太貴
• 用 AI 畫圖，卻不是看不懂就是無法改圖

別擔心，這篇文章就是要教你一招超簡單的方法：用提示詞 + AI（Claude / ChatGPT）就能自動畫圖，而且還能直接修改！

不需要寫程式、不需要會設計，從今天開始，人人都能畫出好看的知識圖解。

為什麼用 AI 畫圖選 SVG？三大理由帶你了解

如果你剛開始接觸 AI 協作工具、或是想用 ChatGPT 幫你做資料視覺化，SVG 圖表是最友善也最實用的選擇。

以下是為什麼你應該學會生成 SVG 圖表的三個原因：

✅ 1. 它是 AI 最容易產出的圖形格式

SVG 是用純文字描述的向量圖形，這表示你只要對 AI 下對「文字指令」，它就可以直接幫你畫圖，不需要你會繪圖軟體或寫程式。

✅ 2. 放大不模糊、嵌入網頁與簡報都很方便

不像 PNG 或 JPG 圖片會模糊變形，SVG 在簡報、教學網站、部落格裡都能保持清晰畫質。

✅ 3. 搭配線上編輯器，生成後可即時修改

即使你對圖形設計不熟，也可以用免費的 SVG 編輯工具 一鍵貼上 AI 程式碼，調整字體顏色、位置與圖層，最後匯出高品質圖檔。

小結：為什麼選擇 SVG？

SVG（Scalable Vector Graphics）是可縮放向量圖形格式，非常適合知識圖解、流程圖與概念圖，不失真、支援互動，也容易透過 AI 自動生成。

ChatGPT / Claude 生成 SVG 圖的三種提示詞設計法

🧠 1. 基礎提示詞

最簡單有效的做法是：

1

你是製作知識圖解的大師，請閱讀下面文章，思考應該如何設計資訊圖表，請一步一步閱讀、推理與設計，並提供我 SVG 程式碼。

1

你是製作知識圖解的大師，請閱讀下面文章，思考應該如何設計資訊圖表，請一步一步閱讀、推理與設計，設計時跳脫只是整理知識重點的邏輯，從更加概念、示意的層面進行圖解設計，用極簡風格，並提供我 SVG 程式碼。

通常能得到結構合理、重點突顯、視覺清晰的圖表。

🔍 2. 專業結構化提示詞

用於知識整理、流程說明、教育訓練等：

1
2
3
4
5
6
7
8

根據下面資料，設計一張 SVG 知識圖表，主題為【XXX】，目的是【解釋概念/呈現數據/傳達流程】。目標觀眾是【XXX】，他們偏好【XXX】的設計。

目標：
- 資訊結構：按照【問題→過程→解決方案】的邏輯，用圖像化、圖表方式呈現資訊。
- 視覺層次：重點使用【字體加粗、色彩對比、尺寸放大】突顯，並用【箭頭、連接線】引導視線。
- 配色設計：保持專業現代感，並讓顏色更豐富。
- 圖示風格：選用【扁平化設計】的圖示，統一風格且直觀易懂，適度加上ICON。
- 構圖與排版：依【標題→重點→細節】的層次結構，使用【色塊、線條】劃分區塊，保持適當留白。

🛠 3. 技術規格提示詞

若需符合特定樣式，可使用如下提示：

1
2
3
4
5
6
7
8
9
10

生成一張表現【主題】過程的 SVG 圖，包含從【起點】到【終點】各個關鍵過程，使用【科技藍漸變配色】，參考 Material Design 風格。

要求：
- 尺寸：宽800px，高500px
- 使用簡潔現代的設計風格
- 配色方案：主色為藍色(#3498db)，輔助色為灰色(#95a5a6)
- 確保所有中文正確顯示
- 包含3-5個關鍵步驟/概念
- 添加適當的連接線和方向箭頭
- 使用圓角矩形和圖標增強可讀性

ChatGPT 專用提示詞大全（推薦給新手）

針對 ChatGPT，可以使用這些「即插即用」提示詞：

🎯 基礎版：直接產圖（含 base64）

1

我想讓你作為一個SVG設計師。我將要求你創建圖片，而你將為圖片想出SVG代碼，將代碼轉換為base64數據url，然後給我一個回應，其中只包含一個指向該數據url的markdown圖片標籤。

或者更直接的方式

🖼 精細圖示設計（漸層、圓角、全彩）

1
2
3
4
5
6

請產生一個大小為100x100的 SVG 程式碼，主題為：【AI助手】，設計風格要求如下：
- 1:1 正方形
- 全彩
- 圓角設計
- 使用線性漸層背景
- 包含代表「AI」的圖標或符號

🔲 基礎圖形生成提示詞

對於簡單的幾何圖形，可以使用具體的座標描述：

• 直線：用svg從點 (0, 0) 到點 (100, 100) 画一條線
• 矩形：用svg在坐標點（0, 0）處繪製一個正方形，其右下角坐標為（100, 100）
• 圓形：用svg画一個圓心在 (50,50)，半徑 50 的圓

延伸閱讀：《ChatGPT幫你輕鬆畫圖》

三階段概念化圖解提示詞（進階：分析→設計→優化）

這是一組適合處理「複雜內容轉圖表」的結構性提示詞，特別推薦給教育訓練、產品邏輯、商業策略等應用場景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

請閱讀以下文章，並依三階段創建 SVG 知識圖表：

1. 分析階段：
- 提取核心概念與邏輯關係
- 判斷適合的圖表類型（流程圖、概念圖、比較圖…）
- 考慮目標受眾的認知需求

2. 設計階段：
- 建立清晰的視覺層次結構，突出最重要的資訊
- 使用適當的圖像隱喻、標籤與符號，使抽象概念更容易理解
- 搭配 3~5 種互補色，保持一致風格，增強可讀性和美感
- 平衡文字與視覺元素，確保簡潔性和完整性

3. 優化階段：
- 精簡資訊避免雜訊，去除不必要的細節
- 圖表應能單獨解釋核心概念，無需原文也能傳達完整資訊
- 驗證視覺圖解是否正確反映原意的核心思想

Claude vs ChatGPT 生成差異

SVG 圖表生成後怎麼用？四步驟快速編輯與輸出

1. 複製 AI 提供的 SVG 程式碼
2. 使用線上編輯器貼上並修改：
   👉 SVG 線上編輯工具
3. 匯出為高解析 PNG / SVG
4. 嵌入簡報、網頁、文章中

🎯 圖解主題提示詞範例

以下為實用範例，可直接貼入 AI 工具中使用：

1. AI 工具應用流程圖

1
2
3
4
5
6
7
8

根據下面資料，設計一張 SVG 流程圖，主題為【AI 工具應用流程】，目的是【幫助職場工作者了解導入 AI 工具的步驟】。

目標結構：
- 問題：重複性高的日常工作
- 過程：需求辨識 → 工具選擇 → 提示詞設計 → 結果驗證
- 解決方案：提升效率與減少錯誤

圖像風格：扁平化設計、主色調為科技藍(#3498db)，搭配圖標、箭頭與步驟框。

2. 自媒體經營三階段

1
2
3
4
5
6
7
8

設計一張 SVG 概念圖，主題為【自媒體經營的三階段】，目的是【協助創作者明確定位與優化策略】。

階段內容：
1. 初期探索（內容實驗、定位測試）
2. 穩定成長（受眾分析、內容優化）
3. 商業變現（聯盟行銷、付費產品）

格式需求：橫向三欄區塊、每一區塊配有 icon、標題加粗、漸層底色。

3. 價值堆疊模型圖

1
2
3
4
5
6
7

請生成一張表現【價值堆疊】的 SVG 圖表，目的為【展示如何提升產品感知價值】。

設計要求：
- 層層堆疊的矩形圖示（如蛋糕層）
- 每層文字：「內容價值」「社群互動」「售後支援」「限時優惠」「稀缺性」
- 使用黃色(#f1c40f)、橘色(#e67e22)、紅色(#e74c3c)漸層配色
- 加入金幣 icon 與箭頭，構成視覺中心

4. 品牌影響力擴散路徑圖

1
2
3
4
5
6
7
8

設計一張 SVG 路徑圖，主題為【品牌影響力擴散路徑】，目的是【幫助品牌理解如何從種子用戶擴展至大眾市場】。

結構邏輯：
- 起點：創作者內容發布
- 中段：鐵粉轉發 → 微網紅合作 → 媒體曝光
- 終點：品牌成長與信任建立

風格：圓圈節點連接線、淺灰配色、加入 emoji 表情符號

5. 職場晉升地圖圖解

1
2
3
4
5
6
7
8

生成一張 SVG 知識圖表，主題為【職場晉升地圖】，目的是【讓新鮮人理解從基層到主管的能力升級路徑】。

關鍵節點：
- 技能建立 → 團隊協作 → 專案管理 → 決策與影響力 → 領導與策略

設計風格：
- 橫向階梯樣式，每階配有標題與圖示
- 主色為綠色(#2ecc71)，輔色為灰藍(#7f8c8d)

常見問答（FAQ）

Q1：為什麼要用 SVG 而不是 PNG？

SVG 不會失真，可互動且適合 AI 生成；PNG 則為靜態圖片。

Q2：AI 生成的圖會很醜嗎？

不會，只要提示詞設計正確，Claude 與 ChatGPT 都能畫出結構清楚的圖。

Q3：我不會寫程式碼，也能用這方法嗎？

可以，本文提供的提示詞可直接複製使用，搭配線上編輯器即可操作。

Q4：SVG 可以直接用在簡報或部落格嗎？

可以。你可直接嵌入 <svg>...</svg>，或匯出為 PNG 再使用。

Q5：Claude 和 ChatGPT 哪個比較推薦？

若你有使用 Claude Pro，Claude 對提示詞的理解更細緻。若習慣 ChatGPT，也完全能達到需求。

Q6：可以讓 AI 畫出流程圖或心智圖嗎？

當然可以。請指定「流程圖」、「概念圖」、「比較圖」等圖形類型，AI 會據此設計結構。

Q7：SVG 編輯後能再丟回 AI 改嗎？

若懂 SVG 語法，可以調整後回貼給 AI 優化；或使用 SVG 編輯器再轉為提示詞。

結語

無論你是創作者、講師、工程師還是產品人員，掌握「AI + SVG」的圖表生成技術，都是視覺表達的超能力！從基礎幾何、流程圖、到進階分析圖，只要用對提示詞，你也能生成一流圖解。

🖊 線上工具推薦：jyshare SVG Editor