本技能旨在指导构建独具特色、达到生产级质量的前端界面，彻底规避千篇一律的“AI 套路化”视觉风格。需以极高的审美敏感度与创造性判断，实现真正可运行的代码。

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

设计思维

编码前，须深入理解使用场景，并坚定确立一种大胆鲜明的视觉方向：

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

关键原则：明确选定一个概念性方向，并以高度精准的方式贯彻执行。无论是张扬的繁复主义，还是克制的极简主义，皆可成立——核心在于意图明确，而非强度高低。

随后，实现具备以下特性的可运行代码（HTML/CSS/JS、React、Vue 等）：

• 达到生产级标准，功能完备可靠
• 视觉表现震撼，具备强记忆点
• 整体风格高度统一，拥有清晰且一贯的美学立场
• 每一处细节均经过严谨打磨与反复推敲

前端美学规范

重点关注以下维度：

• 排版：选用兼具美感、独特性与表现力的字体。避免使用 Arial、Inter 等泛用字体；转而选择能显著提升界面格调的、富有个性与叙事感的字体组合——例如，以一款极具表现力的展示字体搭配一款细腻考究的正文字体。
• 色彩与主题：坚持统一协调的视觉基调。通过 CSS 自定义变量保障全局一致性。采用主导色+锐利点缀色的方案，远胜于保守平均、缺乏主次的配色布局。
• 动效：善用动画增强体验质感与微交互反馈。HTML 场景优先采用纯 CSS 实现；React 场景在可用时推荐使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动效（含 staggered reveals 与 animation-delay）所带来的愉悦感，远超零散堆砌的微交互。善用滚动触发（scroll-triggering）与悬停状态（hover），制造恰到好处的意外感。
• 空间构成：突破常规布局——尝试非对称构图、元素叠压、对角线视觉流、打破栅格的自由形态，以及宽裕留白或精密控制的视觉密度。
• 背景与视觉细节：以氛围与纵深感替代单调纯色背景。添加契合整体美学的上下文效果与纹理——如渐变网格（gradient mesh）、噪点纹理（noise texture）、几何图案、多层透明叠加、戏剧性阴影、装饰性边框、自定义光标（custom cursor）、胶片颗粒叠加（grain overlay）等。

切勿采用泛滥的 AI 生成式美学：包括过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈腐配色（尤其是白底紫渐变）、可预测的布局与组件模式，以及脱离具体语境、缺乏个性的模板化设计。

请进行创造性解读，做出真正契合场景的、出人意料的选择。每个设计都应独一无二：交替采用明暗主题、不同字体体系、不同美学范式。严禁在多次生成中趋同于常见选择（例如 Space Grotesk）。

重要提示：实现复杂度须与美学构想严格匹配。繁复主义设计需配套精细复杂的代码逻辑、丰富的动画与视觉特效；而极简或精致风格则强调克制、精准与对间距、排版及细微质感的极致关注。优雅，源于对愿景的卓越执行。

请谨记：Claude 具备非凡的创造力。无需保留，尽情展现跳出常规框架、全情投入独特愿景所能达成的真实高度。