advanced-html-generator

name	advanced-html-generator
description	生成真正功能强大、专业级、代码量 3000+ 行的现代 HTML 网页。当用户说"帮我写一个HTML页面"并描述具体功能需求时，必须使用本 skill。 英文触发词同样适用：create HTML page, generate web page, build HTML with animations, responsive HTML, modern HTML page. 不要用于：简单的静态 HTML 教学示例、纯文本展示页面、不需要高级功能的简单页面。
compatibility	Requires modern browser (Chrome 90+, Firefox 88+, Safari 14+)
allowed-tools	Read, Write, exec
metadata	{"author":"User","version":"3.0.0","last-updated":"2026-06-23","category":"Web Development","tags":"HTML, CSS, JavaScript, responsive, animation, modern-web, ultra-features, 3000-lines, 100plus-effects"}

Advanced HTML Generator v3.0.0 - 终极版

生成专业级、功能超级强大、代码量 3000+ 行、特效总数 100+ 种的现代 HTML 网页，包含极致的高级功能和细腻动画效果。

🎯 核心要求（必须遵守）

1. 代码量必须 ≥ 3000 行 - 这是硬性指标！（HTML 500+ / CSS 1000+ / JS 1500+）
2. 真实功能 > 视觉长度 - 代码要真正强大，功能要实用
3. 现代标准 - 使用 HTML5、CSS3、ES6+ 最新特性
4. 即开即用 - 生成的页面可直接在浏览器打开运行
5. 专业规范 - 代码结构清晰、注释完整、命名规范
6. 动画超细腻 - 每个动画都要流畅、细腻、有层次感
7. 特效出乎意料 - 加入让人眼前一亮的特殊效果
8. 性能优化 - 使用 requestAnimationFrame、防抖节流、虚拟滚动等
9. 所有按钮必须可点击 - 每个按钮都要有实际功能，不能是 disabled 或装饰
10. 特效总数 ≥ 100 种 - 视觉效果 + 动画效果 + 交互功能 + 数据可视化 ≥ 100

🚀 必选超级功能清单（v3.0.0 终极版）

视觉效果（必须包含 20+ 种）

• ✅ 粒子背景动画 - 鼠标移动时粒子跟随、连线、排斥效果
• ✅ 3D 卡片翻转/倾斜效果 - 鼠标悬停时 3D 变换、透视效果
• ✅ 渐变边框/流光溢彩动画 - 边框彩色流动、霓虹灯效果
• ✅ 霓虹灯/发光文字效果 - 文字发光、闪烁、彩虹渐变
• ✅ 星空/闪烁背景 - 动态星空或光点、流星效果
• ✅ 视差滚动效果 - 多层背景不同速度滚动、鼠标视差
• ✅ 毛玻璃/模糊效果 - backdrop-filter 应用、玻璃态设计
• ✅ 波纹/水波纹效果 - 点击时波纹扩散、涟漪效果
• ✅ 加载进度条/骨架屏 - 页面加载动画、进度指示
• ✅ 打字机/逐字显示效果 - 文字逐个显示、光标闪烁
• ✅ 矩阵雨效果 - 黑客帝国风格的文字雨
• ✅ 赛博朋克风格 - 霓虹色彩、网格线、扫描线
• ✅ 全息投影效果 - 3D 投影、光线折射
• ✅ 火焰/粒子爆炸效果 - Canvas 粒子系统
• ✅ 音频可视化 - Web Audio API 音频波形显示
• ✅ 烟雾/云朵效果 - Canvas 烟雾粒子
• ✅ 水波/液体效果 - 鼠标点击产生水波
• ✅ 闪电/电弧效果 - 随机闪电效果
• ✅ 彩虹渐变背景 - 动态彩虹渐变
• ✅ 像素化效果 - 像素风格滤镜

动画效果（必须包含 35+ 种）

