frontend-design

用途：该技能用于指导生成独特、具备生产级质量的前端界面，避免常见的“AI 味”审美。当用户提出设计类需求，或界面正在被设计或修改时启用。用户通常提供前端需求，如组件、页面、应用或界面，并可附带用途、受众或技术限制等背景信息。\n\n主要能力：先进行设计思考，明确要解决的问题、使用者、语气、技术限制与差异化亮点；选定一个大胆的美学方向（如极简、极致主义、复古未来、自然有机、奢华精致、玩具感、杂志编辑、粗野主义、装饰几何、柔和粉彩、工业实用等），再以精确方式执行。随后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求功能完整、视觉突出、风格统一、细节讲究。\n\n主要关注点：字体选择要有辨识度，避免 Arial、Inter、Roboto 等通用字体，可将特色展示字体与精致正文字体搭配；色彩与主题保持一致，使用 CSS 变量，采用主色加锐利强调色；动效用于效果与微交互，HTML 优先纯 CSS 方案，React 可用 Motion 库，重视页面加载的分层呈现，并加入滚动触发与悬停状态；空间构图可采用不对称、重叠、对角线、打破网格、留白或受控密度；背景与视觉细节可加入渐变网格、噪点纹理、几何图案、层叠透明、戏剧阴影、装饰边框、自定义光标和颗粒叠加等。\n\n限制：不应使用过度泛滥的字体、陈词滥调配色（如白底紫色渐变）以及缺乏语境特征的模板化设计；不同生成之间应避免趋同于常见选择。实现复杂度需匹配美学愿景：极致主义需丰富动画与效果，极简设计则需克制、精准与细致。资料未提供安装命令、价格、平台支持或具体使用步骤等更多细节。