presentation-creator

Sentry 演示文稿构建器

使用 React + Vite + Recharts 创建交互式、数据驱动的演示文稿幻灯片，采用 Sentry 设计系统样式，并构建为单个可分发的 HTML 文件。

步骤 1：收集需求

询问用户：

1. 演示文稿的主题是什么？
2. 需要多少张幻灯片（通常为 5-8 张）？
3. 需要哪些数据/图表？（时间序列、对比、示意图、区域图表）
4. 叙事脉络是什么？（问题 → 解决方案、之前 → 之后、技术深度解析）

数据评估（重要）

设计幻灯片前，先评估源内容是否包含真实的定量数据（数字、百分比、测量值、时间序列、成本、指标）。仅在包含真实数据的幻灯片中创建 Recharts 可视化。不要编造、估算或捏造数据来填充图表。

• 有真实数据 → 使用 Recharts 图表（柱状图、面积图、折线图等）
• 没有数据 → 使用基于文本的布局：卡片、表格、项目符号栏、示意图或引言块。不要用虚构数字创建图表。

如果源内容完全是定性的（叙述、观点、策略、流程说明），演示文稿中就不应包含任何图表。只有在至少一张幻灯片需要可视化真实数据时，才应在项目中包含 Recharts 和 Charts.jsx。

步骤 2：搭建项目框架

创建项目结构：

<project-name>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=swap" rel="stylesheet" />
    <title>TITLE</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json

{
  "name": "PROJECT_NAME",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.15.3" },
  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.0", "vite-plugin-singlefile": "^2.3.0" }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './App.css'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

步骤 3：构建幻灯片系统

阅读 references/design-system.md，了解完整的 Sentry 配色方案、字体排印、CSS 变量、布局工具类和动画系统。

App.jsx 结构

将幻灯片定义为返回 JSX 的函数数组：

const SLIDES = [
  () => ( /* Slide 0: Title */ ),
  () => ( /* Slide 1: Context */ ),
  // ...
];

每个幻灯片函数都返回一个 <div className="slide-content">，其中包含：

1. 一个 <h2> 标题
2. 可选的副标题段落
3. 主要内容（图表、卡片、示意图、表格）
4. 动画类：.anim、.d1、.d2、.d3，用于实现交错淡入效果

不要在标题上方添加类别标签胶囊/徽章（例如 “BACKGROUND”“EXPERIMENTS”）。它们看起来千篇一律，也没有价值。让标题本身表达内容。

导航

实现键盘导航（ArrowRight/Space = 下一张，ArrowLeft = 上一张），并添加底部导航浮层，其中包含上一张/下一张按钮、圆点指示器和幻灯片编号。导航没有边框或背景，以透明样式悬浮。每张幻灯片的左上角固定显示一个低对比度的小型 Sentry 字形水印。

function App() {
  const [cur, setCur] = useState(0);
  const go = useCallback((d) => setCur(c => Math.max(0, Math.min(SLIDES.length - 1, c + d))), []);

  useEffect(() => {
    const h = (e) => {
      if (e.target.tagName === 'INPUT') return;
      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(1); }
      if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [go]);

  return (
    <>
      {cur > 0 && <div className="glyph-watermark"><SentryGlyph size={50} /><span className="watermark-title">TITLE</span></div>}
      <div className="progress" style={{ width: `${((cur + 1) / SLIDES.length) * 100}%` }} />
      {SLIDES.map((S, i) => (
        <div key={i} className={`slide ${i === cur ? 'active' : ''}`}>
          <div className={`slide-content${i === cur ? ' anim' : ''}`}>
            <S />
          </div>
        </div>
      ))}
      <Nav cur={cur} total={SLIDES.length} go={go} setCur={setCur} />
    </>
  );
}

步骤 4：创建图表（仅在有数据时）

重要：仅为源内容提供了真实、具体数据的幻灯片创建图表。 如果幻灯片内容是定性的（策略、经验、流程说明、观点），则改用基于文本的布局（卡片、表格、项目符号列表、分栏）。绝不要编造数字、捏造百分比或生成合成数据来填充图表。如果不确定数据是真实数据还是推断数据，就不要创建图表。

如果没有任何幻灯片需要图表，则完全跳过此步骤——不要创建 Charts.jsx，也不要导入 Recharts。

有真实数据时，阅读 references/chart-patterns.md，了解 Recharts 组件模式，包括坐标轴配置、颜色常量、图表类型和数据生成技术。

将所有图表组件放在 Charts.jsx 中。关键模式：

• 使用 ResponsiveContainer，并设置明确的高度
• 用 .chart-wrap div 包裹，并将最大宽度设为 920px
• 使用 useMemo 生成数据
• 颜色规则：使用受 Tableau 启发的分类调色板（CAT[]）区分数据系列和分组。仅当颜色本身具有含义（好/坏、成功/失败、警告）时，才使用语义色（SEM_GREEN、SEM_RED、SEM_AMBER）。
• 常见图表：使用堆叠 Area/Line 的 ComposedChart、BarChart、自定义 SVG 示意图
• **图表中的每个数据点都必须来自源内容。**不要为了让图表更美观而插值、外推或四舍五入数字。

第 5 步：使用 Sentry 设计系统进行样式设计

应用设计系统参考中的完整 CSS。关键元素：

• 字体：来自 Google Fonts 的 Rubik
• 颜色：UI 外观使用 CSS 变量（--purple、--dark、--muted）。仅在颜色用于表达含义时使用语义 CSS 变量（--semantic-green、--semantic-red、--semantic-amber）。其他所有数据可视化均使用分类调色板（CAT[]）。
• 幻灯片：绝对定位，使用透明度过渡
• 动画：使用带有交错延迟的 fadeUp 关键帧
• 布局：.cols 弹性行、.cards 网格、.chart-wrap 容器
• 标签：幻灯片标签使用 .tag-purple、.tag-red、.tag-green、.tag-amber
• Logo：从 references/sentry-logo.svg（完整字标）或 references/sentry-glyph.svg（仅图形标志）读取官方 SVG。切勿硬编码近似版本，务必使用这些文件中的精确 SVG 路径。

第 6 步：常见幻灯片模式

标题幻灯片

Logo（来自 references/sentry-logo.svg 或 references/sentry-glyph.svg）+ h1 + 副标题 + 作者/日期信息。

问题/背景幻灯片

标签 + 标题 + 带图标标题的双列卡片网格。

数据对比幻灯片

标签 + 标题 + 并排图表或前后对比表格。

技术深入解析幻灯片

标签 + 标题 + 全宽图表 + 下方的注释要点。

总结/决策幻灯片

标签 + 标题 + 三列布局，包含分类标题和项目符号列表。

第 7 步：迭代和优化

完成初步搭建后：

1. 运行 npm install && npm run dev 启动开发服务器
2. 迭代调整图表数据模型和视觉设计
3. 调整动画、颜色和布局间距
4. 构建最终输出：npm run build 会在 dist/ 中生成单个 HTML 文件

输出要求

一个可正常运行的 React + Vite 项目，满足以下要求：

• 可渲染为支持键盘导航的幻灯片
• 使用 Sentry 品牌元素（颜色、字体、图标）
• 仅对源内容中包含真实定量数据的幻灯片使用 Recharts 可视化——不得编造数据
• 如果没有幻灯片包含真实数据，则完全省略 Charts.jsx 和 Recharts 依赖
• 构建为单个可分发的 HTML 文件
• 幻灯片切换时具有流畅的淡入动画