• ✅ 滚动触发动画 - Intersection Observer 实现、多重触发
• ✅ 元素依次进场 - 每个元素不同方向飞入（15+ 方向）
• ✅ 数字滚动计数 - 统计数字从 0 滚动到目标、缓动函数
• ✅ 悬停微动画 - 按钮、卡片悬停时的细腻反馈
• ✅ 页面过渡动画 - 页面切换时的过渡效果
• ✅ 鼠标跟随效果 - 元素跟随鼠标移动、磁吸效果
• ✅ 弹性/回弹动画 - 使用 cubic-bezier 弹性曲线
• ✅ 旋转/缩放组合动画 - transform 多重变换
• ✅ 颜色渐变动画 - 背景色、文字色渐变过渡
• ✅ 路径动画 - 元素沿路径移动、贝塞尔曲线
• ✅ 抖动/摇摆动画 - 错误提示、警告效果
• ✅ 心跳动画 - 脉冲效果、呼吸灯
• ✅ 翻转卡片动画 - 3D 翻转动画
• ✅ 折叠/展开动画 - 手风琴效果
• ✅ 进度条动画 - 圆形/线性进度条
• ✅ 文字烟雾效果 - 文字消散、聚集
• ✅ 图片滤镜动画 - 黑白、复古、鲜艳等滤镜切换
• ✅ 阴影动画 - 动态阴影、光晕效果
• ✅ 边框绘制动画 - 边框从无到有绘制
• ✅ 背景网格动画 - 网格线移动、消失
• ✅ 波浪动画 - 波浪形运动
• ✅ 螺旋动画 - 螺旋形进入/退出
• ✅ 爆炸动画 - 元素爆炸分散
• ✅ 融化动画 - 元素融化效果
• ✅ 粒子聚集动画 - 粒子聚集成形
• ✅ 星系旋转动画 - 行星绕轨道旋转
• ✅ 磁铁吸引动画 - 元素被吸引效果
• ✅ 果冻/弹性动画 - 果冻般的弹性
• ✅ 纸张翻转动画 - 翻书效果
• ✅ 窗帘开启动画 - 窗帘拉开效果
• ✅ 放大镜动画 - 鼠标悬停放大
• ✅ 万花筒动画 - 对称旋转效果
• ✅ 分形动画 - 分形图案生成

交互功能（必须包含 20+ 种）

• ✅ 暗黑模式切换 - 完整的主题切换系统、跟随系统
• ✅ 拖拽排序 - 卡片可拖拽重新排列、本地存储
• ✅ 手势操作 - 移动端滑动、捏合、长按等
• ✅ 右键菜单 - 自定义上下文菜单、多级菜单
• ✅ 键盘快捷键 - 键盘操作支持、组合键
• ✅ 复制到剪贴板 - 一键复制功能、复制成功提示
• ✅ 模态框/弹窗系统 - 多种弹窗样式、动画
• ✅ 表单验证+动画 - 实时验证+错误提示动画
• ✅ 搜索+筛选+排序 - 完整的数据操作
• ✅ 本地存储 - LocalStorage 数据持久化
• ✅ 无限滚动 - 滚动加载更多
• ✅ 虚拟滚动 - 大数据列表优化
• ✅ 实时搜索 - 防抖搜索、高亮显示
• ✅ 拖放上传 - 文件拖放上传、进度显示
• ✅ 全屏模式 - 全屏切换、退出提示
• ✅ 打印功能 - 页面打印、打印预览
• ✅ 分享功能 - 社交分享、复制链接
• ✅ 语音朗读 - TTS 语音合成
• ✅ 截图功能 - Canvas 截图、下载
• ✅ 导出功能 - 导出 PDF/图片/JSON

数据可视化（必须包含 10+ 种）

• ✅ Canvas 绘制图表 - 饼图、柱状图、折线图、雷达图
• ✅ 进度环/圆形进度条 - CSS 或 Canvas 实现
• ✅ 标签云/词云 - 动态标签展示、点击交互
• ✅ 时间轴 - 历史事件时间轴、可折叠
• ✅ 关系图/网络图 - 节点连接图、力导向图
• ✅ 热力图 - 数据热力分布
• ✅ 实时数据更新 - WebSocket 或轮询
• ✅ 3D 图表 - WebGL 3D 可视化
• ✅ 地图可视化 - 地图标记、路径规划
• ✅ 树状图/思维导图 - 节点树展示
• ✅ 桑基图 - 流量分布图
• ✅ 漏斗图 - 转化率可视化
• ✅ 仪表盘 - 速度表、温度计

响应式设计（必须完美适配）

