mcpField
V
visual-audit

visual-audit

github.com/pedrohcgs设计与 UI1.7k53 次安装4 周前更新
代码仓库

关于 visual-audit

visual-audit 是用于检查幻灯片视觉布局问题的 Skill。它渲染 Quarto 或 Beamer 文件，检查溢出、样式一致性等问题，并按幻灯片给出建议。

主要功能

  1. 01渲染 Quarto 幻灯片
  2. 02编译 Beamer 演示文稿
  3. 03检查内容溢出与失效资源
  4. 04检查布局、字体和间距
  5. 05按严重程度生成建议

适用场景

  1. 01发布前检查幻灯片
  2. 02查找渲染幻灯片中的溢出
  3. 03检查内容密集的页面与图表
  4. 04整理优先处理的布局问题

安装

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

$npx skills add https://github.com/pedrohcgs/claude-code-my-workflow --skill visual-audit

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

详细介绍

幻灯片演示文稿视觉审查

对幻灯片演示文稿进行全面的视觉布局审查。

步骤

  1. 读取 $ARGUMENTS 指定的幻灯片文件

  2. 对于 Quarto（.qmd）文件：

    • 使用 quarto render Quarto/$ARGUMENTS 渲染
    • 测量渲染结果："${SLIDE_QA_PYTHON:-python3}" scripts/slide-qa.py Quarto/<deck>.html。该脚本会在无头 Chrome 中加载演示文稿并显示所有片段，然后写入 quality_reports/audits/slide-qa/<deck>/report.md，其中包含每张幻灯片超出各边界的像素数、违规元素、滚动元素中隐藏的内容，以及每张幻灯片的一张截图；还会检查损坏的图片，或路径不存在、大小写不正确的本地文件（这些问题会导致文件在 GitHub Pages 上无法正常显示）。OVERFLOW 检查结果来自此报告；损坏或大小写不正确的资源也属于问题。对于其他检查，请阅读被标记幻灯片和内容密集幻灯片的截图。
    • 如果退出代码为 2（通常是缺少 Playwright——脚本会打印一次性虚拟环境安装命令和需要设置的 SLIDE_QA_PYTHON 行），请说明这一情况；改为阅读内容密集幻灯片渲染后的 HTML 和用户提供的任何截图，并指出用户应自行检查的幻灯片

  3. 对于 Beamer（.tex）文件：

    • 编译（参见 /compile-latex），检查日志中的 overfull hbox 警告，并阅读包含图表或内容密集页面的 PDF

  4. 审查每张幻灯片的以下方面：

    溢出： 内容超出幻灯片边界
    字体一致性： 行内字体大小覆盖、字号不一致
    色块疲劳： 单张幻灯片上有 3 个或更多彩色框（INV-7 允许使用 2 个），框类型错误
    间距： 缺少负边距、缺少 fig-align
    布局： 缺少过渡、缺少引导句、语义颜色不当

  5. 生成报告，按幻灯片整理，并标明严重程度和建议

  6. 遵循间距优先原则：

    1. 使用负边距缩小垂直间距
    2. 合并列表
    3. 将独立公式改为行内公式
    4. 缩小图片/SVG
    5. 最后才缩小字体（不得低于 0.85em）

评论

支持 Markdown