Skills
skills/skills.netease.im/slidev-zhiqi-ppt

slidev-zhiqi-ppt

SKILL.md

网易智企 Slidev PPT

基于网易智企 2026 PPT 模板的 Slidev 主题，用于创建和编辑企业演示文稿。支持通过配置文件或目录方式引入新风格。

零、引入新风格（主题扩展机制）

当用户希望使用非内置业务线的新风格时，提供两种方式：

方式 A：配置文件描述（轻量，推荐）

用户提供风格描述，AI 自动生成 CSS 变量块并注册到主题。

触发词：「换个风格」「用 xxx 风格」「新主题」「自定义主题」「引入风格」

操作步骤：

  1. 收集风格信息，向用户确认以下字段（可逐步澄清）：

    字段 说明 示例
    name 风格名称（英文或中文，用作标识） my-brand / 暗黑风
    primaryColor 主品牌色 #0055FF
    bgGradientFrom 背景渐变起始色 #1A1A2E
    bgGradientTo 背景渐变结束色 #16213E
    textPrimary 主文字颜色 #FFFFFF
    textSecondary 辅助文字颜色 #AAAAAA
    accentColor 强调色（卡片/装饰） #00CFFF
    bgImage 封面背景图路径（可选） ~/Desktop/my-bg.png
    logoImage Logo 图片路径（可选） ~/Desktop/my-logo.png

    若用户描述的是「暗黑」「科技感」「清新」等风格词汇，AI 应根据语义自动推断色值并展示给用户确认。

  2. 若有图片资源：将用户提供的图片复制到目标 PPT 项目的 theme/assets/ 目录下，按命名规范重命名：

    theme/assets/{name}-bg.png
theme/assets/{name}-logo.png

  3. 在 <项目>/theme/styles/variables.css 中追加新风格的 CSS 变量块，格式如下：

    /* ==== 自定义风格：{name} ==== */
/*
--netease-zhiqi-red: {primaryColor};
--netease-zhiqi-red-dark: {primaryColor 加深10%};
--netease-zhiqi-red-light: {primaryColor 提亮20%};
--netease-zhiqi-bg-primary: {bgGradientFrom};
--netease-zhiqi-bg-secondary: {bgGradientTo};
--netease-zhiqi-bg-gradient: linear-gradient(135deg, {bgGradientFrom} 0%, {bgGradientTo} 100%);
--netease-zhiqi-text-primary: {textPrimary};
--netease-zhiqi-text-secondary: {textSecondary};
--netease-zhiqi-accent-pink: {accentColor};
--netease-zhiqi-bg-image: url('../assets/{name}-bg.png');    /* 若无图片则省略此行 */
--netease-zhiqi-logo-image: url('../assets/{name}-logo.png'); /* 若无图片则省略此行 */
*/

    新风格默认注释状态（/* ... */），需要用户手动放开，或由 AI 帮用户切换（见下方「切换风格」步骤）。

  4. 同步更新 variables.css 中的「按业务线放开」注释区：在现有业务线注释块后追加新风格的注释块，保持格式统一。

  5. 帮用户切换到新风格：将原来生效的变量块注释掉，将新风格的变量块取消注释，使其生效。

  6. 告知用户结果：说明已注册的风格名称、生效状态，以及如何在 variables.css 中手动切换回其他风格。

方式 B：目录导入（完整风格包）

用户提供一个完整的风格目录（含图片 + CSS 文件），AI 执行导入。

目录结构要求（由 AI 向用户说明）：

my-theme/
├── variables.css        # 必须：CSS 变量定义（参考上方格式）
├── bg.png               # 可选：封面背景图
├── logo.png             # 可选：Logo 图
└── theme.json           # 可选：风格元信息（name 字段至少要有）

theme.json 示例：

{
  "name": "my-brand",
  "displayName": "My Brand 风格",
  "description": "科技感深色主题"
}

操作步骤：

  1. 读取 my-theme/theme.json（若存在）获取 name，否则用目录名作为 name
  2. 将 bg.png → theme/assets/{name}-bg.png，logo.png → theme/assets/{name}-logo.png（若存在则复制）
  3. 读取 my-theme/variables.css，将其中的变量块追加到 <项目>/theme/styles/variables.css，包裹在注释块中（同方式 A 步骤 3）
  4. 询问用户是否立即切换到该风格，若是则执行切换（同方式 A 步骤 5）

