Visualize

Visualize 是做什麼的？

將任何想法、數據或內容轉換成精美、自包含的單一 HTML 檔案視覺化圖表。

建立檔案後

寫完 HTML 檔案後，請務必執行以下兩個步驟：

1. 在瀏覽器中自動開啟： 如果 IDE 提供瀏覽器開啟工具，請使用它。否則，在 Windows 上執行 Invoke-Item <filename>.html，在 macOS 上執行 open <filename>.html，在 Linux 上執行 xdg-open <filename>.html。
2. 返回可點擊的檔案連結： 在 VS Code 回覆中，請使用 Markdown 連結指向生成的工作區檔案。僅當輸出位於工作區之外且客戶端支援時，才使用 file:// URL。

建立後的範例回覆：

已建立您的視覺化圖表！正在瀏覽器中開啟...
[my-dashboard.html](my-dashboard.html)

關鍵需求（不可協商）

⚠️ 缺少以下 8 個元素，保證評估失敗 ⚠️

每個檔案都必須從 references/skeleton.md 中的骨架模板開始 — 複製整個模板，然後加入您的內容。

1. CSS 自訂屬性： 必須使用這些精確的名稱：--bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — 不得使用其他名稱（例如 --bg-primary 或 --text-primary）。關鍵： 這些精確的屬性名稱是評估系統相容性所必需的。
2. 工具選單系統（強制）： 完整的 .viz-menu 元素，包含 .viz-menu-toggle 按鈕、.viz-menu-dropdown 容器、下載 PNG 按鈕（onclick="downloadImage()"）、列印按鈕（onclick="window.print()"）以及 html-to-image CDN 腳本（<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>）。評估關鍵： 選單系統會自動檢查，缺少它將導致失敗。
3. 主題類別（評估關鍵）： 必須在樣式表中明確定義 .theme-light 和 .theme-dark 類別，並包含完整的自訂屬性定義。必要範例：

:root { /* 基礎屬性 */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* 等等 */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* 等等 */ }

絕對不要只依賴 :root 或 @media (prefers-color-scheme) — 評估系統會檢查基於類別的主題。 4. 語意化 HTML： <main id="main-content"> 元素，強制：多個 <section> 元素用於主要內容區塊（頁首、指標、圖表等），以及跳至內容的連結。每個不同的內容區域都必須包覆在語意化的 <section> 標籤中。 5. Chart.js 需求（評估關鍵）： 必須在關閉 </head> 之前包含 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>。強制： 緊接在 Chart.js 腳本之後，加入 <script>Chart.defaults.animation = false;</script>（防止動畫異常，且會由評估系統自動檢查）。強制圖表驗證： 每個圖表函式都必須以 if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; } 開頭。圖表無障礙功能： 每個 canvas 元素都必須包含 role="img" 和描述性的 aria-label 屬性。關鍵圖表設定： 設定 maintainAspectRatio: false、responsive: true 和 plugins: { tooltip: { enabled: true } } 以確保無障礙功能。絕對不要停用 tooltip — 評估系統會檢查 tooltip 是否啟用。圖表可靠性系統： 使用專用的 ChartManager 模式來實現可靠的整合：

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js library not loaded - check CDN inclusion');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas element not found: ' + canvasId);
        return null;
      }
      // 確保沒有衝突的圖表實例
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // 設定無障礙屬性
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart visualization');
      }
      // 使用增強的錯誤處理進行初始化
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart initialization failed for ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart theme update failed for ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart destruction failed:', error);
      }
    });
    this.charts.clear();
  }
};

請使用 ChartManager.safeInit() 而非原始的 new Chart()。關鍵圖表設定： 設定 maintainAspectRatio: false、responsive: true 和 plugins: { tooltip: { enabled: true } } 以確保無障礙功能。圖表容器尺寸： 容器必須有明確的 height >= 300px 才能讓圖表正確渲染。使用支援主題感知的顏色搭配 CSS 自訂屬性，切勿使用靜態的十六進位顏色。絕對不要在 Chart.js CDN 中使用 import/export 語法 — 僅使用標準的 var 宣告。

Chart.js 疑難排解（關鍵）： 如果圖表顯示為空白白色區域：

• 確認 Chart.js CDN 已包含在 </head> 之前
• 確認 Chart.defaults.animation = false; 緊接在 CDN 之後
• 確認圖表初始化在 DOMContentLoaded 事件監聽器中
• 確認檔案中沒有模組 import/export 語法
• 確認已正確使用 ChartManager.safeInit() 模式
• 確認 canvas 已包含 role="img" 和 aria-label 屬性

