Menu
[project] 根据文字稿生成 Qoder 品牌风格的 HTML 演示文稿。支持浏览器直接演示（键盘翻页、自动缩放）。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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">[project] 生成舰队Collection岛风风格的信息图。当用户需要创建可视化信息图、流程图，或需要以岛风形象进行图表生成时使用此技能。
Kirito 博客写作风格指南，用于指导技术博客文章的撰写。当需要撰写技术博客文章、公众号文章、技术分享内容时使用此 skill。适用场景：(1) 撰写新的技术博客文章 (2) 润色或改写已有文章 (3) 将技术内容转化为 Kirito 风格的博客 (4) 编写技术教程或经验分享
[project] 根据参考文稿批量生成 Notion 风格松弛感手绘信息图组图。当用户需要阅读文档并生成一组社交媒体传播用的信息图时使用此 skill。适用于将文章、笔记转化为视觉化内容系列。