---
name: frontend-design-review
description: 在实现或审查前端页面、落地页、作品集、重新设计、视觉风格或界面细节优化时使用。适用于先判断页面类型、受众、设计语言和反 AI 默认风格，再给出设计或评审结论。
---

# 前端设计读题与审查

## 目标

先读清页面的业务语境和审美方向，再设计或审查。避免默认套用 AI 常见模板。

## 何时使用

- 落地页、作品集、品牌页、营销页、重新设计
- 用户说页面 AI 味重、不高级、不符合风格
- 有截图、参考站点、品牌资产或已有设计系统
- 需要在动手前判断界面应该走什么设计语言

## 何时不要使用

- 纯表单修缺陷、数据表格业务逻辑、API 或状态管理问题
- 用户已经给了明确设计稿，只需要按稿实现
- 后台运营/CRM/SaaS 工具只需要密度、层级、可用性检查时，按项目现有设计系统优先

## 设计理解

动手前用一句话写清：

```text
将此页面理解为：面向 <受众> 的 <页面类型>，采用 <风格语言>，受 <品牌/系统/场景> 约束。
```

先读这些信号：

- 页面类型：落地页、作品集、文档、仪表盘、杂志编辑风格、重新设计
- 受众：技术买家、招聘方、消费者、运营人员、内部用户、公共服务用户
- 用户词汇：极简、高端、严肃、活泼、杂志编辑风格、粗野主义、信任优先
- 参考信号：截图、URL、竞品、品牌名、已有标志、颜色、字体和照片
- 安静约束：可访问性、监管、信任、企业采购、移动端、重复使用频率

如果设计理解分叉很大，只问一个会改变方向的问题；能从上下文推断就直接声明并继续。

## 默认模板倾向检查

除非设计需求明确要求，不要默认使用：

- 紫蓝渐变、发光网格、散景或光球背景
- 居中大首屏主视觉加三张功能卡片
- 泛玻璃质感、过量圆角、无意义微动效
- 暗色科技风、Inter + slate 单色调、模板化 SaaS 版式
- 和实际产品/场景无关的图库素材式氛围图

## 审查重点

- 视觉语言是否服务受众，而不是展示模型审美偏好
- 信息密度是否匹配场景：工具类要可扫读，营销类要有第一屏信号
- 品牌、产品或对象是否在第一视口足够明确
- 文案、按钮、导航和状态是否符合已有产品术语
- 移动端和桌面是否都没有文字溢出、遮挡或布局跳动
- 重新设计是否保留应保留的资产和用户习惯，还是无依据地推倒重来

## 输出要求

- 先给 `设计理解`
- 再给 3-5 条最重要的设计判断或修改建议
- 避免泛泛说“更现代”“更高级”；每条建议要能落到布局、层级、颜色、字体、动效、资产或文案