slide-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slide Creation Toolkit

幻灯片创建工具包

Create professional Marp/Marpit presentations, diagrams, and color systems with a consistent design language.

使用统一的设计语言创建专业的Marp/Marpit演示文稿、图表和色彩系统。

Core rules

核心规则

Use
bg
(background) syntax for all images - Reduces manual resizing with
```
fit
```
modifier
Define one 7-role color palette and reuse it in slides and SVGs.
Define one spacing unit (e.g., 8px or 16px) and reuse it across layouts.
Define text hierarchy tiers (title/section/body) with sizes and weights; use them consistently.
For SVGs, use one stroke width and one corner radius across shapes.

所有图片均使用
bg
（背景）语法 - 配合
```
fit
```
修饰符减少手动调整大小的操作
定义一套包含7种角色的调色板，并在幻灯片和SVG中复用。
定义一个间距单位（如8px或16px），并在所有布局中复用。
定义文本层级（标题/章节/正文）的字号和字重；保持使用一致性。
对于SVG，所有形状使用统一的描边宽度和圆角半径。

Design guidance (non-enforceable)

设计指南（非强制要求）

Aim for clear visual hierarchy with size, weight, and saturation.
Prefer one visual language (fill vs outline, emphasis rules).
Minimize visual noise; keep one primary visual anchor per section.

利用字号、字重和饱和度打造清晰的视觉层级。
偏好统一的视觉风格（填充 vs 轮廓、强调规则）。
尽量减少视觉干扰；每个章节保留一个主要视觉锚点。

Working directory

工作目录

This umbrella skill does not own module assets or scripts. Use the focused skills (

marp-authoring

slide-color-design

svg-illustration

) for paths and commands.

此综合技能不包含模块资源或脚本。如需路径和命令，请使用专项技能（

marp-authoring

、

slide-color-design

、

svg-illustration

）。

Start here (task entry)

从此开始（任务入口）

Entry skills (fast routing):

```
marp-authoring
```
→ Marp/Marpit authoring rules, layouts, themes
```
slide-color-design
```
→ palette workflow and color roles
```
svg-illustration
```
→ SVG diagram rules, patterns, embedding

Pick one task and follow the exact reading path:

Color palette only →
```
slide-color-design
```
Slides only (no diagrams) →
```
marp-authoring
```
Diagram only →
```
svg-illustration
```
Slides + diagrams →
```
marp-authoring
```
→
```
svg-illustration
```

Full deck (colors + slides + diagrams) →

slide-color-design

→

marp-authoring

→

svg-illustration

入口技能（快速路由）:

```
marp-authoring
```
→ Marp/Marpit创作规则、布局、主题
```
slide-color-design
```
→ 调色板工作流和色彩角色
```
svg-illustration
```
→ SVG图表规则、模式、嵌入方法

选择一个任务并遵循指定的操作路径：

仅制作调色板 →
```
slide-color-design
```
仅制作幻灯片（无图表） →
```
marp-authoring
```
仅制作图表 →
```
svg-illustration
```
幻灯片 + 图表 →
```
marp-authoring
```
→
```
svg-illustration
```
完整演示文稿（色彩 + 幻灯片 + 图表） →
```
slide-color-design
```
→
```
marp-authoring
```
→
```
svg-illustration
```

One-page quick reference

单页快速参考

Minimal steps (fast path):

Pick a palette →
```
slide-color-design
```
.
Draft slides →
```
marp-authoring
```
.
Add SVG diagrams →
```
svg-illustration
```
.
Validate via the module skills.

Common commands:

```
slide-color-design
```
→ palette scripts
```
marp-authoring
```
→ Marp validation/preview
```
svg-illustration
```
→ SVG linting

Output summary: Use module-specific output examples via the entry skills.

最简步骤（快速路径）:

选择调色板 →
```
slide-color-design
```
草拟幻灯片 →
```
marp-authoring
```
添加SVG图表 →
```
svg-illustration
```
通过模块技能进行验证

常用命令:

```
slide-color-design
```
→ 调色板脚本
```
marp-authoring
```
→ Marp验证/预览
```
svg-illustration
```
→ SVG代码检查

输出摘要: 通过入口技能查看模块专属的输出示例。