6. 響應式設計： 區塊間距 ≥48px，關鍵：在 375px 視口下不能有水平溢出（強制：加入 @media (max-width: 375px) { body { overflow-x: hidden; } } 以防止水平滾動），強制字型大小層級： h1 ≥ 2.5rem、h2 ≥ 2rem、h3 ≥ 1.5rem、body = 1rem。投影片需求： 標題幻燈片的 h1 ≥ 3rem、內容幻燈片標題 ≥ 2.5rem、標題層級之間要有清晰的視覺區分。幻燈片區塊間距： 幻燈片內的主要區塊之間必須有 ≥48px 的間距（標題到內容、內容到圖表、圖表到導覽）。在所有 375px 寬度下測試佈局 — 儀表板特別容易發生圖表容器溢出。 CSS 容器查詢： 為了實現進階的響應式設計，請使用基於容器的查詢：

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

這提供了超越視口媒體查詢的真正元件級響應能力。 7. 列印與無障礙： @media print 樣式、@media (prefers-reduced-motion: reduce) 並停用動畫 8. 進入動畫（強制）： 必須透過 .animate 類別、data-reveal 屬性或 CSS @keyframes 來包含進入動畫。評估關鍵： 動畫的存在與否會由系統自動偵測並要求。 9. JavaScript 函式： cycleTheme()、toggleMenu()、頂層變數請使用 var 而非 let/const

🔥 關鍵：精確複製 skeleton.md → 將「YOUR CONTENT HERE」替換為視覺化內容 → 儲存檔案

核心原則

1. 單一 HTML 檔案 — 一個內嵌 CSS/JS 的 .html 檔案。可在任何瀏覽器中開啟，可離線運作，易於透過電子郵件分享。
2. 淺色主題最佳化 — 現代設計優先考慮淺色模式的品質。可透過切換按鈕使用深色主題。
3. 預設即美觀 — 第一次輸出就應該看起來很專業，無需反覆迭代。
4. 內容優先 — 視覺化服務於訊息。絕對不要為了美觀而犧牲清晰度。
5. 響應式 — 在桌面、平板和手機上都能運作，除非明確指定了固定尺寸（例如 16:9 投影片）。
6. 視覺節制 — 專業設計應避免會增加雜訊的裝飾性元素。不要使用浮動的漸層圓球、彩虹邊框或裝飾性動畫。

理念

HTML 不是「網站」— 它是一種視覺化工具。程式碼是廉價的。每個人都應該能夠輕鬆地將任何內容視覺化。這項技能能將對話上下文、URL、文章、數據或原始想法，在幾秒鐘內轉換成視覺化且易於理解的內容。

使用者會在與 Claude Code 的對話進行中呼叫此技能。請充分利用完整的對話上下文 — 無論他們正在討論什麼內容、分享過哪些連結、貼上過哪些數據，都應作為來源素材。當提供 URL 時，請爬取該 URL 並提取內容進行視覺化。

輸出規則

強制第一步：從 references/skeleton.md 複製完整的骨架 — 這包括所有必要的元素（選單、主題系統、CSS 屬性、語意化 HTML、無障礙功能）。絕對不要從頭開始編寫 HTML。

• 將一個 .html 檔案寫入到 ~/Downloads/（或使用者指定的路徑）
• 檔案名稱：使用描述性的 kebab-case，例如 q4-revenue-dashboard.html、team-roadmap-deck.html
• 從 skeleton.md 模板開始，將您的內容加入到 <!-- YOUR CONTENT HERE --> 區段
• 所有自訂樣式放在 <style> 中，位於骨架基礎樣式之後
• 鼓勵使用 CDN 函式庫 — 使用最適合的工具：
  • Tailwind CSS — https://cdn.tailwindcss.com（實用優先的樣式，可自由使用）
  • Chart.js — https://cdn.jsdelivr.net/npm/chart.js（長條圖、折線圖、圓餅圖、雷達圖、甜甜圈圖）
  • D3.js — https://cdn.jsdelivr.net/npm/d3@7（複雜/自訂資料視覺化、力導向圖）
  • Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js（流程圖、序列圖）
  • Three.js — 在適當情況下用於 3D
  • Reveal.js — 在需要完整功能投影片引擎時使用。關鍵： 必須設定 html, body { height: 100%; overflow: hidden; } 並為 .reveal 容器設定 height: 100%。設定必須使用數值尺寸：Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — 絕對不要使用字串百分比（例如 '100%'），這會導致視口高度為零和空白投影片。強制：停用 Reveal.js 預設控制項 (controls: false) — 預設的 < > 箭頭覆蓋層很醜。請改用自訂的簡潔底部導覽列：

