القائمة
Compose high-quality Slidev slides from outline and style plan. Use after outline is approved to write the final slides markdown.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ppt-slide-composer |
| description | Compose high-quality Slidev slides from outline and style plan. Use after outline is approved to write the final slides markdown. |
After outline (outline.json) and style plan (style-plan.md) are ready. This skill produces the final slides-<topic>.md.
outline.json -- approved structural outlinestyle-plan.md -- selected archetype, tokens, layout strategy.agents/skills/slidev/SKILL.md -- Slidev syntax and overflow rulesdesign-system/page-templates/*.md -- visual design language examplesdesign-system/styles/ -- CSS classes and animation presetsdesign-system/reference-style.md -- visual benchmark这是一种灵活的网格系统，其布局应由内容本身的需求驱动，而非僵硬的模板。通过组合不同尺寸的卡片，创造出动态且视觉有趣的布局。
每一页内容型幻灯片都要同时控制两个风险：溢出和空泛。不要为了避免溢出而把所有页面都做得很稀疏。生成时必须读取大纲中的 density、page_type、content_budget，据此判断该页应该承载多少信息。
| 密度 | 画布使用目标 | 最低内容量 | 常见布局 |
|---|---|---|---|
light | 35-55%，刻意聚焦 | 1 个强主张 + 英雄视觉/引用/CTA | cover、section、quote、end、hero metric |
standard | 60-80%，信息均衡 | 3 个有效信息块，或 1 个视觉 + 2 个支撑块 | two-cols、hero-top、3-4 cards |
dense | 75-90%，丰富但可读 | 4 个以上信息块，或数据/代码/图表 + 明确解读 | mixed-grid、L-shape、dashboard、annotated architecture |
普通内容页禁止出现“意外稀疏”。如果页面只有标题加一句短句、一个孤立小卡片，或 1-2 条 bullet 且没有强视觉支撑，就属于信息不足。
当页面显得空泛时，先增强内容，再考虑新增页面：
“单一视觉重心”用于避免两个重元素互相争夺注意力，不等于禁止上下文信息。只要各元素都在尺寸预算内，允许以下组合：
只有在分组、缩写、Bento 布局、maxHeight 或 zoom: 0.8 之后仍超过密度预算时，才拆分页面。
Always use CSS variable names from design-system/styles/global-tokens.css, NEVER hardcode color hex values in slides. The design system automatically adapts to dark and light mode.
var(--ppt-primary) not #2DD4BFvar(--ppt-text) not #FFFFFFvar(--ppt-surface) not rgba(255,255,255,0.04)var(--ppt-border) not rgba(255,255,255,0.08)The ONLY exception: style attributes in the page-template examples may show hex values for illustration. When composing real slides, always replace with var(--ppt-xxx).
Mermaid diagrams are the #1 source of overflow issues. Follow these strictly:
Always set explicit scale:
{scale: 0.45} to {scale: 0.6}{scale: 0.3} to {scale: 0.4}Keep node text short: max 8 Chinese characters / 15 English characters per node. Use abbreviations.
Dedicated slide for complex diagrams: if >8 nodes, the Mermaid MUST be the only content on that slide.
Height containment: when Mermaid shares a slide with other content, wrap it:
<div style="max-height:250px;overflow:hidden">
```mermaid {scale: 0.4}
graph TD
A --> B --> C
Forbidden combo: never place Mermaid + code block + bullet list on the same slide.
Prefer simpler diagram types: graph TD > flowchart for simple flows; avoid classDiagram unless truly needed.
design-system/styles/ 中的全局样式。density、page_type、content_budget；选择既满足最低内容量又不溢出的布局。
c. 参考最接近的 page-template 作为设计语言基线。
d. 使用 Slidev markdown 编写页面，并应用设计系统 CSS class。
e. 应用合适的动画（见下方动画策略）。
f. 添加演讲者备注（HTML 注释）。Per page type:
Global constraints:
当 outline 标注页面为高密度时：
maxHeight: '300px'、减少可见行数，或在代码本身是叙事重点时拆页object-fit: cover for background images<!-- alt: description of image -->.diagram-container class for consistent sizingtext-sm or text-xs class.ppt-table class for consistent stylingEach slide has exactly ONE visual heavyweight:
禁止组合两个重元素（例如大型代码块 + 大型图示）。轻量元素（短文本、不超过 4 条的 bullet、小图标、迷你 KPI、1-2 个注释卡）应该作为重元素的上下文补充，避免页面显得空。
Headmatter (first slide's frontmatter) MUST include:
css:
- design-system/styles/global-tokens.css
- design-system/styles/page-classes.css
- design-system/styles/animation-presets.css
Color rules:
#4DA3FF), Tailwind color classes (text-blue-500, bg-green-100)var(--ppt-primary), var(--ppt-surface), var(--ppt-text-secondary))Typography rules:
.ppt-h1, .ppt-h2, .ppt-body, .ppt-captionfont-size: var(--ppt-text-h1)Choose the right animation mechanism for each content type:
| Content Type | Mechanism | When to Use |
|---|---|---|
| Sequential list | v-clicks | List has > 3 items and order matters |
| Code evolution | magic-move | Showing code transformation (max 3 steps) |
| Key emphasis | v-mark | Highlighting a specific word/phrase during talk |
| Element entrance | v-motion | Hero element on focal slide (sparingly) |
| Content toggle | v-switch | Before/after comparison on same slide |
| Simple reveal | v-click | Any block needing click-to-show (max 2 per page) |
Only use colors that match token accent palette:
v-mark.underline.orange (maps to --ppt-accent-warm)v-mark.circle.green (maps to --ppt-success)v-mark.highlight.red (maps to --ppt-danger)Do NOT use arbitrary colors like v-mark.underline.pink.
Every slide MUST have presenter notes in HTML comments:
<!--
Speaker notes for this slide.
[click] First reveal point discussion.
[click] Second reveal point discussion.
Evidence: F3, F7 (from research-report.md)
-->
[click] markers must match the number of v-click/v-clicks on the pageVisual style decision-making for PPT based on research and audience context. Use after research phase to select archetype, tokens, and layout strategy.
Top-tier PPT structure architect using Pyramid Principle. Use after research and style decision to generate a logically rigorous outline.
Compose high-quality Slidev slides from outline and style plan. Use after outline is approved to write the final slides markdown.
Review a generated Slidev deck for visual, structural, and interaction issues. Use when user triggers /ppt-review or when completing the ppt-creator pipeline.
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
Top-tier PPT structure architect using Pyramid Principle. Use after research and style decision to generate a logically rigorous outline.