visualize 是做什么的？

将任何想法、数据或内容转化为出色的单文件HTML可视化。

创建文件后

写入HTML文件后，务必执行以下两个步骤：

在浏览器中自动打开： 如果可用，使用IDE的浏览器打开工具。否则，在Windows上运行 Invoke-Item <文件名>.html，在macOS上运行 open <文件名>.html，在Linux上运行 xdg-open <文件名>.html。
返回可点击的文件链接： 在VS Code的回复中，使用指向生成的工作区文件的Markdown链接。仅当输出在工作区之外且客户端支持时，才使用 file:// URL。

创建后的回复示例：

已创建您的可视化！正在浏览器中打开...
[my-dashboard.html](my-dashboard.html)

关键要求（不可协商）

⚠️ 缺少以下8个要素将导致评估失败 ⚠️

每个文件必须从 references/skeleton.md 中的骨架模板开始 — 复制整个模板，然后添加您的内容。

CSS自定义属性： 必须使用确切的名称：--bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — 不能使用其他名称（如 --bg-primary、--text-primary）。关键： 评估系统兼容性需要这些确切的属性名称。
实用菜单系统（强制）： 包含 .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>）。评估关键： 菜单系统会被自动检查，缺失将导致失败。
主题类（评估关键）： 必须在样式表中明确同时定义 .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 } } 以支持无障碍。切勿禁用工具提示 — 评估系统会检查工具提示是否启用。图表可靠性系统： 使用专用的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', '图表可视化');
      }
      // 使用增强的错误处理初始化
      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 属性

响应式设计： 段落间距 ≥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 → 将“此处填写您的内容”替换为可视化内容 → 保存文件

核心原则

单文件HTML — 一个 .html 文件，内联CSS/JS。可在任何浏览器中打开，可离线工作，易于通过电子邮件发送。
亮色主题优化 — 现代设计优先考虑亮色模式质量。可通过切换按钮启用暗色主题。
开箱即美 — 首次输出即应看起来专业，无需任何迭代。
内容优先 — 可视化为信息服务。切勿为了美观而牺牲清晰度。
响应式 — 可在桌面、平板和移动设备上工作，除非明确指定固定尺寸（例如，16:9幻灯片）。
视觉克制 — 专业设计避免使用增加噪点的装饰性元素。不使用浮动渐变球体、彩虹边框或装饰性动画。

理念

HTML不是“网站”——它是一种可视化工具。代码是廉价的。每个人都应能自如地可视化任何事物。此技能将对话上下文、URL、文章、数据或原始想法在几秒钟内转化为视觉化、易于理解的内容。

用户与Claude Code在对话过程中调用此技能。使用完整的对话上下文——他们正在讨论的任何内容、分享的任何链接、粘贴的任何数据——作为源材料。在提供URL时，抓取并提取内容以进行可视化。

输出规则

强制第一步：从 references/skeleton.md 复制完整的骨架模板 — 这包括所有必需的元素（菜单、主题系统、CSS属性、语义化HTML、无障碍功能）。切勿从头编写HTML。

将一个 .html 文件写入 ~/Downloads/（或用户指定的路径）
文件名：描述性的kebab-case形式，例如 q4-revenue-dashboard.html、team-roadmap-deck.html
以 skeleton.md 模板开头，在  部分添加您的内容
将所有自定义样式放在骨架基础样式后的 <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="幻灯片导航">
  <button onclick="prevSlide()" aria-label="上一张幻灯片">
    <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="下一张幻灯片">
    <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
有关完整细节，请参见参考文档

间距：

使用8像素网格：padding 32px（mobile 16px），段落间距 24px，分区间距 64px。请参见参考文档了解完整细节。

动画：

入场：fadeIn + translateY(20px)，持续 600ms ease-out
过渡：主题切换（颜色/背景）使用 0.3s ease，悬停效果使用 0.2s ease
参见参考文档了解关键帧

无障碍：

所有交互元素可以通过键盘访问
颜色对比度符合WCAG AA标准
屏幕阅读器使用语义化HTML
动画尊重 prefers-reduced-motion

Create file...

当被要求创建文件时：

检查 ~/Downloads/ 是否存在且可写
将 skeleton.md 中的全部内容复制到新文件
将骨架中的注释替换为您的内容
添加CDN特定库的脚本（例如 Chart.js、D3.js、Mermaid、Reveal.js、Three.js、Leaflet）
添加自定义CSS（在 <style> 标签中）
添加自定义JS（在 <script> 标签中）
添加图形和字符
对于D3.js，始终使用API版本7（d3@7）
不要在此思想链中输出文件，除非在单独的工具调用中
重新阅读上述所有要求以确保合规

如果文件已经存在：

询问用户是否覆盖
除非用户另有说明，否则不要为现有文件创建新文件

对于非HTML可视化（例如SVG）： 询问用户是否希望他们想要SVG还是HTML可视化。

如果用户请求非可视化输出： 礼貌地拒绝并提供可视化替代方案。

当要求可视化时，始终提出后续改进问题。

文件结构（按顺序）

复制 skeleton.md
用您的可视化内容替换注释
在 <head> 标签的 <title> 标签中设置标题
在骨架基础样式之后的 <style> 中添加自定义样式
在骨架基础标签之后的 <body> 标签中添加CDN脚本引用
添加包含可视化内容的 <main id="main-content"> 元素
添加自定义JS功能
确保菜单和主题功能正常运行

namgung9406/visualize

visualize 是什么？

在你喜欢的 AI 中提问

文档

visualize 是做什么的？

创建文件后

关键要求（不可协商）

核心原则

理念

输出规则

设计系统

设计说明

文件结构（按顺序）

相关技能

steipete/songsee

affaan-m/frontend-design

mattpocock/improve-codebase-architecture

lobehub/add-provider-doc

addyosmani/browser-testing-with-devtools

bytedance/chart-visualization