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

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

Check for gradient usage (forbidden)

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

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

Check for blur effects (forbidden)

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

Check for off-palette colors

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

允许使用的颜色

Name	Hex	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`

名称	十六进制码	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-Pattern	Why
`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 colors	Swiss 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