frontend-design-review · diff

git:20260905.751659e to git:20260919.7add278

18 added, 53 removed. Audit A to A.

---
name: frontend-design-review
- description: 在实现或审查前端页面、落地页、作品集、重新设计、视觉风格或界面细节优化时使用。适用于先判断页面类型、受众、设计语言和反 AI 默认风格，再给出设计或评审结论。
+ description: 在确定或审查前端页面、落地页、作品集和重新设计的视觉方向时使用；区分只读审查、方向建议和已授权实现，并用真实截图或渲染验证视觉结论。不用于纯业务逻辑、状态管理或已经有明确设计稿的机械实现。
---
# 前端设计读题与审查
- ## 目标
-
- 先读清页面的业务语境和审美方向，再设计或审查。避免默认套用 AI 常见模板。
-
- ## 何时使用
-
- - 落地页、作品集、品牌页、营销页、重新设计
- - 用户说页面 AI 味重、不高级、不符合风格
- - 有截图、参考站点、品牌资产或已有设计系统
- - 需要在动手前判断界面应该走什么设计语言
-
- ## 何时不要使用
-
- - 纯表单修缺陷、数据表格业务逻辑、API 或状态管理问题
- - 用户已经给了明确设计稿，只需要按稿实现
- - 后台运营/CRM/SaaS 工具只需要密度、层级、可用性检查时，按项目现有设计系统优先
-
- ## 设计理解
-
- 动手前用一句话写清：
-
- ```text
- 将此页面理解为：面向 <受众> 的 <页面类型>，采用 <风格语言>，受 <品牌/系统/场景> 约束。
- ```
-
- 先读这些信号：
-
- - 页面类型：落地页、作品集、文档、仪表盘、杂志编辑风格、重新设计
- - 受众：技术买家、招聘方、消费者、运营人员、内部用户、公共服务用户
- - 用户词汇：极简、高端、严肃、活泼、杂志编辑风格、粗野主义、信任优先
- - 参考信号：截图、URL、竞品、品牌名、已有标志、颜色、字体和照片
- - 安静约束：可访问性、监管、信任、企业采购、移动端、重复使用频率
-
- 如果设计理解分叉很大，只问一个会改变方向的问题；能从上下文推断就直接声明并继续。
-
- ## 默认模板倾向检查
+ ## 工作模式
- 除非设计需求明确要求，不要默认使用：
+ - **review**：默认模式。只报告具体视觉、层级、品牌和可用性问题，不修改文件。
+ - **direction**：给出一个推荐方向、关键设计语言和必要取舍，不生成多套泛化主题。
+ - **implement**：仅在用户明确要求修改页面时进入。沿用项目设计系统，修改后用实际渲染或截图复核。
- - 紫蓝渐变、发光网格、散景或光球背景
- - 居中大首屏主视觉加三张功能卡片
- - 泛玻璃质感、过量圆角、无意义微动效
- - 暗色科技风、Inter + slate 单色调、模板化 SaaS 版式
- - 和实际产品/场景无关的图库素材式氛围图
+ ## 最小流程
- ## 审查重点
+ 1. 确认模式、页面类型、受众、已有设计系统和用户给出的参考；只检查视觉外观时，不扩展到数据流或业务逻辑。
+ 2. 用一句话声明页面理解和约束。若两个方向会产生实质不同结果，只问一个能决定方向的问题。
+ 3. review/direction 模式按需阅读 [审查与方向启发](references/review-heuristics.md)，只使用与当前页面有关的检查项。
+ 4. review 模式基于真实截图、渲染结果或明确的代码位置排序问题；无法看到页面时说明证据缺口，不把代码推断写成已观察事实。
+ 5. direction 模式只推荐一个方向，并解释它如何服务受众、品牌和使用频率。
+ 6. implement 模式先记录现状和约束，再做最小修改；使用任何可用浏览器或渲染工具检查主要桌面视口、窄屏、溢出、遮挡、键盘焦点和关键交互状态。
- - 视觉语言是否服务受众，而不是展示模型审美偏好
- - 信息密度是否匹配场景：工具类要可扫读，营销类要有第一屏信号
- - 品牌、产品或对象是否在第一视口足够明确
- - 文案、按钮、导航和状态是否符合已有产品术语
- - 移动端和桌面是否都没有文字溢出、遮挡或布局跳动
- - 重新设计是否保留应保留的资产和用户习惯，还是无依据地推倒重来
+ 如果用户给了明确设计稿且只要求机械实现，或问题只涉及 API、状态管理和业务逻辑，不使用本技能。后台工具仅需常规密度和可用性修正时，优先遵循项目已有设计系统。
## 输出要求
- - 先给 `设计理解`
- - 再给 3-5 条最重要的设计判断或修改建议
- - 避免泛泛说“更现代”“更高级”；每条建议要能落到布局、层级、颜色、字体、动效、资产或文案
+ - review：页面理解、按影响排序的问题、证据位置和最小建议。
+ - direction：一个推荐方向、适用理由、关键设计变量和不适用条件。
+ - implement：修改内容、实际渲染视口和结果、未检查状态。
+
+ 避免泛泛说“更现代”“更高级”；建议要落到布局、层级、颜色、字体、动效、资产或文案。没有实际渲染证据时，只能报告代码层修改，不能声称视觉结果已验证。