npx skills add https://github.com/dylanfeltus/skills --skill visual-qa使用视觉模型根据设计意图对截图进行自我审查。在发布前发现间距问题、对齐问题、颜色不一致、响应式错误和可访问性差距。
使用以下方法之一获取截图:
通过浏览器工具:
browser: screenshot (captures the current page)
通过节点屏幕捕获(如果可用):
nodes: screen_record
通过 Peekaboo (macOS):
exec: peekaboo screenshot
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
用户提供: 用户可能直接粘贴/附加截图。
使用 image 工具分析截图:
image: [截图路径或URL]
prompt: "审查此UI截图的设计质量..."
根据以下类别(按优先级排序)分析截图:
检查:
常见问题:
检查:
常见问题:
检查:
常见问题:
检查:
常见问题:
检查:
常见问题:
检查:
常见问题:
检查:
### 视觉质量检查审查
**总体印象:** [一句话——第一直觉反应]
**质量评分:** [1-10] / 10
#### 🔴 关键问题(发布前必须修复)
1. **[类别]:** [具体问题,包含确切细节]
→ **修复建议:** [可操作的建议]
#### 🟡 改进建议(应该修复)
1. **[类别]:** [具体问题]
→ **修复建议:** [建议]
#### 🟢 细微优化(最好修复)
1. **[类别]:** [具体问题]
→ **修复建议:** [建议]
#### ✅ 表现良好的方面
- [具体的赞扬——执行得好的地方]
- [另一个优点]
### 快速质量检查:[页面/组件名称]
评分:[X]/10
前3个修复项:
1. [影响最大的问题 + 修复建议]
2. [第二个问题 + 修复建议]
3. [第三个问题 + 修复建议]
表现良好:[哪些方面做得好]
### 设计与实现对比审查
**保真度评分:** [1-10] / 10
#### 发现的偏差
1. **[元素]:** 设计稿显示 [X],实现为 [Y]
影响:[高/中/低]
→ **修复建议:** [如何匹配设计稿]
#### 匹配良好的方面
- [准确匹配设计的元素]
根据你的需求,将这些提示词与 image 工具一起使用:
Review this UI screenshot for design quality. Check spacing consistency,
typography hierarchy, color contrast, visual hierarchy, and component
quality. Be specific about issues — reference exact elements and suggest
fixes. Prioritize by impact.
Analyze the spacing and layout of this UI. Check if elements follow a
consistent spacing grid, if padding within similar components matches,
if alignment is correct, and if the overall spacing rhythm feels right.
Note any elements that appear off-grid or inconsistently spaced.
Compare these two images. The first is the design mockup, the second is
the implementation. Identify every deviation — differences in spacing,
color, typography, alignment, or missing elements. Rate the fidelity
on a 1-10 scale.
Review this mobile screenshot for responsive design quality. Check that
text is readable, touch targets are large enough (≥44px), nothing
overflows the viewport, and the layout adapts well to the narrow width.
Review this UI screenshot for visual accessibility. Check text contrast
against backgrounds, focus indicator visibility, touch target sizes,
color-only information (anything that relies solely on color to convey
meaning), and text readability at the shown sizes.
image: [screenshot path]
prompt: "Review this landing page for design quality. Check spacing
consistency, typography hierarchy, visual hierarchy (where does the eye
go first?), CTA prominence, color contrast, and overall polish. Be
specific about issues and suggest fixes. Rate 1-10."
image: [mockup.png, implementation.png]
prompt: "Compare these two images. First is the Figma mockup, second
is the implementation. Identify every deviation in spacing, color,
typography, alignment, and missing elements. Rate fidelity 1-10."
image: [mobile-screenshot.png]
prompt: "Review this mobile UI. Is text readable? Are touch targets
large enough (≥44px)? Does anything overflow? Is the layout well-adapted
to mobile width? Check contrast and spacing."
每周安装次数
137
代码仓库
GitHub 星标数
173
首次出现
2026年2月19日
安全审计
安装于
opencode123
codex123
gemini-cli121
github-copilot115
kimi-cli112
amp111
Use vision models to self-review screenshots against design intent. Catch spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps before shipping.
Use one of these methods to get a screenshot:
Via browser tool:
browser: screenshot (captures the current page)
Via node screen capture (if available):
nodes: screen_record
Via Peekaboo (macOS):
exec: peekaboo screenshot
User-provided: The user may paste/attach a screenshot directly.
Use the image tool to analyze the screenshot:
image: [path or URL to screenshot]
prompt: "Review this UI screenshot for design quality..."
Analyze the screenshot against these categories (in priority order):
Check for:
Common issues:
Check for:
Common issues:
Check for:
Common issues:
Check for:
Common issues:
Check for:
Common issues:
Check for:
Common issues:
Check for:
### Visual QA Review
**Overall impression:** [One sentence — first gut reaction]
**Quality score:** [1-10] / 10
#### 🔴 Critical Issues (fix before shipping)
1. **[Category]:** [Specific issue with exact details]
→ **Fix:** [Actionable recommendation]
#### 🟡 Improvements (should fix)
1. **[Category]:** [Specific issue]
→ **Fix:** [Recommendation]
#### 🟢 Minor Polish (nice to fix)
1. **[Category]:** [Specific issue]
→ **Fix:** [Recommendation]
#### ✅ What's Working Well
- [Specific praise — what's well-executed]
- [Another positive]
### Quick QA: [Page/Component Name]
Score: [X]/10
Top 3 fixes:
1. [Most impactful issue + fix]
2. [Second issue + fix]
3. [Third issue + fix]
Looks good: [What's working]
### Design vs Implementation Review
**Fidelity score:** [1-10] / 10
#### Deviations Found
1. **[Element]:** Mockup shows [X], implementation has [Y]
Impact: [High/Medium/Low]
→ **Fix:** [How to match the mockup]
#### Matching Well
- [Elements that accurately match the design]
Use these prompts with the image tool depending on what you need:
Review this UI screenshot for design quality. Check spacing consistency,
typography hierarchy, color contrast, visual hierarchy, and component
quality. Be specific about issues — reference exact elements and suggest
fixes. Prioritize by impact.
Analyze the spacing and layout of this UI. Check if elements follow a
consistent spacing grid, if padding within similar components matches,
if alignment is correct, and if the overall spacing rhythm feels right.
Note any elements that appear off-grid or inconsistently spaced.
Compare these two images. The first is the design mockup, the second is
the implementation. Identify every deviation — differences in spacing,
color, typography, alignment, or missing elements. Rate the fidelity
on a 1-10 scale.
Review this mobile screenshot for responsive design quality. Check that
text is readable, touch targets are large enough (≥44px), nothing
overflows the viewport, and the layout adapts well to the narrow width.
Review this UI screenshot for visual accessibility. Check text contrast
against backgrounds, focus indicator visibility, touch target sizes,
color-only information (anything that relies solely on color to convey
meaning), and text readability at the shown sizes.
image: [screenshot path]
prompt: "Review this landing page for design quality. Check spacing
consistency, typography hierarchy, visual hierarchy (where does the eye
go first?), CTA prominence, color contrast, and overall polish. Be
specific about issues and suggest fixes. Rate 1-10."
image: [mockup.png, implementation.png]
prompt: "Compare these two images. First is the Figma mockup, second
is the implementation. Identify every deviation in spacing, color,
typography, alignment, and missing elements. Rate fidelity 1-10."
image: [mobile-screenshot.png]
prompt: "Review this mobile UI. Is text readable? Are touch targets
large enough (≥44px)? Does anything overflow? Is the layout well-adapted
to mobile width? Check contrast and spacing."
Weekly Installs
137
Repository
GitHub Stars
173
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode123
codex123
gemini-cli121
github-copilot115
kimi-cli112
amp111
GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题
36,800 周安装