用途
Frontend Design 用于创建具有辨识度、达到生产级质量的网页界面，并把高设计质量放在首位，避免"通用 AI 审美"。它可以应用于组件、页面、仪表板以及完整应用。
何时使用
- 构建需要视觉辨识度的自定义 UI 组件
- 创建落地页或营销站点
- 设计仪表板与数据可视化界面
- 需要统一设计系统的完整 Web 应用
- 任何需要避免"通用 AI"审美的界面
主要能力
编码前的设计方向
在编码前确立明确的美学方向，需要考虑：
- Purpose（用途）：这个界面要达成什么？
- Tone（基调）：专业？活泼？极简？大胆？
- Constraints（约束）：技术要求、品牌规范、无障碍性？
- Differentiation（差异化）：如何脱颖而出？
核心原则：选择清晰的概念方向，并精准执行。
视觉执行
排版（Typography）：优先选择有个性、出人意料的字体。文中建议避免过度使用的默认字体（Inter、Roboto、Arial、系统字体），并给出了字体搭配示例：
- 标题 Space Grotesk / 正文 Source Serif Pro
- 标题 Playfair Display / 正文 Work Sans
- 标题 Sora / 正文 Spectral
颜色（Color）：坚持统一的配色方案，给出了 CSS 变量示例（primary、secondary、accent、highlight、text）。配色策略包括：单一色相配锐利强调色、类比色配刻意对比、分裂互补色营造活力、默认深色模式。
动效（Motion）：策略性使用 CSS 动画，包括入场淡入滑动、微交互（按钮悬停位移与阴影）、滚动触发效果（IntersectionObserver）。
空间设计（Spatial Design）：拥抱非对称与打破网格，示例包括非对称栅格、跨列强调、重叠与层级（负 margin、绝对定位）。
使用方式
该技能通过文档化的设计指导与代码示例来使用，包含：
- 快速开始：确立设计方向、选择独特字体、创建有意图的调色板、添加有目的的动效、用非对称打破单调。
- 组件模式：带有个性的卡片（card-accent、card-content、card-tag）、有存在感的导航（固定定位、blend-mode、下划线动效）。
- 框架集成：Tailwind CSS 自定义配置（字体、颜色、动画扩展）与 React 组件示例（Button 组件的 variants 写法）。
需要避免的事项
通用 AI 审美：过度使用的字体家族、白底紫色渐变、到处统一的圆角、全部居中、千篇一律的卡片布局。
可预测的模式：居中文字+按钮+图库照片的 Hero、三等分网格、默认阴影与圆角、缺乏视觉层级、没有个性或情境特征。
执行检查清单
- 编码前确立清晰设计方向
- 选择独特排版（不使用默认字体）
- 创建有意图的配色
- 添加有目的的动效与交互
- 用非对称/变化打破视觉单调
- 避免通用 AI 审美模式
- 让复杂度匹配设计愿景
- 跨视口尺寸测试
- 验证无障碍性（对比度、焦点状态）
适用场景与限制
适用场景包括定制 UI 组件、落地页/营销站、仪表板与数据可视化、需要统一设计系统的完整应用。
限制方面，资料未说明具体的授权方式、收费模式或价格信息，暂未提供。文档中的性能指标参考（First Contentful Paint <1.5s、Cumulative Layout Shift <0.1、Accessibility Score >90、WCAG AA 对比度、60fps 动画）作为目标与测量方式列出，具体效果取决于实际实现。