frontend-design

用途：该技能用于指导创建独特且达到生产级水准的前端界面，避免通用的“AI味”审美，并实现真正可运行的代码，同时注重美学细节与创意选择。\n\n主要能力：在编码前先进行设计思考，确定目的、语气、技术约束与差异化亮点，选择清晰且极端的美学方向（如极简、极繁、复古未来、自然、奢华、玩具感、编辑风、粗野主义、几何、柔和、工业风等），并精准执行。随后输出可运行的 HTML/CSS/JS、React、Vue 等代码，要求功能完整、视觉醒目、风格统一、细节精致。\n\n使用方式：用户提供前端需求（组件、页面、应用或界面）以及用途、受众或技术约束等背景信息。技能据此先确立一个大胆的美学方向，再实现代码。\n\n美学指南：字体选择要独特有趣，避免 Arial、Inter 等通用字体，可将个性展示字体与精致正文字体配对；颜色与主题保持一致，使用 CSS 变量，主色与锐利点缀优于平均分布的保守配色；动效用于效果与微交互，HTML 优先纯 CSS，React 在可用时使用 Motion 库，重视整体编排的高冲击时刻，如带错落揭示的页面加载、滚动触发与悬停状态；空间构图强调非对称、重叠、对角流动、打破网格、充足留白或控制性密集；背景与视觉细节使用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标与颗粒叠加等营造氛围和深度。\n\n限制与要求：禁止使用常见 AI 生成审美，如过度使用的字体、陈词滥调配色（尤其白底紫色渐变）、可预测布局与模板化设计。要创造性诠释并做符合语境的选择，不同设计之间应保持差异，避免反复收敛到同一常见选项。实现复杂度需匹配美学愿景：极繁设计需要大量动画与效果，极简或精致设计则需要克制、精准与对间距、字体和细节的细致处理。\n\n适用场景：需要独特且生产级前端组件的网页设计与开发任务。其他具体平台支持、收费与价格信息暂未提供。