此技能指导创建独特、可投入生产的前端界面，避免千篇一律的“AI 垃圾”美学。实现真实的、可工作的代码，并对美学细节和创意选择给予非凡的关注。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含有关用途、受众或技术约束的上下文。
设计思考
在编码之前，理解上下文并致力于一个大胆的美学方向：
- 目的：该界面解决什么问题？谁使用它？
- 基调：选择一个极端：极致极简、混乱极繁、复古未来主义、有机/自然、奢华/精致、好玩/玩具般、社论/杂志风格、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。有很多风格可供选择。将这些作为灵感，但设计一个符合美学方向的方向。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：是什么让这个界面令人难忘？人们会记住的一件事是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都有效——关键在于意图，而非强度。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），这些代码必须：
- 达到生产级且功能完整
- 视觉上引人注目且令人难忘
- 具有凝聚力，拥有清晰的美学观点
- 在每一个细节上都经过精心打磨
前端美学指南
关注以下方面：
- 排版：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体；选择能够提升前端美感的独特字体；出人意料、富有特色的字体选择。将独特的展示字体与精炼的正文字体配对。
- 色彩与主题：致力于一个有凝聚力的美学。使用 CSS 变量确保一致性。与均匀分布的调色板相比，主色搭配锐利的点缀色效果更好。
- 动效：为效果和微交互使用动画。对于 HTML，优先使用纯 CSS 方案。当 React 项目可用时，使用 Motion 库。专注于高影响力的时刻：一次精心策划的页面加载，配合交错出现的元素，比分散的微交互更能带来愉悦感。使用滚动触发和出人意料的悬停状态。
- 空间构成：出人意料的布局。不对称。重叠。对角流线。打破网格的元素。宽阔的留白或有控制的密度。
- 背景与视觉细节：营造氛围和深度，而不是默认使用纯色。添加与整体美学相匹配的上下文效果和纹理。应用创造性的形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。
永远不要使用千篇一律的 AI 生成美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的照搬设计。
创造性地解读，做出出人意料的选择，让人感觉这些设计真正是为上下文而生的。没有两个设计应该是相同的。在亮色和暗色主题、不同字体、不同美学之间变化。永远不要趋同于常见的选择（例如 Space Grotesk）。
重要：将实现复杂度与美学愿景相匹配。极繁主义的设计需要包含广泛动画和效果的复杂代码。极简或精致的设计需要克制、精确，以及对间距、排版和微妙细节的仔细关注。优雅来自于出色地执行愿景。
记住：Claude 有能力进行非凡的创造性工作。不要有所保留，展示真正跳出框框思考、全力投入独特愿景所能创造的成果。