ui-ux-audit

UI/UX 审核技能

🚨 重要：此技能在实施之前运行

**目的：**通过优先审核当前状态，避免重复实施和设计杂乱。

**调用时机：**用户提到以下内容时自动调用：

• UI/UX 工作：“改进 UI”“增强 UX”“设计更好”“更新布局”
• 页面工作：“修复主页”“改进页面”“更新界面”“重新设计”
• 视觉更改：“添加视觉元素”“增强视觉效果”“改善外观”
• 组件工作：“添加组件”“新功能”“改进版块”
• 常规改进：“让它更好”“改善体验”“增强网站”

执行顺序：

1. ✅ 首先运行此技能（审核阶段）
2. 然后向用户展示审核结果
3. 然后可选择调用 ui-ux-designer agent（设计评审）
4. 然后实施已批准的更改

---

强制审核流程（先阅读，再实施）

第 1 步：阅读当前状态（不可妥协）

在提出任何建议之前，必须先阅读以下文件：

# Target page file
Read: src/app/[target-page]/page.tsx

# Related components (if modifying existing sections)
Read: src/components/sections/[component].tsx

# Related data files
Read: src/data/[related-data].tsx
Read: src/data/page-content/[page]-content.ts

# Check for existing similar functionality
Grep: Search for keywords related to proposed feature

示例：

User: "Improve homepage"

MUST READ FIRST:
- src/app/page.tsx
- src/components/sections/Hero.tsx
- src/data/page-content/home-content.ts

THEN analyze what EXISTS before proposing anything

第 2 步：记录现有内容（以证据为依据）

创建当前状态清单：

## Current State Audit: [Page Name]

### Existing Components
- Component 1: [Description, location, purpose]
- Component 2: [Description, location, purpose]

### Existing Data Display
- Portfolio metrics: [Where shown, format]
- CTAs: [Location, text, purpose]
- Content sections: [List all sections]

### Design Characteristics
- Layout: [Grid, flex, columns]
- White space: [Generous, tight, balanced]
- Information density: [Minimal, moderate, dense]
- Visual style: [Clean, busy, colorful, minimal]

### Evidence
[Show actual code snippets proving what exists]

第 3 步：检查重复内容（至关重要）

提出任何新增内容之前，先确认：

• 页面其他位置是否已经显示了这项数据？
• 是否已通过其他形式实现类似功能？
• 这会不会造成现有内容重复？
• 这会不会让简洁的设计变得杂乱？
• 是否有信息被重复展示？

应避免的反模式（来自 2025 年 10 月的经验）：

❌ 已有影响力卡片展示投资组合明细时，再添加投资组合可视化 ❌ Hero 区域已有主要 CTA 时，再添加大型 AI 助手卡片 ❌ 在文档式页面（如 /brief）中添加指标侧边栏 ❌ 在刻意保持简洁的页面（如 /ai-lab）中添加仪表板 ❌ 在多个版块中重复展示数据 ❌ 在没有明确价值主张的情况下批量添加内容

第 4 步：找出真正的缺口（而非臆测的缺口）

仅在以下情况下提出新增内容：

✅ 缺少的功能（经代码审核证实） ✅ 确实存在的 UX 问题（有具体证据，而非臆测） ✅ 明确的价值增益（清楚说明具体收益） ✅ 符合简洁设计（不会增加臃肿内容）

模板：

## Genuine Gaps Identified

