# HTML信息图生成器
## 任务目标
– 本 Skill 用于：从用户提供的文字内容中提炼核心关键点，生成视觉冲击力强的HTML信息图网页
– 能力包含：文本关键点提炼、信息架构设计、HTML/CSS代码生成、视觉设计实现
– 触发条件：用户发送文字内容并希望生成可视化信息图、数据展示页面、图文混排网页
## 设计规范
### 1. 视觉设计
– **布局风格**：采用Magazine Layout（杂志排版）风格，强调网格系统、留白对比、视觉层次
– **主题色调**：深色主题，背景色使用 `#0a0a0a` 或 `#1a1a1a`，营造现代高端氛围
– **视觉层次**：通过大小、粗细、位置、色彩对比建立清晰的信息层级
### 2. 字体与排版
– **中文文本**：使用大号粗体（60-120px），突出核心要点，强调视觉冲击力
– 标题字体：`font-weight: 700-900`
– 推荐字体：Noto Sans SC、Source Han Sans（通过Google Fonts加载）
– **英文文本**：使用小号字体（12-16px）作为点缀，与中文形成比例反差
– 字体选择：Roboto、Inter、SF Pro Display
– 用途：副标题、注释、装饰性文字
– **行高与间距**：
– 标题行高：1.1-1.3
– 正文行高：1.6-1.8
– 段落间距：使用em或rem单位保持比例一致性
### 3. 视觉元素
– **超大视觉元素**：融入超大标题、背景图或装饰元素以突出重点
– 标题字号可达120-200px
– 背景图使用低透明度（10-30%）避免干扰文字
– **对比原则**：超大元素与小型元素形成强烈对比
– **图形风格**：使用简洁的勾线风格图形作为数据可视化或配图元素
– 可使用CSS绘制几何图形（圆、线、矩形）
– SVG图标保持线条简洁（stroke-width: 1.5-2px）
### 4. 色彩与效果
– **基础色板**：
– 背景：`#0a0a0a`、`#1a1a1a`
– 主文字：`#ffffff`、`#f0f0f0`
– 次要文字：`#888888`、`#666666`
– **高亮色方案**（单色透明度渐变）：
– 青色系：`rgba(0, 255, 255, 0.8)` → `rgba(0, 255, 255, 0.1)`
– 洋红系：`rgba(255, 0, 255, 0.8)` → `rgba(255, 0, 255, 0.1)`
– 金色系：`rgba(255, 215, 0, 0.8)` → `rgba(255, 215, 0, 0.1)`
– 绿色系：`rgba(0, 255, 128, 0.8)` → `rgba(0, 255, 128, 0.1)`
– **渐变规则**：每种高亮色独立使用，避免不同高亮色之间的渐变混杂
– **科技感营造**：使用透明度渐变、发光效果（box-shadow）、渐变边框
### 5. 技术要求
– **图标库**：引入Font Awesome或Material Icons（通过CDN加载）
“`html
“`
– **字体库**：引入Google Fonts
“`
html
“`
– **禁止使用emoji**：避免使用emoji作为主要图标，统一使用专业图标库
### 6. 内容要求
– **关键点提炼**：
– 识别核心主题、关键数据、重要结论
– 保留重要细节，不遗漏关键信息
– 合理分组，建立信息层次
– **信息架构**：
– 主标题：最核心的信息
– 副标题：补充说明或引导
– 正文段落：详细阐述
– 数据/列表：结构化展示
## 操作步骤
### 步骤1：文本分析与关键点提炼
– 阅读用户提供的文字内容
– 识别核心主题、关键数据、重要结论
– 提炼3-8个核心关键点
– 确定信息优先级和层次关系
### 步骤2：信息架构设计
– 确定主标题内容（最核心信息）
– 规划副标题和正文段落
– 设计数据展示方式（数字、列表、图表）
– 确定视觉元素布局（标题位置、装饰元素、留白区域）
### 步骤3：HTML代码生成
– 引入必需资源（Font Awesome、Google Fonts）
– 编写HTML结构：
“`html
“`
– 编写CSS样式：
– 基础样式（重置、字体、颜色变量）
– 布局样式（网格系统、容器、间距）
– 组件样式（标题、段落、卡片、图标）
– 效果样式（渐变、阴影、动画）
### 步骤4：输出与交付
– 生成完整的HTML文件（包含内联CSS）
– 确保代码格式规范、注释清晰
– 使用write_file工具保存文件到用户工作目录
## 资源索引
### 设计指南
– 详细设计规范：见 [references/design-guide.md](references/design-guide.md)
– 包含：Magazine Layout风格说明、配色方案、布局模板、最佳实践
### HTML模板
– 基础模板：见 [assets/template.html](assets/template.html)
– 包含：基础结构、资源引入、示例样式、常用组件
## 注意事项
### 设计原则
– **视觉冲击力优先**：通过超大字体、强对比、高亮色营造视觉焦点
– **留白即设计**：充分利用留白创造呼吸感和高级感
– **克制使用色彩**：深色背景+单一高亮色系，避免色彩混乱
– **移动端适配**：使用响应式设计，确保在不同设备上的可读性
### 技术实现
– 所有样式内联在HTML文件中，确保文件可独立运行
– 使用CSS变量管理颜色和间距，便于维护
– 优先使用CSS实现视觉效果，减少对外部图片的依赖
– 确保代码结构清晰、注释充分
### 内容处理
– 不遗漏重要细节，但避免信息过载
– 使用视觉层次引导阅读顺序
– 数据类内容优先使用数字+图标+简短说明的形式
## 使用示例
### 示例1：产品数据展示
**输入**：用户发送某产品年度销售数据文字描述
**处理**：
1. 提炼核心数据：总销量、增长率、市场份额等
2. 设计信息架构：主标题（核心数据）+ 数据卡片
3. 生成HTML：使用超大数字展示、渐变背景、图标装饰
**输出**：完整的HTML信息图文件
### 示例2：知识要点总结
**输入**：用户发送某主题的知识内容或文章
**处理**：
1. 提炼3-5个核心知识点
2. 设计信息架构：主标题 + 要点列表 + 补充说明
3. 生成HTML：使用编号列表、图标标记、卡片布局
**输出**：结构化的HTML信息图
### 示例3：事件时间线
**输入**：用户发送某事件的发展过程描述
**处理**：
1. 提炼关键时间节点和事件
2. 设计信息架构：时间线布局 + 事件卡片
3. 生成HTML：使用垂直/水平时间线、节点标记、渐变效果
**输出**：时间线风格的HTML信息图
全部评论