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