Back to Details

visual-qa

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Visual QA

视觉QA

Use vision models to self-review screenshots against design intent. Catch spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps before shipping.
使用视觉模型对照设计意图自动审查截图。在上线前捕捉间距问题、对齐问题、颜色不一致、响应式Bug以及可访问性缺陷。

When to Use

适用场景

  • User asks to "review this design" or "check this screenshot"
  • After building a page/component, before shipping
  • User wants to compare implementation vs mockup/reference
  • User asks "does this look right?" or "what's off about this?"
  • Automated design QA step in a build workflow
  • 用户要求“审查这个设计”或“检查这张截图”
  • 完成页面/组件开发后，上线前
  • 用户希望对比实现效果与原型/参考设计
  • 用户询问“这个看起来对吗？”或“哪里有问题？”
  • 构建工作流中的自动化设计QA步骤

Core Philosophy

核心原则

  • Screenshot first, then critique. Always look at the actual rendered output, not just the code.
  • Be specific. "The spacing looks off" is useless. "The gap between the heading and paragraph is 32px but should be 16px based on the surrounding spacing rhythm" is useful.
  • Prioritize impact. Not every pixel matters. Focus on what users will actually notice.
  • Reference the intent. Compare against design tokens, mockups, or stated design goals.
  • 先截图，再审查。始终查看实际渲染效果，而不只是代码。
  • 具体明确。“间距看起来不对”毫无用处。“标题与段落之间的间距是32px，但根据整体间距规范应该是16px”才是有效反馈。
  • 优先影响。不是每个像素都重要。聚焦用户实际会注意到的问题。
  • 参考设计意图。对照设计令牌、原型或明确的设计目标进行对比。

How to Review

审查步骤

Step 1: Capture the Screenshot

步骤1：截取截图

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.
使用以下方法之一获取截图：
通过浏览器工具：
browser: screenshot (captures the current page)
通过Node截图工具（如果可用）：
nodes: screen_record
通过Peekaboo（macOS）：
exec: peekaboo screenshot
用户提供： 用户可能直接粘贴/附加截图。

Step 2: Analyze with Vision

步骤2：用视觉模型分析

Use the 
image
tool to analyze the screenshot:
image: [path or URL to screenshot]
prompt: "Review this UI screenshot for design quality..."
使用
image
工具分析截图：
image: [path or URL to screenshot]
prompt: "Review this UI screenshot for design quality..."

Step 3: Structured Review

步骤3：结构化审查

Analyze the screenshot against these categories (in priority order):
对照以下类别（按优先级排序）分析截图：

Review Categories

审查类别

1. Layout & Spacing

1. 布局与间距

Check for:
  • Consistent spacing rhythm (is everything on the spacing grid?)
  • Alignment — are elements that should be aligned actually aligned?
  • Padding consistency within similar components
  • Container widths and max-widths
  • Responsive behavior (if multiple viewport screenshots available)
Common issues:
  • Inconsistent padding in cards (e.g., 24px top, 16px sides)
  • Elements slightly off-grid (15px instead of 16px)
  • Text not aligned with adjacent elements
  • Sections with wildly different vertical spacing
检查要点：
  • 间距规范一致性（所有元素是否遵循间距网格？）
  • 对齐情况——应该对齐的元素是否确实对齐？
  • 同类组件内的内边距一致性
  • 容器宽度与最大宽度
  • 响应式表现（如果有多视口截图）
常见问题：
  • 卡片内边距不一致（例如顶部24px，侧边16px）
  • 元素偏离网格（15px而非16px）
  • 文本与相邻元素未对齐
  • 各区块垂直间距差异过大

2. Typography

2. 排版

Check for:
  • Hierarchy — is it clear what's a heading vs body vs caption?
  • Line length — body text should be 45–75 characters per line
  • Line height — too tight or too loose for the font size?
  • Font weight usage — are weights used consistently for the same role?
  • Orphans/widows — single words on their own line in headings
Common issues:
  • Heading that doesn't look like a heading (weight/size too close to body)
  • Body text line length > 80 characters (hard to read)
  • Inconsistent heading sizes across sections
  • All-caps text without letter-spacing adjustment
检查要点：
  • 层级结构——标题、正文、说明文字的区分是否清晰？
  • 行长度——正文每行应45-75个字符
  • 行高——相对于字号是否过紧或过松？
  • 字体粗细使用——相同作用的文本是否粗细一致？
  • 孤行/ widow——标题中单独一行的单个单词
