菜单
Use when comparing a running web UI against its intended design (Figma mockups or reference screenshots), reviewing visual/layout/spacing/typography fidelity of a page, component, or interaction, or when a design-vs-build diff is needed before shipping or to feed a fix loop.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
| name | design-review |
| description | Use when comparing a running web UI against its intended design (Figma mockups or reference screenshots), reviewing visual/layout/spacing/typography fidelity of a page, component, or interaction, or when a design-vs-build diff is needed before shipping or to feed a fix loop. |
Compare a locally-running web UI against its intended design and produce a steppable HTML report plus structured findings. This is the light path: agent + human eyeball comparison from paired screenshots, findings recorded in lazyspec Audit form so a build loop can act on them. (A future heavy path adds pixel/token diffing and iterate-until-threshold; not covered here.)
Captured shots live under <repo>/review/. Two shipped tools do the mechanical work: capture.mjs (sandboxed browser capture) and report.html (step-through viewer). Do not reinvent them.
Not for: pure accessibility audits, functional/E2E testing, or design work with no reference to compare against.
Build the manifest. Copy manifest.example.json to <repo>/review/manifest.json. One set per thing reviewed, tagged level: page | component | interaction. Component sets use clip (a selector); interaction sets use steps (hover/fill/click/press/waitFor). Optional per-set fields: fullPage (override the default, which is on for page shots and off once steps run), mask (selectors for nondeterministic regions like dates/avatars, excluded from the shot so re-runs don't churn). baseUrl must be loopback.
Capture the intended design (Figma MCP). For each set, mcp__claude_ai_Figma__get_screenshot on the node, save PNG under review/shots/figma/, and set the set's intended path. Prefer 2x scale to match app deviceScaleFactor. If the user supplies exported PNGs instead of a Figma URL, drop them in the same folder and point intended at them.
Capture the running app (sandboxed). node capture.mjs review/manifest.json. Requires Playwright (npm i -D playwright && npx playwright install chromium — see installing-dependencies if it fails). The script writes actual paths back into the manifest and refuses non-loopback targets. It blocks every request whose origin is not on the allowlist — the printed "blocked N off-allowlist request(s)" line is expected for pages with external assets, not an error. Pass --tag=<run> to write shots under a per-run subdir so a re-run keeps the prior capture for before/after.
Compare and record findings. For each set, view actual vs intended and record concrete deltas into the set's findings[]: {severity, kind, message, expected, actual}. severity is critical | high | medium | low | info (matches the audit template). kind is one of spacing/color/typography/layout/presence. Be specific (expected: "24px", actual: "16px"), not "looks off". The comparison of record is side-by-side plus these findings; the viewer's overlay/diff toggle is a mix-blend-mode visual aid (not a pixel diff) and is only meaningful when the two shots share dimensions.
Generate the viewer. Inline the manifest into a self-contained report:
node -e 'const fs=require("fs");const m=fs.readFileSync("review/manifest.json","utf8");const t=fs.readFileSync(".claude/skills/design-review/report.html","utf8");fs.writeFileSync("review/report.html",t.replace("/*__REVIEW_DATA__*/",m))'
Open review/report.html (arrow keys step; side/overlay/diff toggle). The human annotates per set and clicks Export all feedback for a markdown block in audit-finding form.
Write the audit + feed the loop. Merge agent findings[] and the human's exported feedback into a design-review audit using lazyspec:create-audit (it handles where the file goes per project config). Each finding maps to a fix; after fixing, re-run steps 3–5 to confirm the delta closed.
capture.mjs is the enforcement point, not prose. It aborts off-allowlist requests and refuses non-loopback baseUrl unless --allow-remote is passed with the host in allowOrigins. If you must review a staging URL, add it to allowOrigins and pass the flag — never disable the interception.
sleep in steps. Use waitFor selectors; the script already waits on networkidle + document.fonts.ready.scale to the Figma export.Use when handed a set/batch of iterations, plans, or work slices to carry out end to end in one run — multiple iteration/story IDs to execute, ordered by blocking edges, each with review, commit, and doc-status transitions, until the whole set is done. lazyspec or any DAG-backed backlog.
Interview the user relentlessly about a plan or design. Use when the user wants to plan/design a system, break down a problem, or asks an open question.
You MUST use this skill when authoring an iteration, work slice, or "iteration document" that hands a bounded unit of work to a coding agent — drawn from a story, card, spec, or backlog. Symptoms include an iteration that bundles several acceptance criteria, restates a spec it links to, or won't finish in one agent session.
You MUST use when writing a story/user story; when decomposing a system, feature, epic, requirement, or spec into a backlog of user stories, or whenever about to write user stories or acceptance criteria during planning. Symptoms include "break this into stories", "write the backlog", "split this epic", stories that feel too big to estimate, or technical tasks masquerading as stories.
You MUST use this skill any time you are investigating a bug/unintended behaviour, before proposing fixes
Use when adding, installing, upgrading, or pinning a package/library in any language, choosing which version to use, or when install commands fail with externally-managed-environment, SSL/certificate, DNS (gaierror), or connection errors inside a sandbox.