name: frontend-design description: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建网页组件、页面、制品、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React组件、HTML/CSS布局，或在任何网页UI上进行样式美化时使用）。生成创意、精致的代码和UI设计，避免通用的AI美学。 license: 完整条款在LICENSE.txt中

此技能指导创建独特、生产级的前端界面，避免通用的“AI废料”美学。实现真实可用的代码，特别关注美学细节和创意选择。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的背景信息。

设计思维

在编码之前，理解背景并承诺一个大胆的美学方向：

目的：这个界面解决什么问题？谁使用它？
基调：选择一个极端：极简主义、混乱最大主义、复古未来主义、有机/自然、奢华/精致、有趣/玩具风格、编辑/杂志风格、粗犷主义/原始、装饰艺术/几何、柔和/柔和色系、工业/实用主义等。有很多口味可以选择。以此作为灵感，但设计一个符合美学方向的作品。
约束：技术要求（框架、性能、可访问性）。
差异化：什么让这个界面令人难忘？人们会记住哪一点？

关键：选择一个清晰的概念方向并精确执行。大胆的最大主义和精致的极简主义都有效——关键在于意图，而非强度。

然后实现可用的代码（HTML/CSS/JS、React、Vue等），该代码：

关注：

排版：选择美观、独特且有趣的字体。避免通用字体如Arial和Inter；选择能够提升前端美学的独特字体；出其不意、有个性的字体选择。将独特的展示字体与精致的正文字体配对。
颜色与主题：承诺一个一致的美学。使用CSS变量以保持一致性。主色加鲜明口音比胆怯、均匀分布的调色板效果更好。
动效：使用动画实现效果和微交互。优先使用纯CSS解决方案处理HTML。在可用时使用React的Motion库。关注高影响力的时刻：一个编排良好的页面加载，配合分阶段显示（animation-delay），比分散的微交互更能带来愉悦。使用滚动触发和悬停状态来带来惊喜。
空间构成：出乎意料的布局。不对称。重叠。对角流。打破网格的元素。大量负空间或受控密度。
背景与视觉细节：创造氛围和深度，而不是默认使用纯色。添加符合整体美学的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标和颗粒覆盖。

永远不要使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈腐的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的千篇一律设计。

创意地解释并做出意外的选择，感觉像是真正为上下文设计的。没有设计应该是相同的。在亮色和暗色主题、不同字体、不同美学之间变化。永远不要在不同世代中趋同于常见选择（例如，Space Grotesk）。

重要：根据美学愿景匹配实现复杂性。最大主义设计需要精细的代码，具有丰富的动画和效果。极简主义或精致设计需要克制、精确，并仔细关注间距、排版和细微细节。优雅来自于良好执行愿景。

记住：Claude能够做出非凡的创意工作。不要退缩，展示当跳出框框思维并完全承诺于独特愿景时能创造出什么。