Menü
[project] 根据文字稿生成 Qoder 品牌风格的 HTML 演示文稿。支持浏览器直接演示（键盘翻页、自动缩放）。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
[project] 生成舰队Collection岛风风格的信息图。当用户需要创建可视化信息图、流程图，或需要以岛风形象进行图表生成时使用此技能。
Kirito 博客写作风格指南，用于指导技术博客文章的撰写。当需要撰写技术博客文章、公众号文章、技术分享内容时使用此 skill。适用场景：(1) 撰写新的技术博客文章 (2) 润色或改写已有文章 (3) 将技术内容转化为 Kirito 风格的博客 (4) 编写技术教程或经验分享
[project] 根据参考文稿批量生成 Notion 风格松弛感手绘信息图组图。当用户需要阅读文档并生成一组社交媒体传播用的信息图时使用此 skill。适用于将文章、笔记转化为视觉化内容系列。
| name | qoder-ppt-v2 |
| description | [project] 根据文字稿生成 Qoder 品牌风格的 HTML 演示文稿。支持浏览器直接演示（键盘翻页、自动缩放）。 |
将文稿转化为 Qoder 品牌风格的 HTML 演示文稿。
模板文件：template.html（同目录下）
.slide.cover {
justify-content: center;
align-items: center;
padding: 60px 120px;
}
.slide { padding: 120px 120px 80px 120px; }
.content-center { flex: 1; }
.content-center > *:not(h2) { margin: auto 0; }
<section class="slide cover active">
<div class="brand"><span class="logo">QODER</span></div>
<div class="content">
<h1><span class="highlight">关键词</span> 主标题</h1>
<p class="subtitle">副标题</p>
</div>
<span class="page-number">01</span>
</section>
<section class="slide {type}">
<div class="brand"><span class="logo">QODER</span></div>
<div class="content-center">
<h2 class="section-title">标题</h2>
<!-- 内容区域 -->
</div>
<span class="page-number">02</span>
</section>
<ul class="point-list">
<li><span class="bullet"></span><span class="text">要点内容</span></li>
</ul>
<div class="card-grid">
<div class="card">
<h3 class="card-title"><span class="highlight">标题</span></h3>
<p class="card-content">内容</p>
</div>
</div>
<div class="compare-grid">
<div class="compare-item">
<h3><span class="highlight">左侧</span>标题</h3>
<ul><li>对比点</li></ul>
</div>
<div class="compare-divider">VS</div>
<div class="compare-item">
<h3><span class="highlight">右侧</span>标题</h3>
<ul><li>对比点</li></ul>
</div>
</div>
<div class="flow-container">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-content">步骤说明</div>
</div>
<div class="flow-arrow">→</div>
<!-- 更多步骤 -->
</div>
<div class="data-grid">
<div class="data-item">
<span class="data-value">99%</span>
<span class="data-label">指标说明</span>
</div>
</div>
<table class="data-table">
<thead><tr><th>维度</th><th>A</th><th>B</th></tr></thead>
<tbody><tr><td>特征</td><td>值A</td><td><span class="highlight">值B</span></td></tr></tbody>
</table>
<div class="summary-content">
<p class="key-point"><span class="highlight">核心要点</span> 补充说明</p>
</div>
| 用途 | 值 |
|---|---|
| 背景 | #000000 |
| 高亮 | #2ADB5C |
| 标题 | #FFFFFF |
| 正文 | #96989A |
| 次级 | #68696B |
| 边框 | #343434 |
| 元素 | 大小 |
|---|---|
| 大标题 h1 | 66px |
| 章节标题 h2 | 36px |
| 卡片标题 h3 | 28-30px |
| 正文 | 24px |
| 操作 | 效果 |
|---|---|
→ / Space | 下一页 |
← / Backspace | 上一页 |
Home / End | 首页/末页 |
| 点击右 2/3 | 下一页 |
| 点击左 1/3 | 上一页 |
active 类slides-container 内content-center 内部.slide.cover<span class="highlight">