mcpField
M
marp-slides

marp-slides

github.com/mathews-tom文档处理33784 次安装4 天前更新
代码仓库

关于 marp-slides

这是用于制作 MARP 幻灯片的技能，面向希望用 Markdown 编写并导出 PDF、PPTX 或 HTML 的用户。它提供从需求确认、按需加载参考资料到检查和导出的流程，并支持 CSS 主题。

主要功能

  1. 01以单个 Markdown 文件编写幻灯片
  2. 02导出为 PDF、PPTX 或 HTML
  3. 03通过 CSS 设置主题
  4. 04按需加载指令、主题和组件参考
  5. 05提供幻灯片结构与导出检查清单

适用场景

  1. 01将 Markdown 文档制作成演示文稿
  2. 02生成可提交到 Git 的幻灯片源文件
  3. 03为幻灯片应用自定义 CSS 主题
  4. 04从同一份内容导出 PDF 或 PPTX

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mathews-tom/armory --skill marp-slides

安装后在 Claude Code 中输入/marp-slides确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

CHANGELOG.md
evals/
cases.yaml
references/
COMPONENTS.md
DIRECTIVES.md
EXPORT.md
THEMES.md
references/examples/
dashboard.md
editorial.md
technical.md

详细介绍

MARP 幻灯片技能

使用 MARP 生态系统（Marpit + Marp Core + marp-cli）以纯 Markdown 编写幻灯片，并导出为 PDF、PowerPoint 或自包含 HTML。幻灯片组是单个 .md 文件，便于使用 git 管理，并可通过纯 CSS 设置主题。

此技能的触发条件

  • 用户明确要求制作 MARP 幻灯片
  • 用户想要“Markdown 幻灯片”或“根据 Markdown 制作幻灯片”
  • 用户想要一个可提交到 git 并能确定性地重新生成的 .md 文件
  • 用户提到 marp-cli、Marpit 指令，或要求使用 CSS 设置幻灯片主题
  • 用户想要从文本文档生成可通过命令行导出的 PDF 或 PPTX

不适用此技能的情况

用户需求改用
使用 Reveal.js 制作带滚动导航的浏览器原生 HTML 演示文稿html-presentation
使用原生 PowerPoint 功能（在 PowerPoint 中设置动画、过渡效果）编辑二进制 .pptxdocument-skills:pptx
静态海报或单页视觉内容concept-to-image
动画 Manim 说明视频animate

步骤 0：收集需求

开始生成前，请在一条消息中确认需求。用户未指定的选项默认静默采用默认值——不要重复询问。

参数选项默认值
导出目标pdf、pptx、html、allpdf
主题dark-dashboard、light-editorial 或 MARP 内置主题（default、gaia、uncover）dark-dashboard
宽高比16:9、4:316:9
幻灯片数量整数或 autoauto
视觉密度minimal（文字优先）、standard（图文混合）、dashboard（图表 + 指标卡片）standard
品牌元素Logo 路径、强调色十六进制值无

步骤 1：按需加载参考资料

不要预先读取所有参考文件。 根据用户意图，仅加载所需内容。这有助于技能满足 armory 的令牌效率预算。

用户意图加载内容
任何幻灯片组（始终必需）references/DIRECTIVES.md — Marpit 指令、frontmatter 架构、图像语法
自定义主题或 CSS 样式references/THEMES.md — dark-dashboard 和 light-editorial 起始 CSS
图表、仪表板、指标卡片、SVG 视觉元素references/COMPONENTS.md — SVG 图表示例、卡片、状态标签、图标
导出为 PDF/PPTX/HTML 或图像references/EXPORT.md — marp-cli 标志、Chrome 依赖项、--html 标志
用户需要具体示例作为参考references/examples/ — 3 个精选幻灯片组：dashboard.md、editorial.md、technical.md

步骤 2：编写幻灯片组

  1. 从 frontmatter 开始。 每个幻灯片组都以 YAML front matter 块开头，用于设置 theme、paginate、header、footer，并可选设置全局 style。完整架构请参阅 DIRECTIVES.md。
  2. 使用 --- 分隔幻灯片。 单独占一行的水平分隔线会创建一张新幻灯片。Frontmatter 必须位于第一个幻灯片分隔线之前。
  3. 第一页 = 标题页。 使用 居中标题页，并使用 将其从页数统计中隐藏。
  4. 中间页 = 内容页。 每张幻灯片尽量只表达一个观点。如果视觉密度为 dashboard，请使用 COMPONENTS.md 中的指标卡片和 SVG 图表。如果视觉密度为 minimal，请使用大标题并留出空白。
  5. 最后一页 = 总结/行动号召。 在结束页使用与开场页相同的类，以保持视觉对称。
  6. 背景图使用扩展语法： ![bg](url)、![bg left:40%](url)、![bg brightness:0.3 blur:2px](url)。一张幻灯片上使用多个 ![bg] 标签时会水平排列；添加 vertical 可改为纵向布局。

步骤 3：交付前验证

  • 存在 frontmatter 块，且是有效的 YAML
  • theme: 与已知主题名称匹配（内置主题，或在文件全局 style: 块中定义的自定义主题）
  • 每个幻灯片分隔符都是单独占一行的 ---，且上下都有空行
  • 仅使用相对图像路径（MARP 的 --allow-local-files 要求 PDF 导出时使用相对路径）
  • 如果使用原始 HTML（SVG、自定义 div），确认导出命令使用了 --html
  • 在本地运行一次导出命令，确认没有指令警告

第 4 步：导出

完整的命令参考请参阅 references/EXPORT.md。最简调用方式：

npx @marp-team/marp-cli@latest slides.md --pdf --allow-local-files --html

此技能封装了采用 MIT 许可证的 MARP 生态系统。上游致谢请参阅根目录中的 ATTRIBUTIONS.md。

设计规则

  1. 每张幻灯片只讲一个要点。 MARP 会静默裁切溢出内容——内容超出页面底部时不会发出警告。
  2. **分页：**标题页和分隔页使用 skip。附录页使用 hold。
  3. 图片仅使用相对路径。绝对路径会导致 VS Code 预览和 PDF 导出出错。
  4. 对任何 SVG、<div>、<details> 或内联样式，都必须使用 --html。否则，MARP 会将 HTML 标签转义为文本。
  5. 内容页的列表最多 6 行。更多内容请使用 details 折叠内容，或另加一张幻灯片。
  6. 标题应传达含义：h1 用作幻灯片标题，h2 用作副标题，h3 用作全大写的章节标签。层级保持一致，视觉节奏才会统一。
  7. **切勿在每张幻灯片中重复硬编码主题 CSS。**请在全局 `` 指令中定义一次，或单独创建 .css 文件并通过 theme: 加载。

评论

支持 Markdown