القائمة
将文档和内容转换为现代化、深色主题的HTML页面，包含渐变效果、卡片布局和流畅动画。适用于：(1) 将文档/文章转换为现代设计的HTML，(2) 创建技术文档页面，(3) 生成演示风格的网页，(4) 提到"现代HTML"、"深色主题HTML"、"技术文档HTML"，或 (5) 想要类似learn-claude-code风格的HTML输出。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | modern-doc-html |
| description | 将文档和内容转换为现代化、深色主题的HTML页面，包含渐变效果、卡片布局和流畅动画。适用于：(1) 将文档/文章转换为现代设计的HTML，(2) 创建技术文档页面，(3) 生成演示风格的网页，(4) 提到"现代HTML"、"深色主题HTML"、"技术文档HTML"，或 (5) 想要类似learn-claude-code风格的HTML输出。 |
将任何文档或内容转换为精美的现代化HTML页面，具有深色主题、渐变效果、卡片布局和流畅动画。
重要提示：对于长文档，必须使用分段写入策略！
当源文档内容较长时（超过3个主要章节），必须采用分段写入方式：
首次写入 - 创建HTML文件骨架
<head>、Hero区、前1-2个章节的内容、Footer、</body></html>后续追加 - 逐步添加剩余章节
分段示例
第一次 Write: <html>...<hero>...章节1...章节2...<footer></body></html>
第二次 Edit: 在footer前插入章节3、章节4
第三次 Edit: 在footer前插入章节5、章节6
为什么要分段写入？
理解内容结构
提取关键信息
选择配色方案并读取模板
重要：主动询问用户选择配色方案！
使用 AskUserQuestion 工具询问用户选择配色方案，提供四个选项：
问题："请选择HTML页面的配色方案"
选项：
1. 经典蓝紫（推荐）- 专业科技感，适合技术文档、产品介绍
2. 赛博朋克 - 霓虹发光效果，适合创意项目、游戏相关
3. 苹果极简 - 纯黑背景+纯白文字，适合高端产品、设计作品
4. 碳薄荷 - 炭黑+发光薄荷绿，适合开发工具、技术平台
四种独立的配色方案模板：
references/template-classic.html - 经典蓝紫（默认推荐）
references/template-cyberpunk.html - 赛博朋克
references/template-apple.html - 苹果极简
references/template-carbon.html - 碳薄荷
自动选择建议（当用户已明确表达偏好时，跳过询问）：
template-classic.htmltemplate-cyberpunk.htmltemplate-apple.htmltemplate-carbon.html使用模板生成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骨架
<head>、Hero区、前2个章节、Footer、</body></html>第二步及后续：使用 Edit 工具追加剩余章节
<!-- Footer --> 或 <footer class="footer"> 标记<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>
注意事项：
模板包含 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传统表情符号图标仍然适用于快速、多彩的图标：
<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 - 偏好减少动画的用户将看到即时过渡而非动画。
<span class="highlight">文本</span><hr class="divider">）.comment、.keyword、.string、.func、.symbollucide.createIcons() 自动初始化 - 无需手动设置用户："将这个markdown文档转换为现代HTML" → 读取文档，提取结构，使用模板生成HTML
用户："为这个API文档创建技术文档页面" → 将API文档结构化为带代码示例的章节，生成HTML
用户："制作一个类似learn-claude-code风格的HTML页面" → 使用模板创建类似的深色主题、现代布局