常见问题：
  • 标题看起来不像标题（粗细/字号与正文过于接近）
  • 正文行长度超过80字符（难以阅读）
  • 不同区块的标题大小不一致
  • 全大写文本未调整字母间距

3. Color & Contrast

3. 颜色与对比度

Check for:
  • Text/background contrast (does it look readable?)
  • Consistent use of brand colors
  • Color meaning consistency (is the same blue used for links AND errors?)
  • Dark mode issues (if applicable)
  • Hover/active state visibility
Common issues:
  • Light gray text on white background (contrast fail)
  • Primary color used for too many different purposes
  • Borders that are nearly invisible
  • Status colors that conflict (green for danger, red for success)
检查要点：
  • 文本/背景对比度（是否易于阅读？）
  • 品牌颜色使用一致性
  • 颜色含义一致性（是否同一蓝色同时用于链接和错误提示？）
  • 深色模式问题（如果适用）
  • 悬停/激活状态的可见性
常见问题：
  • 白色背景上的浅灰色文本（对比度不达标）
  • 主色被用于过多不同用途
  • 边框几乎不可见
  • 状态颜色冲突（绿色表示危险，红色表示成功）

4. Visual Hierarchy

4. 视觉层级

Check for:
  • Eye flow — where does the eye go first? Is that correct?
  • CTA prominence — is the primary action the most visible element?
  • Information density — too sparse or too crowded?
  • Grouping — are related items visually grouped?
  • White space — is it used intentionally or just leftover?
Common issues:
  • Two equally prominent CTAs competing for attention
  • Important information buried below less important elements
  • Sections that feel disconnected from each other
  • Dense walls of text without visual breaks
检查要点：
  • 视觉流向——用户第一眼会看哪里？是否符合设计预期？
  • CTA突出性——主要操作是否是最显眼的元素？
  • 信息密度——过于稀疏或过于拥挤？
  • 分组——相关项是否在视觉上分组？
  • 留白——是有意使用还是剩余空间？
常见问题：
  • 两个同等突出的CTA相互竞争注意力
  • 重要信息被埋在次要信息下方
  • 各区块之间感觉脱节
  • 密集的文本墙没有视觉分隔

5. Component Quality

5. 组件质量

Check for:
  • Button sizing and padding consistency
  • Input field styling consistency
  • Card styling consistency (shadows, borders, radius)
  • Icon sizing and alignment with text
  • Image aspect ratios and cropping
Common issues:
  • Buttons with inconsistent padding or height
  • Mixed border-radius values (some 8px, some 12px, some 4px)
  • Icons misaligned with adjacent text baselines
  • Images stretched or poorly cropped
检查要点：
  • 按钮尺寸与内边距一致性
  • 输入框样式一致性
  • 卡片样式一致性（阴影、边框、圆角）
  • 图标尺寸与文本对齐
  • 图片比例与裁剪
常见问题：
  • 按钮内边距或高度不一致
  • 圆角值混合使用（有的8px，有的12px，有的4px）
  • 图标与相邻文本基线未对齐
  • 图片被拉伸或裁剪不当

6. Polish & Micro-details

6. 细节打磨

