技能介绍

问题背景

当页面已经能跑，但颜色像随手填、间距像凭感觉、同一按钮在不同页面长成三种样子，前端工程里常见的不是功能问题，而是设计一致性问题。frontend-design-expert 面向这类场景：审查单页面、多页面或设计稿与实现之间的差异，把“看起来不够专业”拆成可定位、可修复的设计检查项。

技能如何工作

它会围绕前端页面的视觉层与代码层做审查，核心能力包括：

页面视觉分析：识别颜色、字体、间距、布局、按钮、表单、卡片等组件样式
一致性检查：检查主色、字号层级、8px 间距基准、同类组件是否一致
美观性评估：关注视觉平衡、对齐方式、文字对比度、留白是否合理
优化建议生成：输出问题位置、改进方向，以及可直接复制的 CSS 示例

关键步骤通常从输入开始。优先提供清晰截图、关键组件 HTML/CSS 或设计稿；如果只有截图，它会偏重视觉判断；如果只有代码，它会偏重 CSS 变量、命名、复用和组件封装。多页面审查时，它会先抽取共性模式，再对比差异，适合发现跨页面的颜色、字体和组件不一致。

适用边界与注意点

它适合页面设计质量审查、设计一致性检查、设计稿对比和新项目 Design System 建议，但不替代性能优化、SEO、深度可访问性、后端接口或文案撰写。它可检查基础对比度，但不应承担完整 ARIA 或屏幕阅读器审查。给出的 CSS 建议应包含具体数值，便于直接应用；若需求只是“给个好看的按钮”，可明确跳过审查，直接要求组件代码。