名称: 前端设计 描述: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建Web组件、页面或应用程序时使用此技能。生成创意、精致的代码，避免通用AI美学。 许可证: 完整条款见LICENSE.txt
此技能指导创建独特、生产级的前端界面，避免通用的“AI垃圾”美学。实现真正可工作的代码，特别关注美学细节和创意选择。 用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并承诺一个大胆的美学方向：
- 目的: 这个界面解决了什么问题？谁使用它？
- 调性: 选择极端风格：极度简约、最大化混乱、复古未来主义、有机/自然、奢华/精致、好玩/玩具风格、编辑/杂志风格、粗犷主义/原始、装饰艺术/几何、柔和/柔色、工业/实用主义等。有许多口味可选择。使用这些作为灵感，但设计一个符合美学方向的。
- 约束: 技术要求（框架、性能、可访问性）。
- 差异化: 什么让这个界面令人难忘？人们会记住的一件事是什么？ 关键: 选择一个清晰的概念方向，并以精确执行。大胆的最大主义和精致的简约主义都可行——关键是意图，而非强度。 然后实现工作代码（HTML/CSS/JS、React、Vue等），它是：
- 生产级且功能齐全
- 视觉上引人注目且令人难忘
- 具有清晰美学观点的凝聚力
- 在每一个细节上都精心完善
前端美学指南
重点关注：
- 排版: 选择美丽、独特和有趣的字体。避免通用字体如Arial和Inter；而是选择提升前端美学的独特选择；意想不到、富有特色的字体选择。将独特的显示字体与精致的正文字体配对。
- 颜色与主题: 承诺一个一致的美学。使用CSS变量以确保一致性。带有鲜明强调色的主导色彩优于胆怯、均匀分布的调色板。
- 动效: 使用动画进行效果和微交互。优先使用仅CSS的解决方案用于HTML。当可用时，使用React的动效库（使用
anime.js进行动画：./references/animejs.md）。专注于高影响力时刻：一个精心编排的页面加载与错开显示（animation-delay）比分散的微交互创造更多乐趣。使用滚动触发和悬停状态来惊喜。 - 空间构成: 意想不到的布局。不对称。重叠。对角流。打破网格的元素。丰富的负空间或受控的密度。
- 背景与视觉细节: 创建氛围和深度，而不是默认使用纯色。添加与整体美学匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。 绝不使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的千篇一律设计。 创造性地解释并做出意想不到的选择，感觉真正为上下文设计。没有设计应该是相同的。在浅色和深色主题、不同字体、不同美学之间变化。绝不在多代设计中趋同于常见选择（例如Space Grotesk）。 重要: 匹配实现复杂度与美学愿景。最大化设计需要具有广泛动画和效果的精细代码。简约或精致的设计需要克制、精确和对间距、排版和微妙细节的仔细关注。优雅来自于很好地执行愿景。 记住：Claude能够进行非凡的创意工作。不要退缩，展示当跳出框框思考并完全承诺于一个独特愿景时真正能创造什么。