claude-skill 是 MotionSites 出品的免费 Claude 技能，让 Claude 构建获奖级别的电影感落地页。它的核心机制是「截图-修复循环」：Claude 构建页面后，用 Playwright 对自己的作品截图、跑 QA 报告，亲眼看结果，再逐轮修复。本文用最短的步骤带你完成Playwright 截图 QA 环境配置，让这套"自我质检"流程在你的电脑上完整跑起来。

为什么需要让 Claude "看见"自己的作品？

AI 生成的网页往往千篇一律，原因有三个：计划模糊、没有真实媒体素材、没有人（或 AI）看过最终效果。claude-skill 在 SKILL.md 中明确规定了"Look and fix"步骤是强制的：

"The first version is never the best one."（第一版永远不是最好的）

没有 Playwright 时，Claude 只能靠"读代码"猜测页面长什么样；配置好截图环境后，它就能拿到桌面版、移动版两张真实截图 + 一份 JSON 格式的 QA 报告，像评审一样给自己的作品打分并修复。

环境配置：两条命令搞定 Playwright 安装

✅步骤 1：安装 Playwright 并下载 Chromium 浏览器

pip install playwright && python -m playwright install chromium

✅步骤 2：验证是否可用

python -c "import playwright; print('Playwright 已就绪')"

看到输出Playwright 已就绪即配置成功。

💡 如果还没安装 skill 本体，可先克隆仓库：git clone https://gitcode.com/gh_mirrors/cla/claude-skill，核心内容在 plugins/motionsites-web-builder/skills/motionsites-web-builder/。

截图脚本 shoot.py：一键截图 + QA 体检

环境装好后，截图工作由 skill 内置的 scripts/shoot.py 完成，用法非常简单：

python scripts/shoot.py index.html shots/

支持两个常用参数：

它也可以直接对本地开发服务器截图，例如python scripts/shoot.py http://localhost:5173 shots/。

运行后会生成 3 张关键截图：

• shots/desktop.png：桌面版（1440×900）
• shots/mobile.png：移动版（390×844，带触摸模拟）
• shots/desktop-early.png：0.35 秒时的"首屏瞬间"，专门用来检查深色页面有没有白色闪烁

同时输出 JSON 格式的 QA 报告，自动检查这些常见问题：

1. Console 错误与页面 JS 异常
2. 失败的请求（404 资源、坏掉的素材 URL）
3. 移动端横向溢出（horizontalOverflow: true即布局破版）
4. 字体是否真正加载（H1 是否退化成系统字体）
5. 视频是否可播、图片是否裂图

🎬 小贴士：脚本会优先调用系统 Chrome（支持 H.264 MP4 播放）；如果找不到 Playwright 或 Chrome，会降级为 headless Chrome 纯截图模式（无 QA 报告）。

媒体素材库：让 Claude 用眼睛挑选

截图 QA 不只是"质检"，它也让 Claude 在开工前能"亲眼"挑选素材。skill 内置了媒体架：media/MEDIA.md 记录了 100+ 个公开托管的视频、3D 透明抠图和图片，并配有编号联系表，Claude 直接看图选素材：

修复循环：截图 → 打分 → 修复 → 再截图

拿到截图和报告后，Claude 会按照 references/review.md 中的 10 项评审标准打分（第一眼印象、标志性记忆点、字体排印、构图、色彩、媒体融合、动效、移动端、文案、细节打磨）：

• 及格线：平均分 ≥ 8，且单项不低于 7
• 找出最弱的 3 项，用具体数值修复（如"H1 从 64px 改为 clamp(56px, 8vw, 128px)"），而不是形容词
• 重新截图再看，最多循环 3 轮

这套"看着修"的流程，正是 AI 页面从"平均水准"走向"获奖水准"的关键差异。

常见问题（FAQ）

Q：截图里视频区域是黑的，是不是坏了？不一定。Playwright 自带的 Chromium 不能解码 H.264 MP4，脚本会优先调用系统 Chrome 规避；若仍使用自带 Chromium，QA 报告里会附带videoNote说明，让 Claude 按海报帧判断而非当作 bug。

Q：不装 Playwright 能用这个 skill 吗？能。Claude 会退而求其次，用现有浏览器或预览工具检查；如果什么都没有，它会逐行对照评审标准复查代码，并明确告知你"页面未经视觉检查"。但想要最佳效果，强烈建议按上文完成 Playwright 截图 QA 环境配置。

Q：配置文件在哪里改？无需改配置。skill 的完整工作流程写在 SKILL.md，技巧配方在 references/techniques/INDEX.md，按需阅读即可，仓库本身是只读的。

配置完成后，直接向 Claude 提出需求即可自动触发整个流程，例如："为一款奢华睡眠追踪戒指构建落地页 Hero"——剩下的截图、打分、修复，它会循环做完。🚀