名称：前端设计描述：创建独特、生产级别的前端界面，具有高质量设计。当用户要求构建网页组件、页面、制品、海报或应用程序（例如网站、落地页、仪表板、React组件、HTML/CSS布局，或美化任何Web UI）时使用此技能。生成创意十足、精心打磨的代码和UI设计，避免通用AI美学。许可证：完整条款见LICENSE.txt

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

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

设计思维

在编码之前，理解上下文并承诺一个BOLD美学方向：

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

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

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

关注：

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

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

创意解释并做出出乎意料的选择，感觉真正为上下文设计。没有设计应该相同。在浅色和深色主题、不同字体、不同美学之间变化。永远不要在多个生成中收敛于常见选择（例如，Space Grotesk）。

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

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