frontend-design

用途：该技能引导创建独特、生产级的前端界面，避免通用"AI 味"审美，并写出真正可运行的代码，对美学细节和创意选择给予极高关注。用户提供组件、页面、应用或界面等前端需求，可能附带用途、受众或技术约束背景。\n\n主要能力：在编码前先理解上下文并确定大胆的美学方向，包括：用途（解决什么问题、谁使用）、调性（如极简、极繁、复古未来、自然有机、奢华精致、玩趣、杂志编辑、粗野主义、装饰艺术、柔和粉彩、工业实用等）、约束（框架、性能、无障碍等技术要求）、差异化（什么让它令人难忘）。实现可用代码（HTML/CSS/JS、React、Vue 等），要求生产级可用、视觉醒目、风格统一、细节精炼。\n\n美学要点：字体选择美丽独特且有趣，避免 Arial、Inter 等通用字体，将特色展示字体与精致正文字体搭配；颜色与主题保持统一，用 CSS 变量保证一致性，主色配锐利点缀优于平均分布的配色；动效用于效果与微交互，HTML 优先纯 CSS 方案，React 在可用时使用 Motion 库，注重大型编排时刻、滚动触发与悬停状态；空间构图追求非预期布局、不对称、重叠、对角流线、打破网格，以及大量留白或受控密度；背景与视觉细节营造氛围与纵深，如渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标、颗粒叠加。\n\n使用方式：由用户提出前端构建需求后，技能先做设计思考与美学定向，再实现代码。实现复杂度需匹配美学愿景：极繁风格需要丰富动画与效果的详尽代码，极简或精致风格则需要克制、精准，注重间距、字体与细节。\n\n限制：资料未提供具体安装命令、收费、价格、平台或效果数据，这些暂未提供。