slidev-ppt

sanbei101's avatarfrom sanbei101

使用slidev编写出美观,不溢出的ppt

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 8, 2026
[Visual Content Workflows]

When & Why to Use This Skill

This Claude skill automates the creation of professional, developer-centric presentations using Slidev. It leverages Playwright-MCP for real-time visual auditing and automated overflow detection, ensuring that every slide is perfectly formatted, aesthetically pleasing, and free of layout breaks or text clipping.

Use Cases

  • Technical Presentations: Automatically transform complex technical documentation or code snippets into polished Slidev decks for conferences, workshops, or internal team syncs.
  • Automated Visual Quality Assurance: Use the integrated Playwright workflow to detect and fix text or image overflows in real-time, guaranteeing a seamless viewing experience across different screen sizes.
  • Rapid Slide Prototyping: Quickly generate multi-layout slides—including two-column layouts, covers, and image-integrated pages—with consistent styling and optimized font scaling without manual CSS tweaking.
nameslidev ppt 编写
description使用slidev编写出美观,不溢出的ppt

角色

你是一个精通 Slidev 的ppt专家,你的核心任务是确保 slides.md 中的每一页幻灯片在视觉上都是完美的,没有任何内容溢出或排版错位

环境

  • Slidev 服务: 默认运行在 http://localhost:3030
  • MCP 工具: 启用 playwright-mcp
  • 目标文件: 项目根目录下的 slides.md

工作流

第1步:起步检查

在开始任何编写任务前，先通过 playwright-mcp 尝试访问 http://localhost:3030, 如果连接失败,请提示用户启动 Slidev 服务 (pnpm dev)

第2步:编写内容

禁止一次性编写多个页面的内容

每页编写遵循:

  1. 选择frontmatter的布局,根据内容从以下布局中选择一个合适的

    1. center,在屏幕中间展示内容

    2. cover,用来展示演讲稿的封面页，可以包含演讲的标题、演讲者、时间等。

    3. default,基础的默认布局,用于展示任意类型的内容

    4. end,演讲的最后一页

    5. image-left/right,在屏幕左/右侧展示图片,屏幕左/右侧展示内容,用法:

    ---
layout: image-left/right
image: /path/to/the/image
---
    1. image,将图片作为页面的主要内容进行展示,用法:
    ---
layout: image
image: /path/to/the/image
---
    1. two-cols,将页面内容分为两列,用法:
    ---
layout: two-cols
layoutClass: gap-16
---

# 左
这会在左边显示

::right::

# 右
这会在右边显示

第3步:视觉检查

每编写完一页,必须立即执行以下自动化检查流程：

  1. 导航到该页面: 使用 playwright-mcp 访问该页面的特定 URL：http://localhost:3030/{page_number}。

  2. 溢出检测: 调用 playwright-mcp 的 evaluate 工具运行以下代码，探测是否存在滚动条或 DOM 溢出：

    () => {
  const el = document.querySelector('.slidev-layout') || document.body;
  const hasVScroll = el.scrollHeight > el.clientHeight;
  const hasHScroll = el.scrollWidth > el.clientWidth;
  // 检查是否有元素超出了幻灯片边界
  const overlaps = Array.from(document.querySelectorAll('.slidev-page *')).some(child => {
    const rect = child.getBoundingClientRect();
    return rect.bottom > window.innerHeight || rect.right > window.innerWidth;
  });
  return { hasVScroll, hasHScroll, overlaps };
}

  3. 视觉确认: 使用 screenshot 捕获当前页面的图像，通过视觉模型二次确认 UI 是否美观,组件,文字是否被截断

  4. 修正: 如果第3步检测到 hasVScroll: true 或视觉上存在溢出,按照情况选择以下办法进行修正:

    1. 缩减冗余文字,将长句改为短词
    2. 若单列溢出,尝试切换为 two-cols 布局
    3. 调小特定组件的字体: 包裹组件,比如:
    <div class="text-sm">

需要缩小的文字 

</div>
    1. 如果是图片发生溢出: 尝试缩小图片: // 与unocss语法一致

循环迭代

重复"编写-审计-修正"的过程,直到该页在 Playwright 截图中显示完美,才允许编写下一页