现代文档 HTML 生成器
将任何文档或内容转换为精美的现代化HTML页面，具有深色主题、渐变效果、卡片布局和流畅动画。
工作流程
重要提示：对于长文档，必须使用分段写入策略！
分段写入策略
当源文档内容较长时（超过3个主要章节），必须采用分段写入方式：
- 首次写入 - 创建HTML文件骨架
- 使用 Write 工具创建完整的HTML文件 - 包含：<head>、Hero区、前1-2个章节的内容、Footer、</body></html> - 确保HTML结构完整可用
- 后续追加 - 逐步添加剩余章节
- 使用 Edit 工具在 Footer 之前插入新章节 - 每次追加2-3个章节 - 保持HTML结构完整性
- 分段示例
第一次 Write: <html>...<hero>...章节1...章节2...<footer></body></html> 第二次 Edit: 在footer前插入章节3、章节4 第三次 Edit: 在footer前插入章节5、章节6
为什么要分段写入？
- 避免单次写入内容过长导致超时或截断
- 提高生成速度和成功率
- 便于调试和修改
详细步骤
- 理解内容结构
- 阅读源文档/内容 - 识别主要章节和层次结构 - 评估文档长度，决定是否需要分段写入 - 注意任何特殊元素（代码块、列表、表格）
- 提取关键信息
- 标题和副标题 - 徽章文本（可选的分类/标签） - 主要章节及标题 - 内容段落 - 特殊元素（卡片、代码块等） - 规划分段策略：将章节分组（每组2-3个章节）
- 选择配色方案并读取模板 重要：主动询问用户选择配色方案！ 使用 AskUserQuestion 工具询问用户选择配色方案，提供四个选项：
问题："请选择HTML页面的配色方案" 选项： 1. 经典蓝紫（推荐）- 专业科技感，适合技术文档、产品介绍 2. 赛博朋克 - 霓虹发光效果，适合创意项目、游戏相关 3. 苹果极简 - 纯黑背景+纯白文字，适合高端产品、设计作品 4. 碳薄荷 - 炭黑+发光薄荷绿，适合开发工具、技术平台四种独立的配色方案模板： 自动选择建议（当用户已明确表达偏好时，跳过询问）：
- references/template-classic.html - 经典蓝紫（默认推荐） - 专业科技感，蓝色+紫色渐变 - 适合技术文档、产品介绍 - references/template-cyberpunk.html - 赛博朋克 - 霓虹发光效果，电光蓝+赛博粉+黑客绿 - 未来感强烈，适合创意项目、游戏相关 - references/template-apple.html - 苹果极简 - 纯黑背景+纯白文字，极简高端 - 专业优雅，适合高端产品、设计作品 - references/template-carbon.html - 碳薄荷 - 炭黑+发光薄荷绿，硬核科技 - 高性能感，适合开发工具、技术平台 - 如果用户提到"科技感"、"专业"，直接使用 template-classic.html - 如果用户提到"炫酷"、"未来"、"霓虹"，直接使用 template-cyberpunk.html - 如果用户提到"极简"、"高端"、"苹果风格"，直接使用 template-apple.html - 如果用户提到"硬核"、"性能"、"开发者"，直接使用 template-carbon.html - 如果用户未表达任何偏好，则使用 AskUserQuestion 询问
- 使用模板生成HTML
- 从选定的模板文件读取内容 - 替换占位符： - {{TITLE}} - 页面标题 - {{BADGE}} - 英雄区徽章文本 - {{HERO_TITLE}} - 主标题（可包含 <span class="highlight">文本</span> 实现渐变效果） - {{HERO_SUBTITLE}} - 副标题文本 - {{CONTENT}} - 主要内容章节 - {{FOOTER}} - 页脚内容
- 构建内容章节 每个章节遵循此模式：
<section class="section center" id="section-id"> <span class="section-label" style="background: rgba(168,85,247,0.15); color: var(--accent-purple);">标签</span> <h2>章节标题</h2> <p>章节描述...</p> <!-- 内容：卡片、代码块等 --> </section> <hr class="divider">重要： 默认给所有<section>添加center类以确保内容居中：<section class="section center" id="section-id"> - 使用适当的内容组件 带表情符号图标的卡片网格：
<div class="card-grid"> <div class="card"> <div class="card-icon">🎯</div> <h3>卡片标题</h3> <p>卡片描述...</p> </div> </div>带Lucide图标的卡片网格：<div class="card-grid"> <div class="card"> <div class="icon-wrapper circle"> <i data-lucide="rocket" class="icon-lg icon-blue"></i> </div> <h3>卡片标题</h3> <p>卡片描述...</p> </div> </div>带图标的章节标题：<div class="section-header"> <i data-lucide="zap" class="section-icon icon-purple anim-float"></i> <h2>章节标题</h2> </div>图标盒子：<div class="icon-box anim-pulse"> <i data-lucide="check-circle" class="icon-xl icon-green"></i> </div>代码块：<div class="code-block"> <span class="comment"># 注释</span> <span class="keyword">def</span> <span class="func">function</span>(): <span class="keyword">return</span> <span class="string">"value"</span> </div> - 选择章节标签颜色 可用的颜色组合：
- 紫色：background: rgba(168,85,247,0.15); color: var(--accent-purple); - 蓝色：background: rgba(59,130,246,0.15); color: var(--accent-blue); - 绿色：background: rgba(34,197,94,0.15); color: var(--accent-green); - 橙色：background: rgba(249,115,22,0.15); color: var(--accent-orange); - 青色：background: rgba(6,182,212,0.15); color: var(--accent-cyan); - 粉色：background: rgba(236,72,153,0.15); color: #ec4899;
- 编写HTML文件 对于短文档（≤3个章节）： 对于长文档（>3个章节）： 注意事项：
- 使用 Write 工具一次性写入完整HTML - 包含所有内容和完整结构 - 第一步：使用 Write 工具创建HTML骨架 - 包含：完整的 <head>、Hero区、前2个章节、Footer、</body></html> - 确保HTML结构完整可用 - 第二步及后续：使用 Edit 工具追加剩余章节 - 找到 <!-- Footer --> 或 <footer class="footer"> 标记 - 在 Footer 之前插入新的章节内容 - 每次追加2-3个章节 - 保持 <hr class="divider"> 分隔符 - 追加示例： 旧内容：...章节2...</section> <hr class="divider"> <!-- Footer --> <footer>...</footer> 新内容（在Footer前插入）：...章节2...</section> <hr class="divider"> <!-- 新增章节3 --> <section class="section center">...</section> <hr class="divider"> <!-- 新增章节4 --> <section class="section center">...</section> <hr class="divider"> <!-- Footer --> <footer>...</footer> - 保存到用户指定位置或建议文件名 - 确保正确的HTML结构和闭合标签 - 确保所有section都添加了center类以保持居中 - 每次追加后验证HTML结构完整性
设计特性
- 深色主题 配合渐变光效
- 四种独立配色方案模板：
- 经典蓝紫（默认）：专业科技感，蓝色+紫色渐变 - 赛博朋克：霓虹发光效果，电光蓝+赛博粉+黑客绿，未来感强烈 - 苹果极简：纯黑背景+纯白文字，极简高端，专业优雅 - 碳薄荷：炭黑+发光薄荷绿，硬核科技，高性能感
- 多彩强调色系统（蓝、紫、绿、橙、青、粉）
- 基于卡片的布局 带悬停动画
- 滚动时平滑淡入动画
- 代码块语法高亮
- 响应式设计 适配移动端和桌面端
- 英雄区 带动画徽章和箭头
- Lucide图标 - 通过CDN提供1000+现代SVG图标
- 丰富的动画库 - 入场、连续和悬停动画
- 图标支持 - 支持表情符号和SVG图标，带样式选项
- 内容自动居中 - 所有章节内容默认居中显示
- 主题记忆功能 - 用户选择的配色会自动保存
图标使用指南
Lucide 图标
模板包含 Lucide Icons (https://lucide.dev) - 一个现代、轻量级的图标库，拥有1000+图标。
图标尺寸：
icon-sm- 1rem (16px)icon-md- 1.5rem (24px)icon-lg- 2rem (32px)icon-xl- 3rem (48px)
图标颜色：
icon-blue- 蓝色强调icon-purple- 紫色强调icon-green- 绿色强调icon-orange- 橙色强调icon-cyan- 青色强调icon-pink- 粉色强调
图标包装器：
icon-wrapper circle- 圆形背景icon-wrapper square- 圆角方形背景
常用图标名称：
rocket,zap,star,heart,check-circle,alert-circlecode,terminal,cpu,database,server,clouduser,users,mail,phone,calendar,clockarrow-right,chevron-down,menu,x,search,settings- 浏览所有图标请访问 https://lucide.dev/icons
表情符号图标
传统表情符号图标仍然适用于快速、多彩的图标：
<div class="card-icon">🎯</div>动画指南
入场动画
应用于首次出现时需要动画的元素：
anim-slideInLeft- 从左侧滑入anim-slideInRight- 从右侧滑入anim-scaleIn- 从小放大anim-rotateIn- 旋转淡入
示例：
<div class="card anim-slideInLeft">...</div>连续动画
应用于需要持续动画的元素：
anim-float- 轻柔的上下浮动（3秒循环）anim-pulse- 缩放脉冲效果（2秒循环）anim-glow- 发光边框效果（2秒循环）anim-spin- 持续旋转（2秒循环）anim-shake- 轻微抖动效果（0.5秒一次）
示例：
<i data-lucide="zap" class="icon-lg icon-purple anim-float"></i>交错延迟
添加顺序延迟以创建交错动画：
stagger-1- 0.1秒延迟stagger-2- 0.2秒延迟stagger-3- 0.3秒延迟stagger-4- 0.4秒延迟stagger-5- 0.5秒延迟stagger-6- 0.6秒延迟
示例：
<div class="card anim-scaleIn stagger-1">卡片 1</div>
<div class="card anim-scaleIn stagger-2">卡片 2</div>
<div class="card anim-scaleIn stagger-3">卡片 3</div>无障碍支持
所有动画都遵循 prefers-reduced-motion - 偏好减少动画的用户将看到即时过渡而非动画。
使用技巧
- 使用表情符号作为卡片图标增加视觉趣味，或使用Lucide图标获得更现代的外观
- 在英雄标题的关键短语上应用渐变高亮：
<span class="highlight">文本</span> - 交替使用章节标签颜色以增加视觉多样性
- 保持段落简洁易读
- 在主要章节之间使用分隔线（
<hr class="divider">） - 对于中文内容，字体栈已包含 'Noto Sans SC'
- 代码块支持语法高亮，使用类：
.comment、.keyword、.string、.func、.symbol - 结合动画和交错延迟实现顺序显示效果
- 谨慎使用连续动画（float、pulse）以避免页面过于繁杂
- 图标通过
lucide.createIcons()自动初始化 - 无需手动设置 - 浏览所有可用的Lucide图标请访问 https://lucide.dev/icons
- 重要：始终给section添加center类以确保内容居中显示
示例用法
用户："将这个markdown文档转换为现代HTML" → 读取文档，提取结构，使用模板生成HTML
用户："为这个API文档创建技术文档页面" → 将API文档结构化为带代码示例的章节，生成HTML
用户："制作一个类似learn-claude-code风格的HTML页面" → 使用模板创建类似的深色主题、现代布局