让Claude亲眼看自己的作品：claude-skill + Playwright截图QA环境配置指南

【免费下载链接】claude-skillFree Claude skill: make Claude build award-level, cinematic landing pages. By MotionSites.项目地址https://gitcode.com/gh_mirrors/cla/claude-skill点击查看免费下载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/支持两个常用参数参数作用--wait 2.5等待入场动画稳定的时间默认 2.5 秒--full截取整页长图而非仅首屏它也可以直接对本地开发服务器截图例如python scripts/shoot.py http://localhost:5173 shots/。运行后会生成 3 张关键截图shots/desktop.png桌面版1440×900shots/mobile.png移动版390×844带触摸模拟shots/desktop-early.png0.35 秒时的首屏瞬间专门用来检查深色页面有没有白色闪烁同时输出 JSON 格式的 QA 报告自动检查这些常见问题Console 错误与页面 JS 异常失败的请求404 资源、坏掉的素材 URL移动端横向溢出horizontalOverflow: true即布局破版字体是否真正加载H1 是否退化成系统字体视频是否可播、图片是否裂图 小贴士脚本会优先调用系统 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 页面从平均水准走向获奖水准的关键差异。常见问题FAQQ截图里视频区域是黑的是不是坏了不一定。Playwright 自带的 Chromium 不能解码 H.264 MP4脚本会优先调用系统 Chrome 规避若仍使用自带 ChromiumQA 报告里会附带videoNote说明让 Claude 按海报帧判断而非当作 bug。Q不装 Playwright 能用这个 skill 吗能。Claude 会退而求其次用现有浏览器或预览工具检查如果什么都没有它会逐行对照评审标准复查代码并明确告知你页面未经视觉检查。但想要最佳效果强烈建议按上文完成 Playwright 截图 QA 环境配置。Q配置文件在哪里改无需改配置。skill 的完整工作流程写在 SKILL.md技巧配方在 references/techniques/INDEX.md按需阅读即可仓库本身是只读的。配置完成后直接向 Claude 提出需求即可自动触发整个流程例如为一款奢华睡眠追踪戒指构建落地页 Hero——剩下的截图、打分、修复它会循环做完。赞分享【免费下载链接】claude-skillFree Claude skill: make Claude build award-level, cinematic landing pages. By MotionSites.项目地址https://gitcode.com/gh_mirrors/cla/claude-skill点击查看免费下载相关推荐给 Claude Code 装上 DeepSeek 的眼睛一个改两行配置的“土办法”让 AI 终于能看懂截图了给 Claude Code 装上 DeepSeek 的眼睛一个改两行配置的“土办法”让 AI 终于能看懂截图了 最近技术圈有个挺有意思的现象一堆人守着 C大模型基础模型多模态计算机视觉DeepSeekclaude-video /watch Skill 实战指南让 Claude 与 Codex 拥有观看视频的能力claude video /watch Skill 实战指南让 Claude 与 Codex 拥有观看视频的能力 本篇技术指南以仓库 README.mdAI 技能AI 插件让Claude Code自动帮你读书zlibrary-to-notebooklm作为Claude Skill的完整使用指南让Claude Code自动帮你读书zlibrary to notebooklm作为Claude Skill的完整使用指南 zlibrary to noteb创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考