切换已注册的风格

当用户说「切换回智企风格」「换成暗黑风格」等时：

  1. 读取 <项目>/theme/styles/variables.css
  2. 将当前生效的变量块（未被 /* */ 包裹的那组）注释掉
  3. 将目标风格的变量块取消注释
  4. 保存文件，告知用户已切换

风格名称与注释标识对应关系（读取文件时按注释行 /* ==== ... ==== */ 识别）：

  • 智企（默认） → 默认区块（文件顶部未标注的那组）
  • 其他风格 → /* ==== 自定义风格：{name} ==== */ 标识

查看已注册的风格

当用户问「有哪些风格」「支持哪些主题」时：

  1. 读取 <项目>/theme/styles/variables.css
  2. 列出所有识别到的风格块（按注释标识），标注当前生效的那个
  3. 以列表形式展示给用户

一、初始化 PPT

  1. 使用 scripts/init.sh 从模板创建新项目：
bash scripts/init.sh <目标目录>

脚本会自动完成：

  • 将 template/ 内容拷贝到目标目录（如目标为已存在的空目录则直接拷入）
  • 将 theme/example.md 拷贝为 slides.md（作为初始内容）

  1. 脚本执行完成后，在目标目录中运行 pnpm install（或 npm install）安装依赖。不要运行 pnpm dev。

  2. 判断业务线：根据用户上下文（项目名、对话内容等）判断属于哪条业务线，修改 <目标目录>/theme/styles/variables.css 中的 CSS 变量。注释默认的第一组（智企），放开对应业务线的注释。判断不出则保持默认。

业务线对应关系：

业务线 背景图后缀 Logo 后缀
智企（默认） -bg.png -logo.png
CodeWave -bg-CodeWave.png -logo-CodeWave.png
云信 -bg-云信.png -logo-云信.png
云商 -bg-云商.png -logo-云商.png
易盾 -bg-易盾.png -logo-易盾.png
数帆 -bg-数帆.png -logo-数帆.png

操作方式：在 variables.css 中将当前生效的一组用 /* */ 注释，将目标业务线的 /* */ 注释去掉。

只有智企（默认）有 Logo short 图片，其他业务线不需要。

二、编辑内容（slides.md）

修改前准备

重要：每次修改 slides.md 前，必须先完整阅读 <项目>/theme/example.md。该文件包含所有布局和组件的完整用法示例，是你了解可用能力的唯一权威来源。不要凭猜测写组件用法，不要自己用 HTML/CSS 手写已有组件能实现的效果。

重要：每次修改 slides.md 前，必须先完整阅读 用户已有的 slides.md 文件，不能随意篡改不相关的内容。

关于样式，优先使用已有的布局（比如封面、居中页、两栏对比页等）和组件（面板、要点卡片、数据圆环、阶梯递进流程图、韦恩图、同心弧层级图、金字塔层级图等）。其次搭配 unocss 进行布局（比如默认页+内容两列、默认页+右图左文等），而不是直接改主题。

修改完成后

  1. 运行 pnpm build 生成静态文件，确保 slides.md 中没有语法错误。如有错误请修复。
  2. 运行 pnpm run export:pptx（或 npm run export:pptx）导出 PPTX 文件。导出依赖 Playwright，模板已包含 playwright-chromium 依赖。

布局选择

优先使用已有布局，通过 frontmatter 的 layout 字段指定：

布局 用途 关键 frontmatter
cover 封面 —
end 结束页 —
toc 目录 activeNum
section 章节分隔 title
default 通用内容页 title, padding
center 居中（图片/视频/致谢） title
transfer 两栏对比 title, leftTitle, rightTitle

frontmatter 保持简洁，只配必要字段。

组件使用

重要：主题内置了丰富的可视化组件，不要用纯文字列表代替。当内容涉及流程、层级、对比、数据等场景时，必须优先使用对应组件，而不是只用 Markdown 列表或表格。具体写法请参照 example.md 中的示例原样使用，不要自行猜测 Props 或插槽名称。

