关于 webdesign-review
用于全面审查网站、原型和设计的元技能，协调 20 个设计领域的分析。它优先关注无障碍性与易用性，并按严重程度整理发现及可执行建议。
主要功能
- 01协调 20 个设计领域的审查
- 02按领域清单逐项检查
- 03优先评估无障碍性和易用性
- 04按严重程度分类问题
- 05为问题配套改进建议
- 06支持快速、标准和深度审查
适用场景
- 01上线前审查网站
- 02跨设计领域评估原型
- 03开展聚焦无障碍性和易用性的审查
- 04整理带优先级的设计审计结果
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/webdesign-review确认已加载。
附带文件references/review-workflow.md
详细介绍
Webdesign-Review
通过协调应用所有领域技能，系统地开展设计评审。
范围
适用场景：对网站、原型或设计进行全面设计评审。此元技能协调所有相关设计领域的分析，确保不遗漏任何维度。
原则
1. 严谨胜过直觉
设计评审遵循明确的结构，而非个人偏好。每项评估都必须依据相关领域技能中的具体规则或原则。
2. 按影响程度确定优先级
问题的影响程度各不相同。优先处理：可访问性和可用性，再考虑美观。功能缺陷优先于风格偏好。
3. 提出建设性批评和可执行的解决方案
每项发现的不足都要附上具体的改进建议。“这很糟糕”不算评审——“这违反了规则 X；更好的做法是 Y”才算评审。
4. 通过检查清单确保完整性
各领域技能中的检查清单构成评审的基础。不得跳过任何项目。
规则
评审工作流
- 要做：务必先进行整体评估，再深入细节。
- 要做：按以下顺序（按优先级）检查各领域：
accessibility-- 可访问性（法律义务，BFSG）usability-- 可用性ux-design-- 用户体验和流程ui-design-- 布局、层级、组件web-typography-- 字体排印、可读性、字号比例color-theory-- 色彩、对比度、配色方案responsive-design-- 不同断点下的表现navigation-design-- 导航结构和清晰度images-media-- 图片、视频、性能branding-identity-- 品牌一致性landing-pages-- 转化优化（如果是落地页）customer-journey-- 用户旅程和触点component-patterns-- 组件架构ui-patterns-- 交互模式visual-direction-- 视觉方向和趋势design-trends-- 时效性和当代性design-process-- 流程质量ai-design-workflow-- AI 在设计中的集成website-audit-- 技术质量agent-ui-design-- Agent 界面（如适用）
- 要做：逐一检查每个领域对应的检查清单。
- 要做：按严重程度分类记录发现：严重 / 重要 / 建议。
- 不要做：仅仅因为某个领域“可能没问题”就跳过它。
- 不要做：在没有规则依据的情况下记录主观意见。
评估结构
- 要做：将每项发现按以下结构组织：领域 > 规则 > 发现 > 严重程度 > 解决方案。
- 要做：尽可能附上截图或代码示例作为证据。
- 要做：明确指出优点，而不只指出不足。
- 不要做：每个领域的发现超过 20 项。优先记录影响最大的项目。
严重程度
- 严重：违反可访问性要求（BFSG）、功能缺陷、安全问题。必须立即解决。
- 重要：可用性问题、不一致、性能不足。应在发布前解决。
- 建议：风格改进、优化、最佳实践。可在未来的迭代中处理。
模式
快速评审（30 分钟）
重点检查前 6 个领域：可访问性、可用性、ux-design、ui-design、web-typography、color-theory。快速完成检查清单，无需深入分析。
标准评审（2 小时）
检查全部 20 个领域。完整填写检查清单。记录发现、严重程度和解决方案。总结最优先处理的 5 项。
深度审计（1 天）
全面评审，另外进行：屏幕阅读器测试、Lighthouse 分析、性能测量、跨浏览器测试、移动设备测试。提供包含优先级行动项的详细报告。
对比评审
将网站与竞争对手进行分析，找出每个领域中最出色的解决方案，并提出差异化和改进建议。
反模式
挑拣式评审
只指出明显的问题，却忽略系统性缺陷。解决方案：完整地逐项检查清单。
审美偏见
即使网站可用性或无障碍性较差，仍对设计精美的网站给予更宽松的评价。解决方案：务必优先评估无障碍性和可用性。
缺乏背景的评审
不了解目标受众、业务目标或行业背景，就评估设计。解决方案：先收集背景信息，再进行评估。
忽略解决方案
只列出问题，却不提供改进建议。解决方案：每项发现都必须至少包含一条具体建议。
检查清单
评审前
- 是否了解目标受众和业务目标？
- 是否确定了行业和竞争对手？
- 是否明确了要评审的页面或屏幕？
- 是否确定了评审深度（快速／标准／深入）？
评审期间
- 是否涵盖了所有相关领域？
- 是否完整填写了各领域的检查清单？
- 是否按严重程度对发现进行分类？
- 是否为每项发现提供了解决方案建议？
- 是否肯定了优点？
评审后
- 是否准备了包含 5 项首要优先事项的摘要？
- 是否明确标出了关键发现？
- 是否确定了后续步骤？
交叉引用
此元技能统筹全部 20 项领域技能：
核心设计：ui-design、ux-design、web-typography、color-theory、accessibility
结构与导航：usability、responsive-design、navigation-design
内容与媒体：images-media、branding-identity
策略与流程：customer-journey、design-process、ai-design-workflow
页面与审计：landing-pages、website-audit
模式与趋势：design-trends、ui-patterns、visual-direction、component-patterns
专项：agent-ui-design