Claude 互動圖表功能概述與觸發機制

Claude 於 2026 年 3 月推出互動圖表 Beta 功能，支援 HTML/SVG 即時渲染，會自行判斷何時適合生成圖表。根據 The Decoder 報導，明確的提示詞能大幅提升視覺化品質與互動性。此功能目前僅支援網頁與桌面版（9to5google 指出）。

核心觸發原則：提示詞需明確指定圖表類型、資料維度、視覺風格，並說明互動需求（如懸停顯示數值、點擊篩選）。以下為 10 種場景的完整 Prompt 模板。

資料分析圖表 Prompt 模板（3 種）

1. 折線圖模板 — 營收趨勢分析

請生成一個互動式折線圖，展示 [公司名稱] 2023-2025 年各季營收趨勢。

需求：
- X 軸：季度（Q1 2023 至 Q4 2025）
- Y 軸：營收金額（單位：百萬美元）
- 資料：Q1 2023: 12.5, Q2: 14.2, Q3: 13.8, Q4: 16.1, Q1 2024: 15.3, Q2: 17.6, Q3: 18.9, Q4: 21.2, Q1 2025: 19.8, Q2: 22.4, Q3: 24.1, Q4: 27.3
- 視覺風格：專業商務風，使用品牌色系
- 互動要求：滑鼠懸停顯示詳細數值與年增率
- 加入圖例與網格線

2. 長條圖模板 — 產品銷售比較

生成互動式群組長條圖，比較三條產品線在四個地區的銷售額。

參數：
- 產品線：A 系列、B 系列、C 系列
- 地區：北區、中區、南區、東區
- 數值（單位：千美元）：
  - 北區：A=1250, B=980, C=1420
  - 中區：A=890, B=1100, C=1250
  - 南區：A=720, B=850, C=980
  - 東區：A=560, B=620, C=780
- 互動：點擊圖例可切換顯示/隱藏特定產品線
- 配色：使用對比鮮明的色調

3. 圓餅圖模板 — 市場佔有率分布

製作互動式圓餅圖，顯示 2025 年台灣手機市場佔有率。

資料：
- 品牌 A：32%
- 品牌 B：28%
- 品牌 C：18%
- 品牌 D：12%
- 其他：10%

要求：
- 點擊扇區可突出顯示並顯示詳細資訊
- 加入百分比標籤與圖例
- 使用立體感配色提升視覺層次
- 懸停時顯示品牌名稱與確切佔有率

流程架構圖 Prompt 模板（3 種）

4. 系統架構圖模板 — 雲端服務架構

請繪製一個雲端服務系統架構圖，包含以下元件與連接關係：

元件：
- 用戶端：Web 應用程式、行動 App
- 負載均衡器：AWS ALB
- 應用伺服器：3 台 EC2 實例（Auto Scaling Group）
- 資料庫：RDS PostgreSQL（主從複寫）
- 快取層：ElastiCache Redis
- 訊息隊列：SQS
- 第三方服務：Stripe 支付、SendGrid 郵件

連接線需標註協定（HTTP/HTTPS、TCP、SSL）
視覺風格：資訊工程標準圖示，清晰的層次結構

5. 業務流程圖模板 — 訂單處理流程

生成 BPMN 風格的業務流程圖，展示電子商務訂單處理流程：

步驟：
1. 客戶下單 → 2. 系統驗證庫存
3. 庫存充足：進入付款流程
4. 庫存不足：發送缺貨通知，回饋庫存更新
5. 付款成功：生成出貨單 → 通知倉庫揀貨 → 包裝出貨 → 物流配送
6. 付款失敗：通知客戶重新付款
7. 客戶收到商品：完成訂單

要求：
- 使用標準 BPMN 圖示（菱形决策點、矩形流程、橢圓形事件）
- 清晰的泳道圖分類（客戶、系統、倉庫、物流）
- 顏色區分不同狀態（待處理、處理中、完成、異常）

6. 組織結構圖模板 — 企業階層架構

繪製公司組織結構圖：

階層：
- 執行層：CEO
- 一級主管：財務長、行銷長、技術長、營運長
- 匯報關係：
  - 財務長下設：財務部、會計部
  - 行銷長下設：品牌部、數位行銷部、公關部
  - 技術長下設：研發部、資安部、DevOps 部門
  - 營運長下設：客服部、業務部

風格：專業企業版視覺，清晰的階層連線，懸停顯示部門人數與負責人

教學與比較類 Prompt 模板（4 種）

7. 步驟教學圖模板 — 折紙指南

建立互動式折紙步驟視覺指南，教學如何摺一隻紙鶴：

步驟：
1. 準備正方形色紙，中心對折成三角形
2. 展開後將兩側向中心折疊
3. 上下對折形成細長方形
4. 拉開兩側折出三角形頭部
5. 壓平形成正方形基礎
6. 拉開翅膀與尾部
7. 完成調整

要求：
- 每個步驟獨立一個圖示區塊
- 步驟編號清晰
- 重要折疊線用虛線標註
- 點擊步驟可展開詳細說明

8. 比較矩陣圖模板 — 工具功能對比

生成功能比較矩陣圖，對比四款專案管理工具：

工具：Notion、Trello、Asana、Jira
評估維度：
- 任務管理：★★★★★/★★★★☆/★★★★☆/★★★★★
- 團隊協作：★★★★★/★★★☆☆/★★★★☆/★★★★☆
- 自動化：★★★★☆/★★☆☆☆/★★★★☆/★★★★★
- 價格合理性：★★★★☆/★★★★★/★★★☆☆/★★☆☆☆
- 學習曲線：★★★★☆/★★★★★/★★★★☆/★★☆☆☆

視覺呈現：
- 使用星級評分條形圖
- 顏色熱度圖（綠色高分、紅色低分）
- 可依維度排序比較

9. 時間軸模板 — 專案里程碑

製作專案時間軸（甘特圖風格），展示產品開發時程：

階段：
- 需求分析：2025/01/01 - 2025/01/31
- UI/UX 設計：2025/02/01 - 2025/02/28
- 前端開發：2025/03/01 - 2025/04/15
- 後端開發：2025/03/15 - 2025/05/01
- 整合測試：2025/05/01 - 2025/05/20
- Beta 測試：2025/05/21 - 2025/06/10
- 正式上線：2025/06/15

要求：
- 橫向時間軸顯示月份
- 彩色長條表示各階段工期
- 關鍵里程碑用菱形標記
- 顯示相依關係與緩衝時間

10. 地理熱力圖模板 — 門市分布分析

生成台灣地圖熱力圖，展示全台門市分布密度與營收貢獻：

門市資料（名稱、縣市、營收）：
- 台北信義店：台北市，營收 850 萬
- 台中逢甲店：台中市，營收 620 萬
- 高雄巨蛋店：高雄市，營收 580 萬
- 桃園中壢店：桃園市，營收 420 萬
- 台南中西區店：台南市，營收 380 萬

呈現方式：
- 地圖基礎上疊加熱力圖層
- 營收越高，熱力點越大且顏色越深
- 點擊門市顯示詳細資訊卡片
- 側邊列表可排序篩選

Prompt 設計關鍵技巧

根據 Gartner 人工智慧研究，企業 AI 工具的有效採用需結合明確的使用場景與具體需求。設計高效 Claude 圖表 Prompt 的三大原則：

麻省理工學院計算機科學與人工智慧實驗室（MIT CSAIL）的研究指出，明確的指令結構能提升 AI 輸出準確度達 40% 以上，這也呼應了有效 Prompt 設計的重要性。