技能说明
适用于 PR 与设计评审、UI 代码审查、无障碍检查、设计系统合规、响应式检查，以及从零创建有辨识度的网页界面。边界：不用于后端 API、数据库、基础设施或纯业务逻辑。
关于此技能
用于审查和创作有辨识度、可上线的前端界面，兼顾设计系统、一致性、无障碍、响应式表现和可执行性。
核心能力
设计质量审查
从任务完成、操作层级、导航、状态反馈和视觉完成度检查界面是否清晰、顺手且有重点。
设计系统与无障碍
核对组件、设计令牌、Figma 规范、键盘操作、焦点状态、响应式重排和 WCAG 基本要求。
创意界面方向
帮助确定字体、色彩、空间构图、背景和动效方向，减少千篇一律的模板化界面。
适用场景
网页和组件审查
在 PR、设计评审或上线前检查页面、组件和交互流程的质量问题。
无障碍与响应式检查
发现键盘访问、焦点提示、对比度、断点重排和小屏使用上的明显风险。
从零创作页面
在明确目标用户和使用任务后，为落地页、产品页或 Web 应用建立有辨识度的视觉方向。
使用步骤
- 01
第一步：明确任务与边界
说明用户、目标、页面范围、设计系统、框架和性能或无障碍要求。
- 02
第二步：按质量支柱检查
分别检查从洞察到行动、工艺质量和可信构建，记录阻塞、主要和次要问题。
- 03
第三步：给出可执行修改
按优先级说明问题、影响、设计系统依据和建议，并在修改后复查关键状态。
常见问题
它只适合审查现有页面吗？+
不是。SKILL.md 同时支持现有界面审查和从零创作有辨识度的生产级前端界面。
它会替我完成视觉设计稿吗？+
不会直接代替设计师产出完整 Figma 稿；它提供检查框架、创作方向和可执行建议，仍需结合项目实现。
是否会强制使用某套组件库？+
不会。它要求优先遵循项目已有的设计系统和组件库，没有现成组件时再记录例外及理由。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
兼容平台
Codex · Claude Code · Cursor
来源状态
已提供来源链接
安装方式
命令可直接复制
最近整理
2026/09/04
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
安装命令
npx skills add microsoft/skills --skill frontend-design-review -a claude-code -g适用平台与标签
CodexClaude CodeCursorGitHub CopilotOpenCode兼容 Agent Skills#网页设计#前端审查#UI#无障碍#设计系统