Quick Start

快速开始

Two Ways to Start

两种启动方式

Option 1: Use scripts (automated):

bash

uv run skills/marp-authoring/scripts/init_presentation.py technical-dark my-deck.md "My Title" "Author"

Option 2: Work manually (full control):

Copy a template from
```
marp-authoring
```
→
```
assets/templates/
```
→ customize
Design colors via
```
slide-color-design
```
Write slides via
```
marp-authoring
```
Add diagrams via
```
svg-illustration
```

Study examples first: Read

marp-authoring

→

assets/examples/

to see working presentations before starting.

方式1：使用脚本（自动化）:

bash

uv run skills/marp-authoring/scripts/init_presentation.py technical-dark my-deck.md "My Title" "Author"

方式2：手动操作（完全可控）:

从
```
marp-authoring
```
→
```
assets/templates/
```
中复制模板并自定义
通过
```
slide-color-design
```
设计色彩
通过
```
marp-authoring
```
撰写幻灯片
通过
```
svg-illustration
```
添加图表

先学习示例: 开始前请阅读

marp-authoring

→

assets/examples/

中的可用演示文稿。

Script Commands

脚本命令

Use

slide-color-design

for palette scripts and outputs.

Templates (starting points - copy and fill in your content):

Use
```
marp-authoring
```
→
```
assets/templates/
```
.

Examples (learning references - study patterns and copy techniques):

```
marp-authoring
```
→
```
assets/examples/
```
for slide patterns.
```
svg-illustration
```
→
```
assets/examples/
```
for diagram examples.
```
slide-color-design
```
→
```
assets/examples/
```
for palette examples.

Common icons (ready to use in slides):

```
marp-authoring
```
→
```
assets/icons/
```
.

使用

slide-color-design

获取调色板脚本和输出内容。

模板（起点 - 复制并填充内容）:

使用
```
marp-authoring
```
→
```
assets/templates/
```
中的模板。

示例（学习参考 - 研究模式并复制技巧）:

```
marp-authoring
```
→
```
assets/examples/
```
中的幻灯片模式
```
svg-illustration
```
→
```
assets/examples/
```
中的图表示例
```
slide-color-design
```
→
```
assets/examples/
```
中的调色板示例

常用图标（可直接用于幻灯片）:

```
marp-authoring
```
→
```
assets/icons/
```

Quick index (where to look)

快速索引（查找位置）

Reference hub:
```
references/index.md
```
Color design:
```
slide-color-design
```
Marpit authoring:
```
marp-authoring
```
SVG illustration:
```
svg-illustration
```
Decision guide:
```
references/decision-guide.md
```

参考中心:
```
references/index.md
```
色彩设计:
```
slide-color-design
```
Marpit创作:
```
marp-authoring
```
SVG插图:
```
svg-illustration
```
决策指南:
```
references/decision-guide.md
```

Modules

模块

Use the focused skills for module-specific rules and references:

Color design →
```
slide-color-design
```
Marpit authoring →
```
marp-authoring
```
SVG illustration →
```
svg-illustration
```

使用专项技能获取模块专属规则和参考内容：

色彩设计 →
```
slide-color-design
```
Marpit创作 →
```
marp-authoring
```
SVG插图 →
```
svg-illustration
```

Workflow

工作流

Single tasks

单一任务

Draw a diagram:

Use
```
svg-illustration
```
for core rules and patterns.
Choose colors via
```
slide-color-design
```
or existing palette.

Design slide colors:

Use
```
slide-color-design
```
for workflow and templates.

Write slides:

Use
```
marp-authoring
```
for syntax and layout patterns.
Apply a palette from
```
slide-color-design
```
.

制作图表:

使用
```
svg-illustration
```
获取核心规则和模式
通过
```
slide-color-design
```
或现有调色板选择色彩

设计幻灯片色彩:

使用
```
slide-color-design
```
获取工作流和模板

撰写幻灯片:

使用
```
marp-authoring
```
获取语法和布局模式
应用
```
slide-color-design
```
中的调色板

Full presentation

完整演示文稿

Establish a palette with the color module.
Outline slides and author via
```
marp-authoring
```
.
Add diagrams via
```
svg-illustration
```
.
Keep palette, spacing, and hierarchy consistent.

