frontend-design-review

frontend-design-review 技能使 AI 编码代理能够评估并制作在技术卓越性与高保真美学之间取得平衡的 UI 组件。它通过两种主要模式运作：设计审查与创意前端设计。在设计审查模式中，代理会根据既定的设计系统对代码进行系统性审计，验证标记使用、布局规范及变体一致性，确保实现与 Figma 设计交付相符。它应用三大核心支柱：无缝洞察到行动（评估任务流程效率）、品质工艺（验证无障碍 WCAG 2.1、美学凝聚力及代码品质），以及可信赖的构建（确保透明度与错误处理）。创意前端设计模式使代理能够通过定义清晰的美学方向（如极简主义、粗野主义或编辑风格），并使用 CSS 变量、精致排版及有意识的动态效果来执行，从而生成独特且非通用的界面，超越样板代码。

• 执行严格的无障碍审计 (WCAG 2.1 A/AA) 并识别设计系统偏差。

• 自动化处理 PR 的 UI 代码审查、组件库合规性及响应式设计稳定性。

• 根据设计规范生成生产级前端代码，确保语义化 HTML 和 CSS/Tailwind 架构。

• 应用品质支柱，根据用户任务完成度和操作层级优先处理 UI 改进。

• 协作定义美学方向，防止生成通用的「AI 垃圾」并维持品牌特定的视觉完整性。

• 使用此技能进行设计系统合规性检查、UI 代码审查及构建独特的前端功能。

• 为获取最佳准确度，请提供 Figma 设计、Storybook 文档或现有标记文件的链接。

• 非常适合软件工程师、UX 工程师及管理复杂组件库的前端开发人员使用。

• 确保输入内容包含特定的框架约束（如 React, Vue, Svelte），以接收符合框架的代码生成。

• 请勿将此技能用于后端 API 逻辑、基础设施/DevOps 工作流程或数据库架构管理；请严格限制在前端呈现与客户端逻辑范围内。