ss-review

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Design Review

UI设计审查

Read

.styleseed/effective-rules.md

and

.styleseed/manifest.json

. If missing or stale, invoke

/ss-resolve

$ss-resolve

from

STYLESEED.md

first. Review task fitness and grammar coherence before framework conventions. For non-web artifacts, replace React/Tailwind-only checks with the active adapter's render/export checks.

阅读

.styleseed/effective-rules.md

和

.styleseed/manifest.json

文件。如果文件缺失或已过时，请先从

STYLESEED.md

中调用

/ss-resolve

或

$ss-resolve

命令。在检查框架约定之前，先确认审查任务的适用性和语法一致性。对于非Web制品，将仅针对React/Tailwind的检查替换为当前适配器的渲染/导出检查。

When NOT to use

不适用场景

For accessibility-only issues → use
```
/ss-a11y
```
For Nielsen UX heuristics → use
```
/ss-audit
```
For a quick automated check → use
```
/ss-lint
```
For non-UI code (data fetching, business rules)

Review the file: $ARGUMENTS

仅针对无障碍问题 → 使用
```
/ss-a11y
```
针对尼尔森UX启发式原则 → 使用
```
/ss-audit
```
快速自动化检查 → 使用
```
/ss-lint
```
非UI代码（数据获取、业务规则）

审查文件：$ARGUMENTS

Checklist

检查清单

1. Design Token and Recipe Compliance

1. 设计令牌与方案合规性

No hardcoded hex colors (use semantic tokens:
```
text-foreground
```
,
```
bg-brand
```
, etc.)
No hardcoded px spacing in Tailwind (use
```
p-6
```
not
```
p-[24px]
```
)
Pattern geometry/elevation uses the selected recipe or explicit semantic variables
No hardcoded universal
```
rounded-2xl + shadow + mx-6
```
language across unrelated recipes

禁止硬编码十六进制颜色（使用语义化令牌：
```
text-foreground
```
、
```
bg-brand
```
等）
Tailwind中禁止硬编码px单位的间距（使用
```
p-6
```
而非
```
p-[24px]
```
）
图案几何/层级使用选定的方案或明确的语义化变量
不同方案之间禁止使用通用的
```
rounded-2xl + shadow + mx-6
```
这类硬编码写法

2. Component Conventions

2. 组件约定

Uses
```
data-slot
```
attribute
Uses
```
cn()
```
for className merging
Props typed with
```
React.ComponentProps<>
```
Supports
```
className
```
prop override
Named export (not default export for components)
No wrapper components that only add a className

使用
```
data-slot
```
属性
使用
```
cn()
```
合并className
使用
```
React.ComponentProps<>
```
为Props类型定义
支持
```
className
```
属性覆盖
使用命名导出（组件不使用默认导出）
禁止仅添加className的包装组件

3. Accessibility (a11y)

3. 无障碍（a11y）

Touch targets >= 44x44px for interactive elements
```
focus-visible
```
styles on all interactive elements
Proper
```
aria-*
```
attributes where needed
Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)
Animations respect
```
prefers-reduced-motion
```
Images have
```
alt
```
text
Form inputs have associated labels

交互元素的触摸目标尺寸≥44x44px
所有交互元素均设置
```
focus-visible
```
样式
必要时使用正确的
```
aria-*
```
属性
颜色对比度符合WCAG AA标准（文本4.5:1，大文本3:1）
动画尊重
```
prefers-reduced-motion
```
设置
图片包含
```
alt
```
文本
表单输入框关联对应的标签

4. Surface Best Practices

4. 界面最佳实践

No horizontal overflow
Touch-friendly spacing between interactive elements
Mobile safe area insets handled when the adapter requires them
Desktop density/type and non-web canvas/export rules follow the selected adapter
Text sizes >= 12px for readability
Scrollable containers have
```
-webkit-overflow-scrolling: touch
```

无水平溢出
交互元素之间的间距符合触摸友好要求
当适配器要求时，处理移动端安全区域内边距
桌面端密度/排版及非Web画布/导出规则遵循选定的适配器
文本尺寸≥12px以保证可读性
可滚动容器设置
```
-webkit-overflow-scrolling: touch
```

5. Performance

5. 性能

No unnecessary re-renders (stable references, memoization where needed)
Images are lazy-loaded
Heavy components are code-split

无不必要的重渲染（必要时使用稳定引用、memoization）
图片启用懒加载
重型组件进行代码分割

6. Typography

6. 排版

Uses the locked type family and recipe-fit type roles
Font sizes from the 14-step scale (10-48px, see CLAUDE.md)
Proper font weights (400, 500, 600, 700)
Display text (36-48px):
```
leading-none
```
+
```
tracking-[-0.02em]
```
Heading text (18-24px):
```
leading-snug
```
+
```
tracking-[-0.01em]
```
Body text (14-17px):
```
leading-normal
```
(no custom tracking)
Caption uppercase (10-13px):
```
tracking-[0.05em]
```
or
```
tracking-wide
```
No
```
line-height: 1.5
```
on display/heading text (too loose)

