메뉴
生成真正功能强大、专业级、代码量 3000+ 行的现代 HTML 网页。当用户说"帮我写一个HTML页面"并描述具体功能需求时，必须使用本 skill。 英文触发词同样适用：create HTML page, generate web page, build HTML with animations, responsive HTML, modern HTML page. 不要用于：简单的静态 HTML 教学示例、纯文本展示页面、不需要高级功能的简单页面。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Learns how the user writes from their own sent messages and docs, and builds a voice profile so future drafts sound like them instead of generic AI. The profile is saved as the my-writing-style skill. Use when the user asks to set up, learn, or capture their writing voice, or complains that drafts sound generic or unlike them and no my-writing-style profile exists. Only for drafting text the user will send as themselves, not for Claude's own replies.
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', '.dotx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx or .dotx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx or .potx filename, regardless of what they plan to do with the content afterward. If a .pptx or .potx file needs to be opened, created, or touched, use this skill.
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
Use this skill when replying with a generated or edited image — when a post asks to create, generate, edit, modify, restyle, combine, or stitch images, or whenever attaching a generated or edited image would strengthen the reply.
统一处理网页应用的生成、编辑，以及围绕已生成产物的问答。既负责把自然语言需求端到端转成可运行、可预览、可交付的网页应用产物，也负责在用户追问产物时基于真实产物作答。当用户要生成网站、H5、网页应用、管理后台、数据看板时使用。当用户要编辑已有网页应用、做功能新增、页面调整或 Bug 修复时使用。当用户提供 PRD、文档、截图或素材包并要求产出可预览网页应用时使用。当用户针对已生成的网页应用，要求总结或解读网页内容、查看或分析源码、解释或排查运行报错、查询访问量/用户量/数据报表/发布状态等运营信息时同样使用。
| 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"} |
生成专业级、功能超级强大、代码量 3000+ 行、特效总数 100+ 种的现代 HTML 网页，包含极致的高级功能和细腻动画效果。
/* ==========================================
区域说明：导航栏样式
作者：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 元素
*/
第一句话 - 页面内容：
第二句话 - 高级功能：
必选功能清单（根据需求从上面选择，但必须 ≥ 3000 行，特效 ≥ 100 种）：
额外加分项（可选）：
生成策略：
代码行数检查清单：
特效数量检查清单：
按钮可点击检查清单：
功能检查：
代码检查：
性能检查：
兼容性检查：
输出内容：
代码展示格式：
<!--
代码统计：
- 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>
生成代码前，确认：
遵循此 skill 生成的 HTML 页面将具备终极、专业级、代码量 3000+、特效 100+ 的质量，可直接用于生产环境或作为学习参考。
记住：代码量 3000+ 行、特效 100+ 种、所有按钮可点击是硬性要求！ 🚀🔥