全部技能 分类浏览
← 返回
未分类

Claude风格HTML汇报文件

生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slide-deck)、状态看板(status-dashboard)。风格特征：暖色调(ivory/oat/clay/olive)、衬线+无衬线混排、内联SVG图表、单文件自包含。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slide-deck)、状态看板(status-dashboard)。风格特征：暖色调(ivory/oat/clay/olive)、衬线+无衬线混排、内联SVG图表、单文件自包含。
森森两两
未分类 community v1.0.0 1 版本 100000 Key: 无需
★ 0
Stars
📥 77
下载
💾 0
安装
1
版本
#latest

概述

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内联在