前端设计审查
帮助团队审查或创建兼具设计质量、可访问性与品牌辨识度的生产级前端界面。
技能仅指导前端设计评审和界面创建，没有凭证窃取、隐蔽外传、破坏性默认操作或明显过度权限；但未明确敏感设计资料、Figma/Storybook 数据流、外部协作确认、回滚边界或依赖安全，因此扣7分。仓库提供 MIT 许可和 Microsoft 官方组织来源，但仅作为治理与归属证据。
主文档、检查清单、输出模板和评审修饰器基本一致，覆盖设计评审、可访问性和错误反馈；但依赖 Figma、Storybook、屏幕阅读器及项目上下文，未提供该技能专属测试、异常输入处理或无法访问依赖时的诊断流程，按静态校准不超过10分，扣13分。
前置描述清楚列出适用场景和不适用的后端、数据库、基础设施及纯业务逻辑范围，并区分评审与创作模式；但输入契约、触发判定、输出变体和非适用边界仍较粗略，未提供中文工作流或中国大陆网络环境说明，因此扣5分。
信息按模式、原则、流程、支柱、输出格式和引用资料分层，且有检查清单、示例和 MIT 许可；但安装/依赖说明、版本与变更记录、技能维护责任、更新路径、故障排查和引用链接大多是占位或缺失，因此扣7分。
输出模板、质量支柱和检查项能帮助完成基础前端设计评审，核心结果可直接作为审查报告草稿；但创建设计的产出格式不明确，Figma/组件库验证依赖外部上下文，缺少代表性结果或与人工替代方案的收益证据，按静态校准不超过7分，扣10分。
文档给出可审计的检查项、判定标准和引用文件，部分原则可由仓库内文本复核；但没有该技能专属测试、固定输入输出样例、第三方执行证据或跨来源复核，且本次未执行任何内容，因此仅给3分并扣7分。
- 创作模式缺少明确的输入、文件修改范围、交付格式和验收标准。
- Figma、Storybook、组件库及设计协作流程被假定可用，未说明不可访问时如何降级或报告。
- 可访问性要求使用“Grade C/Grade B”而非明确标准，可能导致不同评审者判定不一致。
- 未说明中文界面、中文字体、RTL/本地化或中国大陆网络环境适配。
- 输出模板中的 Figma、设计系统和链接位置多为占位符，报告仍需人工补充。
它能做什么 & 适用场景
这是一个面向前端界面审查与创作的 Agent Skill。它以“从洞察到行动无摩擦、工艺质量、可信构建”三项质量支柱评估界面，也可从零设计具有明确审美方向的生产级界面。审查范围包括设计系统一致性、Figma 规格、设计令牌、交互状态、响应式表现、可访问性以及 AI 和错误信息的透明度。它适合前端代码审查、设计审查和可访问性审计，但不适合后端、数据库、基础设施或没有界面的业务逻辑。
审查现有 UI 的用户任务、操作层级、导航、设计系统匹配度、Figma 对齐情况、设计令牌使用、组件状态、响应式重排、焦点指示器、WCAG 2.1 可访问性、AI 内容免责声明和错误信息。它还可指导创建界面，包括确定目标用户、用途、视觉基调、实现约束和差异化方向，并提出字体、色彩、动效、空间构图和背景处理建议。设计审查会识别问题范围，按阻塞、主要和次要级别评分与排序，并给出建议。
- 前端工程师在提交 PR 前，希望检查组件是否符合设计系统、Figma 规格和可访问性要求。
- 产品设计师在设计评审中，需要评估一个页面的主要操作是否清晰、任务是否能在较少交互内完成。
- 团队在发布新功能前，需要检查响应式重排、焦点状态、错误提示和 AI 生成内容免责声明。
- 开发者从零创建产品界面，希望避免通用化视觉并建立明确、适合场景的审美方向。
- 组件维护者需要检查 Storybook 或组件库中的组件 API、变体和使用方式是否被正确采用。
优缺点一览
- 同时覆盖设计审查和创意前端设计两种模式。
- 将任务完成、视觉工艺、可信度和可访问性纳入同一套审查框架。
- 明确列出适用场景和不适用场景，便于选择性加载。
- 强调设计令牌、Figma 规格、组件状态和错误透明度等可检查项目。
- 技能本身没有提供具体框架、代码库或自动化检查工具的实现。
- 完整审查输出模板、类型修饰器、快速检查表和示例文件的内容未在给定材料中展开。
- Figma、Storybook 和组件库流程需要使用者已有相应环境；源材料没有说明连接或权限配置。
- 没有证据表明该技能自带独立的测试套件或自动化 WCAG 扫描器。
如何安装
在项目中运行 npx skills add microsoft/skills，按向导选择需要的技能。技能会安装到所选 Agent 的目录，例如 GitHub Copilot 使用的 .github/skills/；如果多个 Agent 共用技能，安装器可建立符号链接。源材料没有提供仅安装 frontend-design-review 的专用命令。
如何使用
在已安装该技能的 Agent 中提出明确的前端任务，例如：“审查这个 React 页面，重点检查设计系统一致性、WCAG 2.1 AA、响应式重排、焦点状态和 AI 内容透明度。”也可以请求：“从零设计一个具有编辑感的生产级仪表盘，并先说明用途、用户、视觉基调和实现约束。”具体输出模板位于 references/review-output-format.md，但源材料未提供其完整内容。
对比同类
源材料仅说明其创意前端指导受到 Anthropic 的 frontend-design skill 启发，并未提供功能、适用范围或实现方式的完整对比。