用途
frontend-design 是一个前端设计技能，用于创建独特、生产级的前端界面，避免通用化的“AI slop”美学。当用户要求构建 Web 组件、页面或应用时，该技能引导从设计思考到代码实现的完整过程，强调美学细节与创意选择。
主要能力
该技能覆盖以下方面：
- 设计思考：在编码前理解上下文并确定大胆的美学方向，包括用途（解决什么问题、谁使用）、基调（如极简、极繁、复古未来、自然有机、奢华精致、玩具感、编辑杂志、粗野主义、装饰艺术、柔和粉彩、工业实用等）、约束（框架、性能、无障碍）以及差异化（什么让人过目不忘）。
- 前端美学指南：聚焦排版（选择美丽、独特、有趣的字体，避免 Arial、Inter 等通用字体，搭配特色展示字体与精致正文字体）、颜色与主题（使用 CSS 变量保持一致性，主色配锐利点缀）、动效（优先 CSS 方案，React 可用 Motion 库，重视编排良好的页面加载与滚动触发、悬停状态）、空间构图（非对称、重叠、对角线流动、打破网格、留白或受控密度）、背景与视觉细节（渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标、颗粒叠加等）。
- 常见设计问题排查：涵盖排版问题（通用字体、层级与可读性差）、颜色与主题问题（陈词滥调配色、对比度不足）、布局问题（可预测的模板化布局、响应式断点失效）、动画问题（过度或突兀、性能问题）、无障碍违规（缺少键盘导航、语义 HTML 差、图片缺少 alt 文本）。
- 设计验证清单：包括视觉质量（对比度达 WCAG AA、排版独特可读、层级清晰、有明确美学方向、间距对齐一致、无过度使用的 AI 模式）、响应式设计（在 320px-480px、768px-1024px、1440px+ 测试，文字可读、媒体缩放、无横向滚动）、无障碍（键盘可访问、焦点状态可见、语义 HTML、alt 文本、颜色非唯一指示、尊重 prefers-reduced-motion）、性能（GPU 加速属性、无布局抖动、图片优化、字体高效加载、关键 CSS 内联）、代码质量（CSS 变量、语义类名、无硬编码魔数、注释、渐进增强）、浏览器兼容性（Chrome/Edge、Firefox、Safari、现代 CSS 特性回退）。
- 测试方法：提供视觉测试（DevTools 设备工具栏测试断点）、无障碍测试（WebAIM 对比度检查器、键盘导航、屏幕阅读器）、性能测试（Performance 面板录制、CLS、60fps、内存泄漏）、跨浏览器测试（Chrome/Edge、Firefox、Safari、移动浏览器）的具体操作指引。
使用方式
用户提供前端需求（组件、页面、应用或界面），可包含用途、受众或技术约束的上下文。技能引导先进行设计思考，确定美学方向，然后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求生产级、功能可用、视觉出众、美学观点一致、细节精致。实现复杂度需匹配美学愿景：极繁设计需要复杂代码与大量动画效果，极简或精致设计则需要克制、精确和对间距、排版、微妙细节的仔细关注。
适用场景
适用于需要构建具有高设计质量、独特视觉风格的前端界面的场景，包括 Web 组件、页面、应用或界面开发。特别适合希望避免通用 AI 生成美学、追求有明确概念方向和创意表达的前端项目。
限制
资料未提供该技能的具体安装命令、收费模式、价格、平台支持范围或效果保证。技能中提到的字体、库（如 Motion）和工具（如 WebAIM Contrast Checker）为设计建议，具体可用性需根据实际项目环境确认。