Check for:
  • Hover states exist and are visible
  • Focus states for keyboard navigation
  • Loading states (skeleton screens, spinners)
  • Empty states (what shows when there's no data?)
  • Transitions between states (abrupt vs smooth)
  • Favicon and OG image (if reviewing a full page)
Common issues:
  • No hover state on interactive elements
  • Focus ring removed with no replacement
  • Abrupt content shifts when data loads
  • No empty state — just a blank area
检查要点：
  • 存在悬停状态且可见
  • 键盘导航的焦点状态
  • 加载状态（骨架屏、加载动画）
  • 空状态（无数据时显示什么？）
  • 状态间的过渡（突兀还是平滑？）
  • 网站图标和OG图像（如果审查整页）
常见问题：
  • 可交互元素没有悬停状态
  • 移除了焦点环但未替代
  • 数据加载时内容突然移位
  • 没有空状态——仅显示空白区域

7. Responsive Issues (if multiple viewports available)

7. 响应式问题（如果有多视口截图）

Check for:
  • Content readable on mobile (not too small)
  • Touch targets ≥ 44px on mobile
  • Navigation accessible on small screens
  • Images not overflowing containers
  • Horizontal scroll (almost always a bug)
检查要点：
  • 移动端内容可读（不会过小）
  • 移动端触摸目标≥44px
  • 小屏幕上导航可访问
  • 图片不会溢出容器
  • 水平滚动（几乎总是Bug）

Output Format

输出格式

Full Review

完整审查报告

undefined
undefined

Visual QA Review

Visual QA Review

Overall impression: [One sentence — first gut reaction] Quality score: [1-10] / 10
Overall impression: [One sentence — first gut reaction] Quality score: [1-10] / 10

🔴 Critical Issues (fix before shipping)

🔴 Critical Issues (fix before shipping)

  1. [Category]: [Specific issue with exact details] → Fix: [Actionable recommendation]
  1. [Category]: [Specific issue with exact details] → Fix: [Actionable recommendation]

🟡 Improvements (should fix)

🟡 Improvements (should fix)

  1. [Category]: [Specific issue] → Fix: [Recommendation]
  1. [Category]: [Specific issue] → Fix: [Recommendation]

🟢 Minor Polish (nice to fix)

🟢 Minor Polish (nice to fix)

  1. [Category]: [Specific issue] → Fix: [Recommendation]
  1. [Category]: [Specific issue] → Fix: [Recommendation]

✅ What's Working Well

✅ What's Working Well

  • [Specific praise — what's well-executed]
  • [Another positive]
undefined
  • [Specific praise — what's well-executed]
  • [Another positive]
undefined

Quick Review

快速审查报告

undefined
undefined

Quick QA: [Page/Component Name]

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]
undefined
Score: [X]/10
Top 3 fixes:
  1. [Most impactful issue + fix]
  2. [Second issue + fix]
  3. [Third issue + fix]
Looks good: [What's working]
undefined

Comparison Review (Implementation vs Mockup)

对比审查报告（实现效果与原型）

undefined
undefined

Design vs Implementation Review

Design vs Implementation Review

Fidelity score: [1-10] / 10
Fidelity score: [1-10] / 10

Deviations Found

Deviations Found

  1. [Element]: Mockup shows [X], implementation has [Y] Impact: [High/Medium/Low] → Fix: [How to match the mockup]
  1. [Element]: Mockup shows [X], implementation has [Y] Impact: [High/Medium/Low] → Fix: [How to match the mockup]

Matching Well

Matching Well

  • [Elements that accurately match the design]

---
  • [Elements that accurately match the design]

---

Review Prompts for Vision Model

视觉模型审查提示词

Use these prompts with the 
image
tool depending on what you need:
根据需求，结合
image
工具使用以下提示词：

General Review

通用审查

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.
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.

Spacing & Layout Focus

间距与布局聚焦

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.
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.

Comparison Review

对比审查

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.
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.

Responsive Check

响应式检查

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 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.

Accessibility Focus

可访问性聚焦

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.
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.

Integration with Build Workflow

工作流集成

After Building a Component

组件开发完成后

  1. Render the component in the browser
  2. Take a screenshot
  3. Run visual QA review
  4. Fix issues
  5. Re-screenshot and verify
  1. 在浏览器中渲染组件
  2. 截取截图
  3. 运行视觉QA审查
  4. 修复问题
  5. 重新截图并验证

After Building a Full Page

整页开发完成后

  1. Screenshot at desktop (1440px), tablet (768px), and mobile (375px)
  2. Run responsive review across all three
  3. Run full review on the desktop version
  4. Fix issues, prioritizing critical ones
  1. 在桌面端（1440px）、平板端（768px）、移动端（375px）分别截图
  2. 对三个视口进行响应式审查
  3. 对桌面端版本进行完整审查
  4. 修复问题，优先处理严重问题

Comparing to a Mockup

与原型对比

  1. Get the mockup image (Figma export, screenshot, user-provided)
  2. Screenshot the implementation at the same viewport size
  3. Run comparison review
  4. Fix deviations by priority
  1. 获取原型图（Figma导出、截图或用户提供）
  2. 在相同视口尺寸下截取实现效果的截图
  3. 运行对比审查
  4. 按优先级修复差异

Examples

示例

Example 1: "Review this landing page screenshot"

示例1：“审查这个落地页截图”

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: [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."

Example 2: "Does my implementation match this Figma design?"

示例2：“我的实现效果和这个Figma设计匹配吗？”

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: [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."

Example 3: "Check if this component looks good on mobile"

示例3：“检查这个组件在移动端的表现是否良好”

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."
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."