全局组件可直接在 Markdown 中使用：

组件 用途 主要 Props
<Panel title="..."> 带标题面板 title
<KeypointCard title="..."> 要点卡片 title, icon; #icon 插槽
<DataCircle> 数据圆环 value, label, highlighted, size(small/normal/large，默认 large)
<StepTimeline> + <StepItem> 阶梯递进流程图（从左下到右上） StepItem: title; 默认插槽放正文
<VennDiagram> + <VennItem> 韦恩图（三圆 + 左右标注项） VennDiagram: circles(3 个标题数组), --venn-spread CSS 变量控制圆间距; VennItem: title, side(left/right); #icon 插槽放图标
<ArcDiagram> + <ArcItem> 同心弧层级图（彩虹弧） ArcItem: title; 默认插槽可选内容。第一个为最外层
<PyramidDiagram> + <PyramidItem> 金字塔层级图（梯形堆叠 + 右侧标注） PyramidItem: title; 默认插槽放描述。搭配 unocss grid 做左右布局

重要：

  • <KeypointCard>、<DataCircle size="large">、<StepTimeline>、<VennDiagram>、<ArcDiagram>、<PyramidDiagram> 都比较大，尽量只在一页中使用。否则会很拥挤。
  • <KeypointCard> 不要垂直排列，只适合水平排列。
  • <DataCircle size="small"> 可搭配正文使用。

内容→组件速查

根据内容类型选择最合适的组件，不要全部用纯文字列表：

内容场景 推荐组件 不要这样做
流程、步骤、时间线、递进关系 <StepTimeline> + <StepItem> 用编号列表或箭头文字
多概念交叉、关联关系 <VennDiagram> + <VennItem> 用文字描述关系
层级递进、优先级从高到低 <PyramidDiagram> + <PyramidItem> 用缩进列表
包含关系、由外到内的层次 <ArcDiagram> + <ArcItem> 用嵌套列表
核心数据指标、百分比 <DataCircle> 只写“完成率 95%”
总结要点、核心价值 <KeypointCard> 用普通列表
分类内容、带标题的段落 <Panel> 用 h3 + 列表
两方对比、前后对比 transfer 布局 用表格对比

布局+UnoCSS 组合技巧

在 default 布局中搭配 UnoCSS 实现更多排版，而不是去改主题：

  • 两列布局：<div class="grid grid-cols-2 gap-x-10"> 包裹两个 <div>
  • 右图左文：<div class="grid grid-cols-[2fr_1fr] gap-x-12 items-center">
  • 三列卡片：<div class="grid grid-cols-3 gap-8 mt-10"> 包裹三个 <KeypointCard>
  • 数据圆环（大）：<div class="flex items-center justify-center -space-x-2 mt-20"> 包裹多个 <DataCircle>
  • 数据圆环（图文结合）：左侧 markdown + 右侧 <DataCircle size="normal"> 或 size="small"，用 grid 布局
  • 金字塔+左侧文字：<div class="grid grid-cols-[1fr_4fr] gap-4 h-full"> 左侧文字 + 右侧 <PyramidDiagram>
  • 内容过多缩放：外层 <div class="scale-75 origin-top-left"> 包裹

Markdown 书写规范

  1. 优先用组件 + Markdown 语法，其次用原生 HTML 标签
  2. 标签内嵌 Markdown 时，内容开头和结尾必须与标签之间各空一行，内部 Markdown 不要缩进：
<Panel title="标题">

- 列表项1
- 列表项2

</Panel>
  1. 优先配置 frontmatter 和组件 props，其次再用插槽等高级用法
  2. 项目列表等正文，文字建议不要过多，一是 PPT 要精简方便阅读展示，二是文字过多容易溢出屏幕。除非用户声明。