<nav class="slide-nav" aria-label="Slide navigation">
  <button onclick="prevSlide()" aria-label="Previous slide">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="Next slide">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

• Leaflet — 地圖和地理空間數據（https://unpkg.com/[email protected]/dist/leaflet.js + CSS）。處理地理數據時必要 — 絕對不要手繪 SVG 大陸形狀。請使用 OpenStreetMap 圖磚或最小的圖磚提供商。
• 使用 SVG 處理圖示和簡單圖形 — 除非使用者提供，否則絕對不要使用外部圖片 URL
• 偏好使用 CSS 動畫而非 JS

有關詳細的 CDN 連結、模式和技巧，請參閱 references/libraries.md。

設計系統

套用以下預設值。這些是經過深思熟慮且經過測試的 — 僅在使用者要求時才覆寫。

完整的設計系統參考： 有關完整的字體、顏色、間距、動畫、無障礙功能和視覺打磨規格，請參閱 references/design-system.md。

主要亮點（完整細節請查閱參考文件）：

設計備註

主題系統（關鍵）：

• 僅使用基於類別的主題 — <html class="theme-dark"> 或 <html class="theme-light">
• 主題切換會變更 html 類別：document.documentElement.className = 'theme-' + newTheme
• 絕對不要使用 data-theme 屬性 — 評估系統預期使用基於類別的主題
• 必要的 CSS 自訂屬性： --bg, --surface, --text, --accent, --border（評估相容性的最小集合）

字體：

• 強制使用 Inter 字型 — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
• 強制的字重層級： h1 ≥ 700、h2 ≥ 600、h3 ≥ 500、body = 400（關鍵評估需求）
• 標題使用 -0.03em 的字距
• 韓文排版卓越： 對於韓文內容，正文使用 Noto Sans KR，UI 元素使用 Inter。韓文套用 line-height: 1.6（拉丁文為 1.4）。韓文的 Medium 字重對應到西方 Regular (400)。包含：https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

顏色：

• 僅使用基於類別的主題（不使用 @media prefers-color-scheme）
• 深色：背景 #0A0A0A、文字 #EDEDED。淺色：背景 #FAFAF9、文字 #0f172a
• 完整細節請查閱參考文件

間距：

• 區塊間距 40-60px，卡片內邊距 20-32px
• 儀表板：網格間距 20-24px

陰影：

• 卡片：0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 6px -1px rgb(0 0 0 / 0.02), 0 2px 4px -2px rgb(0 0 0 / 0.02)
• 浮動元素（工具提示、下拉選單）：0 25px 50px -12px rgb(0 0 0 / 0.25)

動畫：

• 僅使用 .animate 類別或資料屬性進行一次性進入動畫
• 不使用持續的動畫、脈衝、旋轉或閃爍裝飾

請參閱參考文件以了解完整的規格。

資料視覺化指南

圖表

• 偏好使用 Chart.js 處理標準圖表類型（長條圖、折線圖、圓餅圖、甜甜圈圖、雷達圖、極面區域圖）
• 複雜或自訂視覺化使用 D3.js
• 流程圖和圖表使用 Mermaid
• 地圖使用 Leaflet
• 圖表應始終具有：
  • 清晰的標題或圖說
  • 適當的標籤
  • 無障礙的 aria-label
  • 主題感知的顏色

圖表

• 對於流程圖、組織圖和心智圖，使用語意化的 HTML 結構搭配自訂 CSS
• 複雜圖表使用 Mermaid
• 始終包含圖例和標籤

資料表格

• 使用語意化的 HTML <table> 元素
• 包含適當的 <thead>, <tbody>, <th> 結構
• 實現斑馬紋行（偶數行使用 --surface 背景）
• 使數字靠右對齊以便於比較

儀表板

• 使用 CSS Grid 進行佈局
• 每個卡片代表一個指標或圖表
• 包含 KPI 及其相對於前一時期的變化
• 使用顏色編碼的指標（綠色表示正向，紅色表示負向）

投影片與簡報

• 使用語意化的區段作為投影片
• 每張投影片都應有清晰的標題和內容
• 內建導覽（上一張/下一張）
• 包含投影片計數器
• 支援深色/淺色主題
• 每張投影片內容最少化 — 每張一個主要想法

範例

請參閱 references/examples/ 目錄以獲得完整的工作範例。

• q4-revenue-dashboard.html — 公司績效儀表板
• startup-pitch-deck.html — 募資演示投影片
• project-roadmap.html — 專案時間軸
• comparison-table.html — 產品比較

相關參考

• skeleton.md — 所有視覺化所需的骨架模板
• design-system.md — 完整的設計規格
• libraries.md — CDN 連結函式庫
• examples/ — 工作範例