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