用途
frontend-design 用于指导创建具有辨识度、生产级质量的前端界面，并有意避开千篇一律的“AI slop”审美。适用于用户要求构建 Web 组件、页面或应用的场景，目标是交付真正可运行、视觉上引人注意且细节打磨到位的代码。
主要能力
- 在编码前进行设计思考：明确用途（解决什么问题、谁使用）、基调（如极简、极繁、复古未来、自然有机、奢华精致、玩具感、杂志编辑感、粗野主义、装饰几何、柔和粉彩、工业实用等）、技术约束（框架、性能、可访问性）以及差异化（什么让界面令人难忘）。
- 指导实现生产级且可用的代码，支持 HTML/CSS/JS、React、Vue 等形式。
- 提供前端美学方向：字体选择强调美观、独特、有趣，避免 Arial、Inter 等通用字体，建议将独特的展示字体与精致的正文字体搭配；配色与主题强调统一的审美立场并使用 CSS 变量保持一致；动效用于效果和微交互，HTML 优先 CSS 方案，React 可用时使用 Motion 库，重视页面加载时的编排与滚动触发、悬停状态；空间构图鼓励不对称、重叠、对角流动、打破网格、大量留白或受控密度；背景与视觉细节鼓励使用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠层等营造氛围与深度。
- 明确避免通用 AI 审美，包括过度使用的字体族、老套配色（尤其是白底紫色渐变）、可预测的布局和组件模式。
- 强调根据美学愿景匹配实现复杂度，并以创意方式做出不重复、符合语境的选择，避免每次生成都收敛到相同选项。
使用方式
用户提供前端需求，例如一个组件、页面、应用或界面，并可附带用途、受众或技术约束等背景。技能随后引导先确定鲜明的概念方向，再实现可运行代码，要求代码生产级、功能可用、视觉醒目、风格统一且细节精致。资料未提供具体安装命令、配置方式或调用接口等更多操作细节。
适用场景
- 需要构建具有独特设计语言、避免模板化外观的 Web 组件或页面。
- 需要在字体、配色、动效、布局与视觉纹理上获得系统性美学指导的前端开发任务。
- 需要从设计概念出发并落地为可运行代码的前端实现工作。
限制
资料未提供该技能的具体平台限制、性能指标、收费或价格信息、可访问性合规细节以及代码示例。是否适用于特定框架版本、浏览器兼容范围等，暂未提供。