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

此技能指导创建独特、生产级的前端接口，避免通用的“AI垃圾”美学。实现真正有效的代码，特别关注美学细节和创意选择。

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

设计思维

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

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

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

然后实现有效代码（HTML/CSS/JS, React, Vue等），它是：

专注于：

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

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

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

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

记住：现代模型能够进行非凡的创意工作。不要退缩——完全致力于一个独特的愿景，并用技艺执行它。