• ✅ 移动优先 - Mobile First 策略
• ✅ 媒体查询 - 至少 5 个断点（480px/768px/1024px/1200px/1400px）
• ✅ 弹性布局 - Flexbox + Grid 组合
• ✅ 汉堡菜单 - 移动端导航菜单、手势滑动
• ✅ 触摸优化 - 触摸事件处理、防误触
• ✅ 横屏适配 - 横屏模式优化
• ✅ 安全区域适配 - iPhone X+ 刘海屏适配
• ✅ 字体响应式 - clamp() 函数响应式字体

性能优化（必须实现）

• ✅ 防抖与节流 - 滚动、输入等事件优化
• ✅ 图片懒加载 - Intersection Observer 实现
• ✅ 虚拟滚动 - 大数据列表优化
• ✅ Web Worker - 复杂计算放到后台
• ✅ requestAnimationFrame - 动画性能优化
• ✅ CSS 动画优先 - transform、opacity 避免重排
• ✅ 代码分割 - 按功能模块化
• ✅ Tree Shaking - 只引入使用的代码

📏 代码量达标策略（v3.0.0）

HTML 部分（目标 500+ 行）

• 语义化标签完整
• 结构清晰、嵌套合理
• 注释分区明确（25+ 分区）
• 数据属性丰富（data-*）
• ARIA 无障碍属性完整
• SEO meta 标签完整
• Open Graph 社交分享标签
• 结构化数据（JSON-LD）

CSS 部分（目标 1000+ 行）

• 至少 100 个选择器
• 35+ 个动画定义（@keyframes）
• 完整的响应式媒体查询（5+ 断点）
• 详细的注释说明（每 10 行一个注释）
• CSS 变量系统（:root 定义 60+ 变量）
• 工具类（utility classes）80+
• 打印样式（@media print）
• 暗黑模式完整适配
• 动画性能优化注释

JavaScript 部分（目标 1500+ 行）

• 至少 30 个功能函数
• 完整的事件监听系统（20+ 事件）
• 数据处理逻辑（增删改查）
• Canvas 绘图代码（5+ 个画布）
• Web Audio API 代码
• 详细的注释（每行关键代码都有注释）
• JSDoc 注释（每个函数）
• 错误处理（try-catch）
• 性能监控代码

🎨 代码生成规范（v3.0.0 终极版）

注释要求（必须超详细）

/* ==========================================
   区域说明：导航栏样式
   作者：AI Generator v3.0.0
   日期：2026-06-23
   功能：固定顶部、透明背景、滚动变色、毛玻璃效果
   兼容性：Chrome 90+, Firefox 88+, Safari 14+
   性能：使用 transform 优化动画性能
   TODO：添加多语言支持
   ========================================== */

/**
 * 函数名称：initParticleSystem
 * 功能：初始化粒子背景系统
 * 参数：无
 * 返回：无
 * 作者：AI Generator v3.0.0
 * 日期：2026-06-23
 * 版本：v3.0.0
 * 依赖：无
 * 兼容性：现代浏览器
 * 性能：使用 requestAnimationFrame 优化
 * 示例：
 *   initParticleSystem();
 * 注意：会创建全屏 Canvas 元素
 */

代码格式要求

• 缩进：2 空格（统一）
• 引号：单引号（JS）、双引号（HTML 属性）
• 分号：必须（每行结尾）
• 空格：运算符两侧、逗号后必须有空格
• 空行：逻辑块之间必须有空行

命名规范

• CSS 类名：kebab-case（如：skill-card）
• JS 变量：camelCase（如：skillList）
• JS 常量：UPPER_SNAKE_CASE（如：MAX_COUNT）
• 函数名：动词开头（如：initTheme、loadData）
• 自定义属性：data-kebab-case（如：data-skill-id）

🔥 工作流程（v3.0.0 终极版）

Step 1：解析用户需求（两句话）

第一句话 - 页面内容：

• 用户想要什么类型的页面？
• 页面主要展示什么内容？

第二句话 - 高级功能：

• 需要什么交互效果？
• 需要什么高级特性？
• 目标用户和设备？

Step 2：功能规划（终极版）

必选功能清单（根据需求从上面选择，但必须 ≥ 3000 行，特效 ≥ 100 种）：

1. 选择 20+ 种视觉效果
2. 选择 35+ 种动画效果
3. 选择 20+ 种交互功能
4. 选择 10+ 种数据可视化
5. 完整的响应式设计（5+ 断点）
6. 性能优化（8+ 项）
7. 所有按钮必须可点击（每个按钮都有真实功能）
8. 特效总数 ≥ 100 种

