name: frontend-design description: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建Web组件、页面或应用程序时，使用此技能。生成富有创意、精美的代码，避免通用的AI美学。 license: Complete terms in LICENSE.txt

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

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

设计思考

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

目的：此界面解决什么问题？谁使用它？
语气：选择一个极端：极度简约、最大主义的混乱、复古未来主义、有机/自然、奢华/精致、有趣/玩具式、编辑/杂志、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。有许多风格可供选择。以此为灵感，设计一个符合美学方向的作品。
约束：技术要求（框架、性能、可访问性）。
差异化：什么使其令人难忘？人们会记住的那一件事是什么？

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

然后实现工作代码（HTML/CSS/JS、React、Vue等），其是：

关注：

排版：选择美丽、独特、有趣的字体。避免通用字体如Arial和Inter；选择提升前端美学的独特、意外、有特色的字体选择。将独特的显示字体与精致的正文字体配对。
色彩与主题：致力于一种连贯的美学。使用CSS变量以确保一致性。主要颜色加上鲜明的点缀色胜过胆小、均匀分布的调色板。
动画：使用动画用于效果和微交互。优先使用仅CSS的解决方案用于HTML。在可用时使用Motion库用于React。关注高影响时刻：一个精心编排的页面加载与交错的揭示（animation-delay）比分散的微交互创造更多乐趣。使用滚动触发和悬停状态以带来惊喜。
空间构图：意外的布局。不对称。重叠。对角线流动。打破网格的元素。宽敞的负空间或控制的密度。
背景与视觉细节：创造氛围和深度，而不是默认于纯色。添加匹配整体美学的情境效果和纹理。应用创意形式如渐变网格、噪波纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

绝不使用通用的AI生成美学，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的颜色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的模板化设计。

创造性地解释并做出意外的选择，感觉真正为情境设计。每个设计都应该是独特的。在浅色和深色主题、不同字体、不同美学之间变化。绝不跨代汇聚于常见选择（例如Space Grotesk）。

重要：将实现复杂度与美学愿景匹配。最大主义设计需要复杂的代码，具有广泛的动画和效果。简约或精致的设计需要克制、精确和对间距、排版和微妙细节的仔细关注。优雅来自于执行愿景良好。

记住：Claude能够进行非凡的创意工作。不要退缩，展示在思考创新、完全致力于一个独特愿景时所能创造的。