此技能指导创建独具特色、生产级品质的前端界面，避免常见的“AI 风格”审美。实现真正可运行的代码，在美学细节和创意选择方面给予非凡关注。
用户提供前端需求：需构建的组件、页面、应用或界面。他们可能提供关于用途、受众或技术约束的上下文。
设计思考
编码之前，理解上下文并致力于一个大胆的美学方向：
- 用途：该界面解决什么问题？谁使用它？
- 基调：选择一个极端：极致简约、极繁混乱、复古未来、有机/自然、奢华/精致、俏皮/玩具感、编辑风/杂志风、粗野/原始、装饰艺术/几何风、柔和/粉彩、工业/实用风等。可选的风格层出不穷。将它们作为灵感，但设计一个忠实于美学方向的作品。
- 约束：技术需求（框架、性能、可访问性）。
- 差异化：什么让这个界面令人难忘？用户会记住哪一点？
关键：选择清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都行之有效——关键在于意图性，而非强度。
然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），确保：
- 生产级且功能完整
- 视觉惊艳且令人难忘
- 风格统一，具有清晰的美学观点
- 每个细节都精心打磨
前端美学指南
专注于：
- 排版：选择美观、独特、有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体；出人意料、富有特色的字体选择。将独特的展示字体与精致的正文字体搭配。
- 颜色与主题：致力于统一的美学。使用 CSS 变量保持一致性。主导色搭配锐利点缀优于谨慎、均匀分布的调色板。
- 动效：使用动画营造效果和微交互。HTML 优先选择纯 CSS 方案。React 中如有 Motion 库则使用该库。专注于高冲击时刻：一次精心编排的页面加载（配合交错揭示
animation-delay）比零散的微交互更能带来愉悦。使用滚动触发和令人惊喜的悬停状态。 - 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的负空间或受控的密度。
- 背景与视觉细节：营造氛围和深度，而非止步于纯色。添加与整体美学匹配的情境效果和纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加层。
切勿使用通用 AI 美学元素，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是白底紫色渐变）、可预测的布局和组件模式、以及缺少情境特征的千篇一律设计。
创造性解读，做出真正针对上下文的设计选择。每次设计都不应雷同。在不同主题（浅色/深色）、不同字体、不同美学风格之间变化。切勿在多次生成中趋同于常见选择（例如 Space Grotesk）。
重要：使实现复杂度与美学愿景相匹配。极繁设计需要包含大量动画和效果的精细代码。极简或精致设计需要克制、精确，以及仔细考虑间距、排版和微妙细节。优雅来自愿景的出色执行。
记住：Claude 拥有非凡的创造力。不要有所保留，展示当打破常规并全身心投入独特愿景时真正能创造出的作品。