### Gap 1: [Specific missing element]
- Evidence: [Code shows this doesn't exist]
- User need: [Why user needs this]
- Value: [Specific benefit]
- Simple solution: [Minimal approach]
- No redundancy: [Confirmed doesn't duplicate X]

### Gap 2: [Next gap]
...

第 5 步：检查设计理念

此作品集刻意采用简洁、极简的美学风格：

根据以下原则进行检查：

• 布局简洁，便于浏览
• 有策略地运用留白
• 信息只展示一次，不重复
• 文档式页面保持文档风格
• 没有明确需求时不增加臃肿内容

需要思考的问题：

• 这会带来价值，还是只会增加臃肿内容？
• 这是最简单的解决方案吗？
• 这是否尊重现有的简洁设计？
• 这能通过用户评审，还是会被撤回？

---

审核结果模板

按以下格式展示审核结果：

# UI/UX Audit Report: [Page Name]

## Current State Summary
[2-3 sentences describing current design]

## What Already EXISTS
1. [Component/feature]: [Description with code location]
2. [Component/feature]: [Description with code location]
3. [Component/feature]: [Description with code location]

Evidence: [Code snippets proving these exist]

## Redundancy Check Results
✅ No redundancy detected: [Explain]
OR
⚠️ Potential redundancy: [Show what duplicates what]

## Genuine Gaps Identified
### Priority 1: [Most important gap]
- Evidence: [Why this is missing]
- User impact: [Specific problem it solves]
- Proposed solution: [Minimal approach]
- No redundancy: [Confirmed]

### Priority 2: [Next gap]
...

## NOT Recommended (Would Create Redundancy)
❌ [Proposed feature]: Already exists as [existing feature]
❌ [Proposed feature]: Would duplicate [existing data]

## Design Philosophy Compliance
✅ Respects clean, minimal aesthetic
✅ Adds value without adding bulk
✅ No information duplication
OR
⚠️ Concerns: [List any design philosophy violations]

## Recommendation
**Recommended:** Implement Priority 1 gap ([brief description])
**Not Recommended:** [List features that would add redundancy]

**Next Steps:**
1. User review of findings
2. (Optional) Invoke ui-ux-designer agent for design critique
3. Implement approved changes incrementally

---

验证清单

完成审核前，请确认：

• 我是否先阅读了所有目标页面/组件文件？
• 我是否记录了现有内容（而非臆测缺少的内容）？
• 我是否系统地检查了重复内容？
• 我是否找出了真正的缺口（而非臆测的缺口）？
• 我是否确认没有信息重复？
• 建议是否符合简洁、极简的设计风格？
• 我是否提出了最简单的解决方案？
• 这能通过用户评审吗？

如果任一答案为否，请停止并重新评估。

---

示例：好审核与差审核

❌ 差审核（不要这样做）

User: "Improve homepage"

Bad Response:
"I recommend adding:
1. Portfolio visualization showing $156M breakdown
2. Large dashboard with metrics
3. Section transitions between content
4. Enhanced testimonials with animations"

Problem: Didn't read current state, didn't check for redundancy

✅ 好审核（应该这样做）

User: "Improve homepage"

Good Response:
"Let me audit the current homepage first..."

[Reads src/app/page.tsx]

"Current State Audit:

What EXISTS:
- Impact cards already display portfolio breakdown ($156M, $91M, etc.)
- Hero has primary CTAs (View Work, See Skills, Get In Touch)
- Testimonials section exists
- EKG dividers separate sections

Redundancy Check:
⚠️ Adding portfolio visualization would DUPLICATE impact card data

GENUINE Gap:
✅ No CTA after testimonials section (natural conversion point)

Recommendation:
- Add single strategic CTA after testimonials
- Do NOT add portfolio visualization (redundant)
- Keep clean, minimal design

Would you like to proceed with the CTA addition?"

---

与 CLAUDE.md 规则集成

此技能强制执行 CLAUDE.md 中的强制规则：

1. ✅ 先阅读，再实施（由第 1 步强制执行）
2. ✅ 检查重复内容（由第 3 步强制执行）
3. ✅ 尊重设计理念（由第 5 步强制执行）
4. ✅ UI/UX 工作前必须进行审核（此技能的全部内容）
5. ✅ 验证清单（由最后的清单强制执行）

---

触发关键词参考

当用户提到以下内容时，自动调用此技能：

UI/UX 术语：

• 改进 UI、优化 UX、设计更好、更新布局
• 改善用户体验、优化界面、提升视觉效果
• 重新设计、重构 UI、更新设计、现代化
• 让它看起来更好、改善外观、视觉效果优化

页面术语：

• 修复主页、改进页面、更新页面、优化页面
• 主页改进、页面重新设计、布局调整
• 改进着陆页、打造更好的主屏幕

组件术语：

• 添加组件、新功能、改进版块
• 优化主视觉区、更新页眉、改进页脚
• 添加可视化内容、添加仪表板、添加指标
• 新的 UI 元素、添加界面组件

一般改进：

• 让它变得更好、改善体验、优化网站
• 改进作品集、更好地展示、优化呈现效果
• 提高转化率、提升互动、增强影响力

提问形式：

• “我该如何改进 X？”
• “我应该为 X 添加什么？”
• “我应该在页面中添加 X 吗？”

---

请记住：此技能可避免 2025 年 10 月那次会话中的错误

那天出了什么问题：

• 没有阅读页面，就实施了第 3 阶段的 UI/UX 建议
• 添加了 PortfolioVisualization，尽管影响力卡片展示的是相同数据
• 添加了一个大型 AI Assistant 卡片，喧宾夺主，盖过了主要 CTA
• 给 AI Lab 页面添加了太多内容，让它“看起来像把两个页面塞进了一个页面”
• 用户不得不撤销所有改动

此技能通过以下方式避免这些错误：

• 先阅读当前状态（始终如此）
• 提出建议前先检查是否存在冗余
• 尊重简洁、极简的设计理念
• 找出真正的缺口（而非臆测的缺口）
• 实施前，先向用户展示有证据支持的调查结果

---

支持文件与资源

此技能包含用于全面审查的其他资源：

REFERENCE.md - 详细的 UX 研究

何时阅读：

• 需要了解详细的 WCAG 2.1 AA 要求
• 想查看 UX 研究引用（Nielsen Norman Group 等）
• 想了解设计模式和反模式
• 深入了解审查方法

包含内容：

• 左侧注意力模式研究（80/20 规则）
• F 型阅读原则
• 认知负荷原则（米勒定律、希克定律）
• 完整的 WCAG 2.1 AA 要求
• 设计模式库
• 衡量框架

阅读方式： Read: [skill-directory]/REFERENCE.md

---

FORMS.md - 预填模板

何时阅读：

• 开始新的审查（复制模板）
• 需要结构化的清单格式
• 想要标准化的审查结果

包含内容：

• 快速审查模板（5-10 分钟）
• 全面审查模板（30 分钟以上）
• 冗余检查清单
• 缺口分析模板
• WCAG 合规性检查清单
• 移动端优化检查清单
• 性能审查模板

阅读方式： Read: [skill-directory]/FORMS.md

---

resources/ - 示例与案例研究

何时阅读：

• 首次进行 UI/UX 审查
• 不确定方法是否正确
• 想从实际示例中学习
• 培训他人

包含内容：

• examples/good-audit-example.md - 黄金标准审查示例
• examples/bad-audit-example.md - 反面示例
• case-studies/october-2025-incident.md - 启发此技能的真实事件
• README.md - 导航指南

阅读方式： Read: [skill-directory]/resources/[filename]

---

支持文件使用指南

快速审查（少于 10 分钟）：

1. 使用 SKILL.md（此文件）了解流程
2. 从 FORMS.md 复制模板（快速审查模板）
3. 按照 5 个步骤操作，并填写模板

全面审查（30 分钟以上）：

1. 使用 SKILL.md 了解整体流程
2. 从 FORMS.md 复制模板（全面审查模板）
3. 参考 REFERENCE.md 了解详细要求
4. 将你的工作与 resources/examples/good-audit-example.md 进行对比

学习/培训：

1. 阅读 resources/examples/good-audit-example.md（参见黄金标准）
2. 阅读 resources/examples/bad-audit-example.md（了解应避免的做法）
3. 阅读 resources/case-studies/october-2025-incident.md（了解这项技能存在的原因）
4. 使用 FORMS.md 模板进行练习

---

最后说明

此项为必需。 用户提到 UI/UX 工作时，必须先运行此技能，审查当前状态，然后才能开始任何实现工作。

目标：防止重复实现，尊重现有设计，仅提出有针对性的改进建议。

刚开始做 UI/UX 审查？ 从 resources/examples/good-audit-example.md 开始，了解实际操作流程。