Agent Skills
› AjayIrkal23/agentic-mercy-10x
› design-review-playwright
design-review-playwright
GitHub用于视觉QA，通过Playwright截图对比实现与设计规范（Figma/DESIGN.md）。检查间距、排版、颜色、响应式及交互状态，确保UI一致性。
Trigger Scenarios
需要验证前端界面是否符合设计稿
执行UI像素级对比测试
Install
npx skills add AjayIrkal23/agentic-mercy-10x --skill design-review-playwright -g -y
SKILL.md
Frontmatter
{
"name": "design-review-playwright",
"schema": 1,
"category": "review",
"surfaces": [
"backend",
"frontend"
],
"triggers": {
"paths": [],
"intents": [
"review"
],
"keywords": [
"adapted",
"against",
"design",
"design-review",
"gstack",
"live",
"playwright",
"review",
"screenshots",
"specs",
"visual"
]
},
"platforms": [
"linux",
"darwin",
"windows"
],
"token-cost": 182,
"description": "ALWAYS invoke for live visual QA against design specs using Playwright screenshots (adapted from GStack \/design-review)."
}
Design Review with Playwright
Visual QA comparing implementation against design specs.
Steps
- Screenshot the implementation:
mcp__playwright__browser_take_screenshot - Compare against design spec (Figma URL, mockup, or DESIGN.md)
- Check spacing, typography, colors, alignment
- Responsive — screenshot at 320px, 768px, 1440px
- Interactive states — hover, focus, active, disabled
- Dark mode if applicable
Checklist
- Layout matches spec
- Typography (font, size, weight, line-height)
- Colors match design tokens
- Spacing follows 4/8dp rhythm
- Interactive states present
- Responsive at all breakpoints
- Accessibility (contrast, labels, keyboard)
Version History
- 581d130 Current 2026-07-19 09:06
