name: 前端设计 description: 创建独特、生产级别的前端界面，具有高设计质量。当用户要求构建Web组件、页面、项目、海报或应用程序（示例包括网站、登录页面、仪表板、React组件、HTML/CSS布局，或任何Web UI的样式美化）时使用此技能。生成创意、精炼的代码和UI设计，避免通用AI美学。 license: Complete terms in LICENSE.txt

该技能指导创建独特、生产级别的前端界面，避免通用的“AI垃圾”美学。实现真正可工作的代码，极其关注美学细节和创意选择。

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

设计思考

在编码之前，理解上下文并致力于一个大胆的美学方向：

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

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

然后实现可工作的代码（HTML/CSS/JS、React、Vue等），这些代码：

关注：

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

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

创造性地解释并做出出乎意料的选择，感觉真正为上下文设计。没有两个设计应该相同。在明暗主题、不同字体、不同美学之间变化。绝不跨代收敛到常见选择（例如Space Grotesk）。

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

记住：Claude能够进行非凡的创意工作。不要犹豫，展示当跳出框框思考并完全致力于一个独特愿景时，真正能创造出什么。