HTML Report Generator
生成"Claude Artifacts 风格"的精美单页HTML汇报文件，灵感来自 The Unreasonable Effectiveness of HTML。
设计原则
- 单文件自包含 — 无外部依赖，浏览器直接打开
- 暖色调设计 — ivory背景、oat/clay/olive/sage配色，禁止深色背景、蓝色、黑色、红色
- 衬线+无衬线混排 — 标题用serif，正文用sans，标签用mono
- 内联SVG图表 — 柱状图、折线图、sparkline直接嵌入
- 响应式 — 支持手机到桌面各种屏幕
工作流程
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）
