Canvas模式

什麼是 Canvas

Canvas 是 Agent 模式的一種延伸介面，它讓 AI 助理能夠生成和管理結構化的視覺內容。這項技術使 AI 不僅能夠進行對話，更能創建、編輯和呈現豐富的多媒體內容，包括互動式網頁元件、圖表、文件和程式碼等。

在傳統的對話式 AI 中，助理只能提供純文字回應，但 Canvas 技術打破了這個限制，讓 AI 助理能夠：

• 即時創建可視化內容

• 生成可互動的元件

• 提供結構化的資訊呈現

• 支援即時渲染程式碼

核心特色

Canvas 技術將傳統的純文字對話擴展到視覺化內容創建領域，讓企業能夠：

• 即時內容生成：AI 可以根據使用者需求立即創建各種格式的內容

• 互動式編輯：使用者可以直接與生成的內容進行互動和修改

• 多格式支援：支援 HTML、React、SVG、Markdown、Mermaid 等多種內容格式

• 無縫整合：完美融入對話流程，提供更直觀的使用體驗

• 專業品質：生成的內容達到專業設計和開發標準

• 即時預覽：所見即所得的內容編輯體驗

Canvas 的功能介紹

如何設置與啟用

Canvas 功能需要使用 Agent 模式，來處理視覺化內容生成需求。

回覆模式需選擇 Agent，下方 Agent 模式啟用畫布模式（Canvas）

使用情境

📊 資料視覺化

• 流程圖設計：使用 Mermaid 格式創建業務流程圖、系統架構圖

• 組織架構圖：生成清晰的企業組織結構、部門關係圖

• 數據圖表：創建互動式數據分析圖表、儀表板

• 時程規劃：甘特圖、專案時程表、里程碑規劃

💻 程式開發

• 程式碼展示：以格式化方式呈現程式碼範例、語法高亮

• API 文件：生成結構化的技術文件、互動式 API 說明

• 互動式元件：創建可操作的 React 元件、展示頁面

• 系統設計：架構圖、資料庫 ER 圖、網路拓撲圖

• 程式碼審查：視覺化程式碼結構、依賴關係圖

📝 文件製作

• 報告生成：自動化生成格式化報告、數據分析報告

• 使用手冊：創建圖文並茂的操作指南、產品說明書

• 專案提案：製作專業的專案展示文件、商業企劃書

• 會議記錄：結構化會議紀錄、決議追蹤表

• 教育訓練：互動式學習教材、課程大綱

🎨 創意設計

• 原型設計：快速創建網頁或應用程式原型、wireframe

• 圖形創作：使用 SVG 格式生成向量圖形、圖標設計

• 使用者介面：設計互動式 UI 元件、介面模擬

• 品牌設計：Logo 設計概念、品牌視覺元素

• 行銷素材：社群媒體圖片、廣告橫幅設計

🏢 企業應用

• 內部培訓：員工手冊、流程說明、安全規範

• 客戶服務：FAQ 視覺化、服務流程圖

• 銷售支援：產品介紹頁面、功能比較表

• 專案管理：任務分配圖、進度追蹤表

AI智慧判斷邏輯

在沒有特別設定角色指令的情況下，Agent 會根據以下因素判斷是否使用 Canvas：

1. 內容複雜度：結構化內容優先使用 Canvas

   • 表格、清單、階層結構

   • 多步驟流程說明

   • 比較分析內容

2. 互動需求：需要使用者互動的內容

   • 表單設計

   • 按鈕和控制項

   • 動態資料展示

3. 視覺化需求：圖表、圖形等視覺元素

   • 統計圖表

   • 示意圖

   • 架構圖

4. 格式要求：特定格式要求的內容

   • 程式碼展示

   • 文件範本

   • 專業報告

Demo示範

點擊使用畫布的工具

你可以把 Canvas 想像成「AI 的工作桌面」，不只回答問題，而是直接替你做出文件、圖表、程式與設計成果。它讓想法不再停留在對話中，而是立刻變成可用、可改、可展示的作品。