Back to Details

workbench-frontend-design-qa

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Workbench Frontend Design QA

工作台前端设计QA

Use this skill for frontend UI, desktop/web surfaces, screenshots, responsive checks, interaction polish, and design-system consistency.
使用此技能进行前端UI、桌面/网页界面、截图、响应式检查、交互优化及设计系统一致性校验。

QA Standard

QA标准

  • Test the actual screen or rendered artifact, not just source code.
  • Check desktop and mobile or narrow-width behavior when the UI is responsive.
  • Verify text fit, no incoherent overlap, stable spacing, focus states, hover states, loading states, empty states, and error states.
  • For operational tools, prefer dense, scannable, predictable layouts over marketing-style pages.
  • Use real assets or rendered UI evidence when visual truth matters.
  • 测试实际屏幕或渲染产物，而非仅源代码。
  • 当UI为响应式时，检查桌面端和移动端或窄屏显示行为。
  • 验证文本适配、无不合理重叠、间距稳定、焦点状态、悬停状态、加载状态、空状态及错误状态。
  • 对于操作类工具，优先选择紧凑、易扫描、可预测的布局，而非营销风格页面。
  • 当视觉真实性至关重要时，使用真实资源或渲染后的UI证据。

Design Checks

设计检查

  • Information hierarchy is clear at first glance.
  • Primary action is obvious and not visually drowned by decoration.
  • Controls match their job: icon buttons for tools, toggles for binary state, tabs for views, menus for option sets.
  • Cards are not nested inside cards unless the local design system already does that.
  • Colors are not a one-note palette and contrast is readable.
  • Motion or animation does not hide state or slow repeated work.
  • 信息层级一目了然。
  • 主要操作清晰可见，不会被装饰元素掩盖。
  • 控件与其用途匹配：工具类使用图标按钮，二元状态使用切换开关，视图切换使用标签页，选项集合使用菜单。
  • 卡片不应嵌套在卡片内，除非本地设计系统已有此规范。
  • 配色不应单调，且对比度需满足可读性要求。
  • 动效或动画不应隐藏状态或拖慢重复操作流程。

Output Contract

输出约定

Return:
  • DESIGN_VERDICT
    : PASS / FLAG / BLOCK.
  • SURFACES CHECKED
    : URL, file, viewport, screenshot, or app surface.
  • FINDINGS
    : severity, location, and fix.
  • EVIDENCE
    : screenshot path, browser check, or command output.
  • NEXT ACTION
    : smallest design or implementation correction.
返回：
  • DESIGN_VERDICT
    : PASS / FLAG / BLOCK.
  • SURFACES CHECKED
    : URL, file, viewport, screenshot, or app surface.
  • FINDINGS
    : severity, location, and fix.
  • EVIDENCE
    : screenshot path, browser check, or command output.
  • NEXT ACTION
    : smallest design or implementation correction.