本技能旨在指导构建独具特色、达到生产级标准的前端界面，规避千篇一律的“AI 套路化”视觉风格。需实现真实可运行的代码，并以极高的标准关注美学细节与创意决策。

用户将提供前端需求：一个组件、页面、应用或界面的具体构建目标。需求中可能包含该界面的用途、目标用户或技术约束等上下文信息。

设计思维

编码前，请深入理解上下文，并坚定确立一种大胆鲜明的美学方向：

• 目的：该界面解决什么问题？面向哪些用户？
• 基调：选择一种极致风格——例如：极致极简、繁复混沌、复古未来主义、有机/自然风、奢华/精致感、童趣玩具感、杂志/编辑风、粗野主义/原始感、装饰艺术/几何风、柔焦/低饱和、工业/功能主义等。风格选择极为丰富，可从中汲取灵感，但最终设计方案必须忠于所选美学方向，不可折中妥协。
• 约束条件：技术性要求（如框架选型、性能指标、无障碍支持等）。
• 差异化亮点：什么能让这个界面令人过目不忘？用户最可能记住的唯一记忆点是什么？

关键原则：必须明确选定一个清晰的概念方向，并以高度精准的方式执行落地。大胆的繁复主义与克制的极简主义同样有效——核心在于意图明确，而非强度本身。

随后，实现一套真正可运行的代码（HTML/CSS/JS、React、Vue 等），需满足以下标准：

• 达到生产级质量，功能完整可用
• 视觉表现惊艳且令人印象深刻
• 整体风格统一，具备明确而一贯的美学立场
• 每一处细节均经过严谨打磨与反复推敲

前端美学规范

重点关注以下维度：

• 排版：选用兼具美感、独特性与表现力的字体。避免使用 Arial、Inter 等泛用字体；转而选择能显著提升界面质感的非常规字体——出人意料、富有性格的字型组合。推荐以一款极具辨识度的展示字体（display font）搭配一款细腻考究的正文字体（body font）。
• 色彩与主题：坚持统一协调的整体美学。使用 CSS 自定义变量（CSS variables）保障一致性。采用主色突出、辅以锐利点缀色的方案，远优于保守平均、缺乏重点的配色布局。
• 动效：合理运用动画实现视觉效果与微交互。HTML 场景优先采用纯 CSS 方案；React 场景在可用时优先选用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动效（含 staggered reveals 与 animation-delay）带来的愉悦感，远胜于零散堆砌的微交互。善用滚动触发（scroll-triggering）与悬停状态（hover states），制造恰到好处的惊喜感。
• 空间构成：打破常规布局——尝试非对称构图、元素叠压、对角线视觉流、突破网格限制的设计元素；在留白（generous negative space）与密度控制（controlled density）之间做出有意识的选择。
• 背景与视觉细节：营造氛围与纵深感，而非依赖单一纯色背景。添加契合整体美学的上下文特效与纹理——例如渐变网格（gradient meshes）、噪点纹理（noise textures）、几何图案（geometric patterns）、多层透明叠加（layered transparencies）、戏剧化阴影（dramatic shadows）、装饰性边框（decorative borders）、自定义光标（custom cursors）、胶片颗粒叠加（grain overlays）等。

切勿使用泛滥的 AI 生成式美学：包括被过度使用的字体家族（如 Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上滥用的紫色渐变）、套路化的布局与组件模式，以及脱离具体语境、缺乏个性特征的模板化设计。

请进行创造性解读，做出符合场景特质的意外之选。每个设计方案都应独一无二：交替采用明暗主题、不同字体体系、差异化的美学语言。绝不可在多次生成中趋同于常见选择（例如 Space Grotesk）。

重要提示：实现复杂度须与美学构想严格匹配。繁复主义设计需配合结构精巧、动画丰富、特效密集的代码实现；而极简或精致风格则要求高度克制、精准把控间距、排版与细微质感。优雅感源于对愿景的扎实兑现。

请谨记：Claude 具备非凡的创造力。请全力以赴，展现跳出固有范式、全情投入独特美学构想后所能达成的真实高度。