通过色彩模块建立调色板
规划幻灯片大纲并通过
```
marp-authoring
```
创作
通过
```
svg-illustration
```
添加图表
保持调色板、间距和层级的一致性

Decision guide

决策指南

See references/decision-guide.md for a flowchart and loading strategy.

Quick rules:

Slides or deck -> marp-authoring
Slides + colors -> slide-color-design -> marp-authoring
Slides + diagrams -> marp-authoring + svg-illustration
Diagram only -> svg-illustration

Scale reference loading:

Simple request -> core rules only
Complex request -> add patterns and best-practices

查看references/decision-guide.md获取流程图和加载策略。

快速规则:

幻灯片或演示文稿 -> marp-authoring
幻灯片 + 色彩设计 -> slide-color-design -> marp-authoring
幻灯片 + 图表 -> marp-authoring + svg-illustration
仅图表 -> svg-illustration

参考内容加载规模:

简单请求 -> 仅加载核心规则
复杂请求 -> 添加模式和最佳实践

Output formats

输出格式

Use the focused skills for module-specific output formats:

slide-color-design

→

references/output-examples.md

marp-authoring

→

references/output-examples.md

svg-illustration

→

references/output-examples.md

使用专项技能获取模块专属的输出格式：

slide-color-design

→

references/output-examples.md

marp-authoring

→

references/output-examples.md

svg-illustration

→

references/output-examples.md

Integration rules

集成规则

Use palette hex values in SVG
```
fill
```
and
```
stroke
```
.
Keep border radius and stroke widths consistent between Marpit and SVG.
Embed SVGs with Markdown images or file references.

在SVG的
```
fill
```
和
```
stroke
```
属性中使用调色板的十六进制值
保持Marpit和SVG之间的圆角半径和描边宽度一致
通过Markdown图片或文件引用嵌入SVG

Troubleshooting

故障排除

Common cross-cutting issues:

references/troubleshooting-common.md
svg-illustration →
```
references/troubleshooting.md
```

常见跨模块问题:

references/troubleshooting-common.md
svg-illustration →
```
references/troubleshooting.md
```

Common mistakes

常见错误

Using absolute paths instead of relative paths for assets.
Using multiple palettes across one deck or between slides and SVGs.
Skipping validation checks (Marp, SVG lint, contrast).

See

marp-authoring

slide-color-design

, and

svg-illustration

for module-specific mistakes.

为资源使用绝对路径而非相对路径
在单个演示文稿或幻灯片与SVG之间使用多套调色板
跳过验证检查（Marp、SVG代码检查、对比度检查）

查看

marp-authoring

、

slide-color-design

和

svg-illustration

获取模块专属的常见错误说明。

Quick check (minimal)

快速检查（最简版）

Use module-specific quick checks:

```
marp-authoring
```
→ validation/preview workflow
```
svg-illustration
```
→ SVG lint checks
```
slide-color-design
```
→ contrast checks

使用模块专属的快速检查：

```
marp-authoring
```
→ 验证/预览工作流
```
svg-illustration
```
→ SVG代码检查
```
slide-color-design
```
→ 对比度检查

Validation

验证

Use the module-specific validation guides:

marp-authoring

→

references/preview-workflow.md

svg-illustration

→

references/troubleshooting.md

slide-color-design

→

references/color-design/workflow.md

(validation checklist)

Always validate before committing files using the focused skills.

使用模块专属的验证指南：

marp-authoring

→

references/preview-workflow.md

svg-illustration

→

references/troubleshooting.md

slide-color-design

→

references/color-design/workflow.md

（验证清单）

提交文件前，请务必使用专项技能完成验证。

Constraints

约束条件

Output Marpit Markdown only; do not generate PowerPoint/Keynote files.
Output SVG only; do not generate raster images.
Avoid interactive animations; keep slides static.
Preserve provided brand colors; adapt them into the palette.

仅输出Marpit Markdown格式；请勿生成PowerPoint/Keynote文件
仅输出SVG格式；请勿生成栅格图像
避免交互式动画；保持幻灯片静态
保留提供的品牌色彩；将其适配到调色板中 ",