HTML Report Generator

生成"Claude Artifacts 风格"的精美单页HTML汇报文件，灵感来自 The Unreasonable Effectiveness of HTML。

设计原则

1. 单文件自包含 — 无外部依赖，浏览器直接打开
2. 暖色调设计 — ivory背景、oat/clay/olive/sage配色，禁止深色背景、蓝色、黑色、红色
3. 衬线+无衬线混排 — 标题用serif，正文用sans，标签用mono
4. 内联SVG图表 — 柱状图、折线图、sparkline直接嵌入
5. 响应式 — 支持手机到桌面各种屏幕

工作流程

1. 识别模板类型

根据用户输入判断合适的模板，参见 references/templates.md 获取选择逻辑和每种模板的结构。

2. 提取/确认数据

从用户提供的数据中提取关键信息。如数据不足，只问必填项，用合理默认值填充可选项。

3. 生成HTML

• 读取 references/design-system.md 获取完整的CSS变量、组件模式和排版规则
• 参考 assets/ 目录中的示例模板了解完整实现
• 所有CSS内联在 <style> 标签中
• 所有图表用内联SVG
• 中文内容使用 lang="zh-CN" 和对应字体栈

4. 交付

生成的HTML文件保存到workspace，然后上传到用户的云盘并返回分享链接。

示例模板资源

assets/ 目录包含完整的示例HTML文件可供参考：

• 01-weekly-report.html — 周报
• 02-project-progress.html — 项目进度
• 03-monthly-summary.html — 月度总结
• 04-postmortem.html — 复盘报告

生成新报告时，参考这些文件的结构和样式，但根据用户数据定制内容。

关键CSS模式速查

body { background: var(--ivory); padding: 56px 24px 120px; }
.page { max-width: 900px; margin: 0 auto; }
h1 { font-family: var(--serif); font-size: 36px; font-weight: 500; }
h2 { font-family: var(--serif); font-size: 24px; }
.stat-num { font-family: var(--serif); font-size: 40-48px; }
.eyebrow { font-family: var(--mono); font-size: 12px; uppercase; color: gray-500; }

• 面板: background: var(--paper); border: 1.5px solid var(--gray-300); border-radius: 12px;
• 强调: border-left: 4px solid var(--clay);
• 成功: background: var(--olive-light); color: #4B5C39;
• 进行中: background: var(--oat); color: var(--slate);

禁止项

• ❌ 深色/暗色背景
• ❌ 蓝色、纯黑色、纯红色
• ❌ 外部CSS/JS依赖
• ❌ 重阴影效果
• ❌ 纯无衬线设计（标题必须用serif）