Back to Details

ui-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Review Agent

UI审查Agent

Use to verify frontend changes comply with Swiss International Style before committing.
用于在提交前验证前端变更是否符合瑞士国际风格。

Review Process

审查流程

Step 1: Run automated checks

步骤1：运行自动化检查

bash
undefined
bash
undefined

Check for forbidden rounded corners

Check for forbidden rounded corners

rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Check for gradient usage (forbidden)

Check for gradient usage (forbidden)

rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Check for soft shadows (should be hard only)

Check for soft shadows (should be hard only)

rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Check for blur effects (forbidden)

Check for blur effects (forbidden)

rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Check for off-palette colors

Check for off-palette colors

rg 'bg-(red|green|blue|yellow|purple|pink|indigo|teal|cyan|emerald|violet|fuchsia|rose|sky|lime|amber|stone|zinc|neutral|slate)-[0-9]' apps/frontend/ --glob '*.tsx' --no-heading -n
rg 'bg-(red|green|blue|yellow|purple|pink|indigo|teal|cyan|emerald|violet|fuchsia|rose|sky|lime|amber|stone|zinc|neutral|slate)-[0-9]' apps/frontend/ --glob '*.tsx' --no-heading -n

Verify hard shadows are used

Verify hard shadows are used

rg 'shadow-[' apps/frontend/ --glob '*.tsx' --no-heading -n
undefined
rg 'shadow-\[' apps/frontend/ --glob '*.tsx' --no-heading -n
undefined

Step 2: Manual review checklist

步骤2：人工审查清单

For each changed file:
针对每个变更文件：

Colors

颜色

  • Background uses Canvas 
    #F0F0E8
    or white
  • Text uses Ink 
    #000000
    (no grey for main text)
  • Links use Hyper Blue 
    #1D4ED8
  • Success states use Signal Green 
    #15803D
  • Error states use Alert Red 
    #DC2626
  • Warning states use Alert Orange 
    #F97316
  • No colors outside the Swiss palette
  • 背景使用Canvas 
    #F0F0E8
    或白色
  • 文本使用Ink 
    #000000
    （主文本不得使用灰色）
  • 链接使用Hyper Blue 
    #1D4ED8
  • 成功状态使用Signal Green 
    #15803D
  • 错误状态使用Alert Red 
    #DC2626
  • 警告状态使用Alert Orange 
    #F97316
  • 不得使用瑞士调色板以外的颜色

Typography

排版

  • Headers use 
    font-serif
  • Body text uses 
    font-sans
  • Labels/metadata use 
    font-mono text-sm uppercase tracking-wider
  • No decorative fonts
  • 标题使用
    font-serif
  • 正文使用
    font-sans
  • 标签/元数据使用
    font-mono text-sm uppercase tracking-wider
  • 不得使用装饰性字体

Borders & Shadows

边框与阴影

  • All elements use 
    rounded-none
  • Borders are 
    border-2 border-black
    (or 
    border
    )
  • Shadows are hard: 
    shadow-[Xpx_Xpx_0px_0px_#000000]
  • Hover effects translate into shadow space
  • 所有元素使用
    rounded-none
  • 边框为
    border-2 border-black
    （或
    border
    ）
  • 阴影为硬阴影：
    shadow-[Xpx_Xpx_0px_0px_#000000]
  • 悬停效果转换为阴影空间

Components

组件

  • Buttons: square corners, hard shadow, press effect
  • Cards: white bg, black border, hard shadow
  • Inputs: 
    rounded-none
    , black border
  • Labels: mono, uppercase, tracking-wider
  • Status dots: 
    w-3 h-3
    with no border-radius
  • 按钮：方形边角、硬阴影、按压效果
  • 卡片：白色背景、黑色边框、硬阴影
  • 输入框：
    rounded-none
    、黑色边框
  • 标签：等宽字体、大写、加宽字距
  • 状态点：
    w-3 h-3
    且无圆角

Layout

布局

  • Grid-based layouts
  • Consistent spacing (multiples of 4)
  • Mobile-first responsive breakpoints
  • 基于网格的布局
  • 间距一致（4的倍数）
  • 移动端优先的响应式断点

Swiss Design System

瑞士设计系统

Allowed Colors

允许使用的颜色

NameHexTailwind
Canvas
#F0F0E8
bg-[#F0F0E8]
Ink
#000000
text-black
White
#FFFFFF
bg-white
Hyper Blue
#1D4ED8
text-blue-700
/ 
bg-blue-700
Signal Green
#15803D
text-green-700
Alert Orange
#F97316
text-orange-500
Alert Red
#DC2626
text-red-600
Steel Grey
#4B5563
text-gray-600
名称十六进制码Tailwind
Canvas
#F0F0E8
bg-[#F0F0E8]
Ink
#000000
text-black
White
#FFFFFF
bg-white
Hyper Blue
#1D4ED8
text-blue-700
/ 
bg-blue-700
Signal Green
#15803D
text-green-700
Alert Orange
#F97316
text-orange-500
Alert Red
#DC2626
text-red-600
Steel Grey
#4B5563
text-gray-600

Component Templates

组件模板

tsx
// Correct button
<button className="rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all">

// Correct card
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">

// Correct label
<label className="font-mono text-sm uppercase tracking-wider">

// Correct status indicator
<div className="w-3 h-3 bg-green-700" />
tsx
// Correct button
<button className="rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all">

// Correct card
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">

// Correct label
<label className="font-mono text-sm uppercase tracking-wider">

// Correct status indicator
<div className="w-3 h-3 bg-green-700" />

Anti-Pattern Quick Scan

反模式快速扫描

If ANY of these appear in changed files, flag immediately:
Anti-PatternWhy
rounded-sm/md/lg/xl/full
Swiss style: sharp corners only
bg-gradient-*
No gradients allowed
shadow-sm/md/lg/xl
Must use hard 
shadow-[...]
blur-*
/ 
backdrop-blur
No blur effects
opacity-*
(decorative)		Flat, opaque elements only
Pastel colorsSwiss palette is bold
animate-pulse/bounce
Minimal animation only
如果变更文件中出现以下任何一项，需立即标记：
反模式原因
rounded-sm/md/lg/xl/full
瑞士风格：仅允许尖角
bg-gradient-*
不允许使用渐变
shadow-sm/md/lg/xl
必须使用硬阴影
shadow-[...]
blur-*
/ 
backdrop-blur
不允许使用模糊效果
opacity-*
（装饰性用途）		仅允许扁平、不透明元素
马卡龙色瑞士调色板为大胆鲜明的颜色
animate-pulse/bounce
仅允许极少的动画效果

Retro Terminal Elements

复古终端元素

For dashboard/settings/empty states ONLY (not resume content):
tsx
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
Never use retro elements on resume editing or PDF preview areas.
仅可用于仪表盘/设置/空状态（不得用于简历内容）：
tsx
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
切勿在简历编辑或PDF预览区域使用复古元素。

Reference

参考

Full design system: 
docs/agent/design/style-guide.md
Extended tokens: 
docs/agent/design/design-system.md
完整设计系统：
docs/agent/design/style-guide.md
扩展令牌：
docs/agent/design/design-system.md