额外加分项（可选）：

• 加入音效（Web Audio API）
• 加入震动反馈（Vibration API）
• 加入语音识别（Speech API）
• 加入摄像头/麦克风（getUserMedia）
• 加入 WebGL 3D 效果
• 加入 WebSocket 实时通信
• 加入 Service Worker 离线支持
• 加入 WebRTC 视频通话
• 加入 Geolocation 地理位置
• 加入 Canvas 游戏

Step 3：代码生成（重点中的重点！）

生成策略：

1. 先写详细注释框架 - 规划好每个部分要写什么（150+ 行注释）
2. HTML 结构 - 完整、语义化、有层次（500+ 行）
3. CSS 样式 - 变量系统、动画定义、响应式（1000+ 行）
4. JavaScript 功能 - 模块化、函数化、详细注释（1500+ 行）
5. 检查代码行数 - 如果不够 3000 行，继续添加：
   • 更多动画变体（15+ 新增）
   • 更多交互细节（拖拽、手势等）
   • 更多注释说明（每个函数都加 JSDoc）
   • 更多功能函数（工具函数、数据处理）
   • 更多 Canvas 效果（粒子、图表等）
   • 更多响应式细节（5+ 断点完整适配）
6. 检查特效数量 - 如果不够 100 种，继续添加：
   • 更多视觉效果（5+ 新增）
   • 更多动画效果（10+ 新增）
   • 更多交互功能（5+ 新增）
7. 检查按钮可点击性 - 每个按钮都要有实际功能，不能是 disabled 或装饰

代码行数检查清单：

• HTML ≥ 500 行
• CSS ≥ 1000 行
• JavaScript ≥ 1500 行
• 总计 ≥ 3000 行

特效数量检查清单：

• 视觉效果 ≥ 20 种
• 动画效果 ≥ 35 种
• 交互功能 ≥ 20 种
• 数据可视化 ≥ 10 种
• 总计 ≥ 100 种

按钮可点击检查清单：

• 每个按钮都有 onclick 或其他事件监听
• 没有 disabled 按钮（除非是临时状态）
• 没有空函数或 alert('演示') 之类的假功能
• 每个按钮都有实际、有用的功能

Step 4：质量检查（必须全部通过）

功能检查：

• 所有动画流畅运行（60fps）
• 所有交互功能正常
• 所有按钮都可点击且有实际功能
• 响应式完美适配（5+ 断点）
• 暗黑模式切换正常
• 无 JavaScript 错误（控制台）
• 无障碍访问支持（ARIA）
• SEO 优化（meta 标签）

代码检查：

• 代码行数 ≥ 3000 行（必须！）
• 特效总数 ≥ 100 种（必须！）
• 注释覆盖率 ≥ 40%
• 无冗余代码
• 缩进统一
• 命名规范
• JSDoc 注释完整

性能检查：

• Lighthouse 性能评分 ≥ 90
• 首屏加载时间 < 2s
• 动画使用 transform/opacity
• 图片懒加载实现
• 防抖节流实现

兼容性检查：

• Chrome 90+ 正常
• Firefox 88+ 正常
• Safari 14+ 正常
• 移动端浏览器正常
• 平板设备正常

Step 5：输出格式

输出内容：

1. 功能清单 - 列出实现的所有功能（带 emoji、分类、计数）
2. 代码统计 - HTML/CSS/JS 行数统计、注释覆盖率
3. 特效统计 - 视觉效果/动画效果/交互功能/数据可视化 数量
4. 性能报告 - 优化项、兼容性
5. 完整代码 - 单个 HTML 文件（包含内联 CSS 和 JS）
6. 使用说明 - 如何运行、修改、扩展
7. 兼容性说明 - 支持的浏览器版本
8. 扩展建议 - 可以继续添加的功能

代码展示格式：

<!-- 
  代码统计：
  - HTML: X 行
  - CSS: X 行
  - JavaScript: X 行
  - 总计: X 行
  - 注释覆盖率: X%
  
  特效统计：
  - 视觉效果: X 种
  - 动画效果: X 种
  - 交互功能: X 种
  - 数据可视化: X 种
  - 总计: X 种
-->
<!DOCTYPE html>
...