使用锁定的字体族及符合方案的排版角色
字体尺寸采用14级刻度（10-48px，详见CLAUDE.md）
使用正确的字体粗细（400、500、600、700）
展示文本（36-48px）：
```
leading-none
```
+
```
tracking-[-0.02em]
```
标题文本（18-24px）：
```
leading-snug
```
+
```
tracking-[-0.01em]
```
正文文本（14-17px）：
```
leading-normal
```
（不自定义字间距）
大写说明文本（10-13px）：
```
tracking-[0.05em]
```
或
```
tracking-wide
```
展示/标题文本禁止使用
```
line-height: 1.5
```
（过于松散）

7. Spacing Consistency

7. 间距一致性

Spacing uses one maintained token scale and the selected recipe's major rhythm
Off-scale values have an optical, canvas, or platform reason
Uses
```
size-*
```
shorthand instead of
```
w-* h-*
```
Uses
```
ms-*/me-*
```
instead of
```
ml-*/mr-*
```
(logical properties)
Motion transitions use design tokens (
```
duration-[var(--duration-fast)]
```
)

间距使用统一维护的令牌刻度及选定方案的主要节奏
非标准刻度值需有视觉、画布或平台层面的合理理由
使用
```
size-*
```
简写而非
```
w-* h-*
```
使用
```
ms-*/me-*
```
而非
```
ml-*/mr-*
```
（逻辑属性）
动效过渡使用设计令牌（
```
duration-[var(--duration-fast)]
```
）

8. Coherence (VISUAL-CRAFT.md §C0 — the "one choice per axis" laws)

8. 一致性（VISUAL-CRAFT.md §C0 — "每个维度单一选择"原则）

The biggest reason a UI reads as "AI-generated" isn't ugly parts — it's mixed parts. Check that each axis below uses ONE value system-wide; flag a mix as a real issue, not a nitpick.

One radius personality — sharp (0-4px) OR soft (8-12px) OR pill, applied to every card/button/input/modal. No mixing (e.g. a
```
rounded-none
```
panel with
```
rounded-full
```
buttons).
One identifiable primary action plus only the selected grammar's stable semantic, categorical, or brand roles — no competing decorative emphasis hues.
No emoji as UI icons (🚗🧺⭐ as list/nav/status/category markers) — they inject many uncontrolled hues; use one line-icon set in
```
currentColor
```
.
Status color = severity, not decoration — a normal/OK/"보통" state is neutral grey (not colored); color marks only the minority of rows that need attention; same value → same color.
No decorative hues — favorite stars, category dots, avatars use the accent or grey, not a new color each.
One shadow language — same light direction, same scale/tint; not some black + some tinted, some up-lit + some down-lit.
One icon family / fill mode / stroke weight across the file.
Nested-radius law — an element inside a rounded container uses
```
inner = outer − padding
```
, not the same radius (which bulges).
Consistent control heights — buttons, inputs, selects share a height set (e.g. 40px).
Errors/states never rely on color alone (icon + text too).

UI看起来像"AI生成"的最大原因不是部分丑陋，而是混搭。检查以下每个维度在全系统中是否仅使用一种值；若发现混搭，需将其标记为真实问题，而非细枝末节的挑剔。

单一圆角风格 — 锐利（0-4px）、柔和（8-12px）或胶囊形，应用于所有卡片/按钮/输入框/模态框。禁止混搭（例如
```
rounded-none
```
面板搭配
```
rounded-full
```
按钮）。
单一可识别的主操作，仅使用选定语法中稳定的语义化、分类或品牌角色 — 无相互竞争的装饰性强调色调。
禁止使用emoji作为UI图标（🚗🧺⭐作为列表/导航/状态/分类标记）—— 它们会引入许多不受控的色调；使用一套
```
currentColor
```
的线性图标集。
状态颜色=严重性，而非装饰 — 正常/OK/"보통"状态为中性灰色（非彩色）；颜色仅标记少数需要关注的行；相同值对应相同颜色。
无装饰性色调 — 收藏星、分类点、头像使用强调色或灰色，而非每种使用新颜色。
单一阴影风格 — 相同的光照方向、相同的刻度/色调；禁止部分黑色阴影+部分着色阴影、部分向上打光+部分向下打光。
单一图标家族/填充模式/描边粗细贯穿整个文件。
嵌套圆角规则 — 圆角容器内的元素使用
```
内圆角 = 外圆角 - 内边距
```
，而非相同圆角（否则会出现凸起）。
一致的控件高度 — 按钮、输入框、选择框共享同一高度设置（例如40px）。
错误/状态从不单独依赖颜色（需同时搭配图标+文本）。

Output Format

输出格式

Provide:

Score: Pass / Needs Improvement / Fail
Issues: List each violation with file:line reference
Fixes: Concrete code changes for each issue

请提供：

评分：通过 / 需要改进 / 不通过
问题：列出每个违规项及文件:行号引用
修复方案：针对每个问题的具体代码修改