菜单
Visual QA loop for UI development — build, screenshot, compare to reference, identify delta, prompt correction, repeat. Formalizes the self-review cycle and defines when to disable it.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/andrem-sec/psc-comet --skill screenshot-loop命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | screenshot-loop |
| description | Visual QA loop for UI development — build, screenshot, compare to reference, identify delta, prompt correction, repeat. Formalizes the self-review cycle and defines when to disable it. |
| version | 0.1.0 |
| level | 2 |
| triggers | ["screenshot loop","visual review","compare to reference","self review UI","/screenshot-loop"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Setup","description":"Confirm Puppeteer is available or identify fallback. Establish reference screenshots and naming convention."},{"name":"Build Pass","description":"Write the initial implementation."},{"name":"Screenshot and Compare","description":"Take section-by-section screenshots. Compare against reference. Identify specific deltas."},{"name":"Correct","description":"Issue targeted correction prompts for each delta. One delta per prompt."},{"name":"Final Pass","description":"Screenshot the corrected result. Confirm delta is closed. Repeat if needed."}] |
Formalize the visual QA cycle. Build, screenshot, compare, correct, repeat. The loop closes the gap between what Claude thinks it built and what the reference actually looks like.
Claude writes code and declares it done. It has no way to see the result without a screenshot mechanism. Without one, it is writing blind — making visual decisions based on mental simulation of CSS properties, not actual rendered output.
The second failure: when a screenshot loop is set up but not managed, it becomes a liability. Claude takes a screenshot, sees it does not perfectly match the reference, and issues another correction. And another. And another. It spirals because the goal (exact pixel match) is unachievable and the loop has no exit condition. This skill defines the exit condition.
Puppeteer must be installed for automated screenshots:
npm install puppeteer
# or
npx puppeteer install chrome
Screenshot configuration in CLAUDE.md (add to project CLAUDE.md, not global):
## Screenshot Workflow
- Tool: Puppeteer
- Output dir: temp_screenshots/
- Naming: [section]-[pass]-[timestamp].png
- On session start: delete old screenshots from temp_screenshots/
- On animated elements: DO NOT screenshot — review manually
If Puppeteer is not available, use browser DevTools:
The loop still works without Puppeteer — it just requires manual screenshot capture at each step.
Before the first implementation pass:
temp_screenshots/reference-[section].pngtemp_screenshots/[section]-v[N].png for each passDo not start building without a reference screenshot in place. Without it, there is nothing to compare against.
Write the initial implementation. Do not screenshot during writing — complete the implementation first, then screenshot.
For large pages, implement section by section:
Do not implement the entire page and then screenshot. Section-by-section closes gaps before they compound.
After completing a section:
Delta format:
- [Element]: Built has [X], reference has [Y]
Example: "Hero heading: built uses 40px, reference appears ~56px"
- [Element]: Built missing [effect]
Example: "Card: missing the subtle box-shadow, appears flat"
- [Element]: Color mismatch
Example: "CTA button: built is #2563EB, reference appears warmer ~#3B82F6"
Describe deltas in specific, technical terms. "Looks different" is not actionable. "Font size appears 16px too small" is.
Issue one targeted prompt per delta. Do not batch all corrections into one prompt — it increases the chance of regression.
"The hero heading font size is too small. Increase from 40px to approximately 56px at desktop breakpoint."
After each correction, screenshot again and verify that specific delta is closed before moving to the next.
The loop exits when:
Do not loop more than 3 passes on a single section without pausing to ask the user if the remaining delta is worth pursuing. Some differences between a reference and a clone are intentional or unavoidable.
For components that include animation (CSS @keyframes, JavaScript-driven motion, video backgrounds), screenshots capture a frozen moment. The loop fails because:
When implementing animated components, explicitly disable the screenshot loop:
"This component includes animation — do not use the screenshot loop. Implement it and I will review the motion manually."
Add this instruction at the start of any animated component implementation session.
The screenshot loop runs against localhost. Never push changes to a staging or production environment while the loop is running. Only push when:
# In project CLAUDE.md:
Always develop and test on localhost. Never commit or push until I explicitly say to.
Poor naming causes confusion when reviewing pass history:
| Bad | Good |
|---|---|
| screenshot_1.png | hero-v1-before.png |
| temp.png | features-v2-after-correction.png |
| compare.png | reference-hero.png |
Format: [section]-v[pass]-[state].png
section: hero, features, pricing, footer, navpass: v1, v2, v3state: before, after, referenceDo not screenshot while still writing code. Complete the implementation pass first.
Do not loop indefinitely trying to achieve a pixel-perfect match with a reference. Set a maximum of 3 passes per section.
Do not use the screenshot loop on animated components. Review motion manually.
Do not push to any remote until the loop is complete and the user approves on localhost.
Do not batch all delta corrections into one prompt. Fix one delta at a time and verify.