📦 示例代码结构（简化版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- meta 标签（25+ 行） -->
    <!-- CSS 样式（1000+ 行） -->
</head>
<body>
    <!-- 粒子画布 -->
    <canvas id="particleCanvas"></canvas>
    
    <!-- 星空背景 -->
    <div class="stars"></div>
    
    <!-- 矩阵雨 -->
    <canvas id="matrixCanvas"></canvas>
    
    <!-- 页面内容（500+ 行 HTML） -->
    <!-- 至少 50+ 个可点击的按钮 -->
    
    <!-- JavaScript（1500+ 行） -->
    <script>
        /**
         * ==========================================
         * 主初始化函数
         * ==========================================
         */
        function init() {
            // 初始化所有系统
            initParticleSystem();      // 120+ 行
            initMatrixRain();          // 100+ 行
            initStarBackground();      // 60+ 行
            initThemeSystem();         // 150+ 行
            initSearchAndFilter();     // 180+ 行
            initDragAndDrop();         // 120+ 行
            initGestureControl();      // 100+ 行
            initKeyboardShortcuts();   // 80+ 行
            initCharts();              // 250+ 行
            initAnimations();          // 200+ 行
            initPerformanceMonitor();   // 60+ 行
            initAllButtons();          // 300+ 行 - 初始化所有按钮功能
            // ... 更多初始化
        }
        
        // 30+ 个功能模块，每个 50-300 行
        // 详细注释，JSDoc 格式
        // 错误处理，性能优化
        // 每个按钮都有实际功能
    </script>
</body>
</html>

⚠️ Gotchas（注意事项）

1. 代码行数优先 - 如果功能实现后代码不够 3000 行，必须添加更多细节
2. 特效数量优先 - 如果特效不够 100 种，必须添加更多效果
3. 按钮可点击优先 - 每个按钮必须有实际功能，不能只是装饰
4. 避免过度复杂 - 功能要实用，不要为了凑数写无意义代码
5. 浏览器兼容 - 使用现代特性时，要考虑降级方案
6. 性能优先 - 动画使用 transform 和 opacity，避免触发重排
7. 可访问性 - 添加 alt 属性、aria 标签、键盘导航支持
8. 注释详细 - 每行关键代码都要有注释说明
9. 测试完整 - 生成后必须测试所有功能是否正常
10. SEO 优化 - meta 标签、结构化数据完整
11. 安全考虑 - XSS 防护、CSP 策略（可选）
12. 渐进增强 - 基础功能先实现，再添加高级特性

✅ 质量检查清单（最终版 v3.0.0）

生成代码前，确认：

• 代码总行数 ≥ 3000 行（必须！）
• 特效总数量 ≥ 100 种（必须！）
• 所有按钮都可点击且有实际功能（必须！）
• HTML 行数 ≥ 500 行
• CSS 行数 ≥ 1000 行
• JavaScript 行数 ≥ 1500 行
• 包含 DOCTYPE 声明
• 设置 viewport meta tag
• 使用语义化 HTML 标签
• CSS 包含响应式设计（5+ 断点）
• JavaScript 无语法错误
• 所有功能可正常运行
• 代码有适当注释（覆盖率 ≥ 40%）
• 颜色对比度符合 WCAG 标准
• 在移动设备上可正常显示
• 动画流畅（60fps）
• 控制台无错误
• Lighthouse 性能 ≥ 90
• 无障碍访问支持
• SEO 优化完整
• 35+ 种动画效果
• 20+ 种视觉效果
• 20+ 种交互功能
• 10+ 种数据可视化
• 性能优化实现

📊 版本历史

• v3.0.0 (2026-06-23) - 终极版：代码量 ≥ 3000 行，特效 ≥ 100 种，所有按钮可点击
• v2.5.0 (2026-06-23) - 超级至尊版：代码量 ≥ 3000 行，功能极致丰富
• v2.0.0 (2026-06-23) - 超级豪华版：代码量 ≥ 1000 行，功能超级丰富
• v1.0.0 (2026-06-23) - 初始版本：基础高级功能

---

遵循此 skill 生成的 HTML 页面将具备终极、专业级、代码量 3000+、特效 100+ 的质量，可直接用于生产环境或作为学习参考。

记住：代码量 3000+ 行、特效 100+ 种、所有按钮可点击是硬性要求！ 🚀🔥