图标基本用法

  • 优先使用 @iconify-json/material-symbols-light 图标库（已引入）。推荐 outline-rounded 或 outline 风格。其次再使用 emoji
  • 用法：<div class="i-material-symbols-light-{icon-name} text-2xl"></div>
  • 你需要用 grep 命令确保库中有你需要的图标，否则会出现空白。脚本示例： 
    cd <项目> && grep "arrow" node_modules/@iconify-json/material-symbols-light/metadata.json
    可检索到所有与 arrow 相关的图标。
  • 如果没有，可以换个相似的词语再检索。
  • 注意：不是所有图标都支持 outline-rounded 或 outline 风格，你检索出来没有，用其他风格也可以。
  • 完整图标列表见 Material Symbols Light。

动画基本用法

演讲时按空格或 → 触发「下一步」，常用写法：

  • 逐步显示：<v-click> 第一次点击后出现 </v-click> 或 <div v-click>...</div>
  • 与前一步同时出现：<v-after> 和上一句一起出现 </v-after>
  • 列表逐条出现：用 <v-clicks> 包裹列表，每次点击显示一项：
<v-clicks>

- 要点一
- 要点二
- 要点三

</v-clicks>

  • 同样注意：标签内嵌 Markdown 时，内容开头和结尾必须与标签之间各空一行，内部 Markdown 不要缩进

  • 指定第几次点击显示：<div v-click="3"> 第 3 次点击后出现 </div>

  • 幻灯片切换过渡：在 frontmatter 中写 transition: slide-left（或 fade、slide-up 等）

更多点击时机、Motion 动画、自定义过渡见 动画指南。

Slidev 官方参考

三、修改完成后向用户总结

AI 工具完成对 PPT 的创建或修改后，应向用户简要总结以下信息：

  1. 导出文件位置
    给用户指明 PPTX 导出文件的位置，如：/Users/your-name/some/path/slides-export.pptx。 默认文件名一般为 slides-export.pptx（或通过 --output 指定的名称）。用户可在该目录中直接找到并打开。

  2. 网页版预览方式
    给用户指明如何打开网页版预览，如执行：

    cd /Users/your-name/some/path
npm run dev

    然后在浏览器中打开终端提示的地址。默认端口一般为 3030，若被占用会使用 3031 等，以终端实际输出为准（例如 http://localhost:3030）。

  3. 如何修改 PPT 内容
    直接编辑项目根目录下的 slides.md 即可修改文案与结构。改完之后，网页版不需要重新启动。 如果要重新导出 PPTX，可再次执行：

    pnpm build
pnpm run export:pptx

  4. Slidev 导出 PPTX 的局限
    本框架导出的 PPTX 中，每一页均为整页截图（图片），文字不可在 PowerPoint 中单独选中或编辑。详见官方说明：导出 - PPTX。 建议优先以修改 Markdown 和在网页版预览为主，以保留交互与可读性。

  5. Slidev 其他用法

    • PDF 导出：npm run export（默认 PDF），输出如 slides-export.pdf。
    • 浏览器导出 UI：开发时访问 http://localhost:3030/export（端口以实际为准），可在页面中导出 PDF、PPTX 或 PNG。
    • 静态站点部署：pnpm build 后部署 dist/ 目录，即可将演示文稿作为网页分享。
    • 更多语法、演讲者备注、点击动画等详见 Slidev 官方文档，包括以下章节：

四、高级修改主题样式

主题已是最佳实践，建议不要大改。修改前先阅读代码，保持与已有风格一致。

优先级：

  1. <项目>/theme/styles/variables.css — 修改颜色、字号等变量，切换业务线主题变量。
  2. 开发新的布局和组件 — 极少需要改动
  3. <项目>/theme/styles/layout.css — 修改全局排版样式（谨慎）

开发新的布局和组件

现在 <项目>/theme 中的代码，特别是 layouts 和 components 的代码都已优化，效果较好，是最佳实践，尽量参考这些代码。

  • 你需要思考是新加一个布局，还是新加组件的方式来解决用户需求。
  • 建议优先添加组件，搭配默认布局使用。
  • 组件的样式尽量在组件中添加 scoped 样式，而不是在 layout.css 中添加。
  • 尽量复用主题变量。
  • 减少组件间的布局样式实现，应该用 unocss 搭配布局实现。
Installs
14
Source
skills.netease.…0fd4c2da
First Seen
Apr 3, 2026