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

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

设计思维

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

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

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

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

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

前端美学指南

重点关注以下维度：

• 排版：选用兼具美感、独特性与表现力的字体。避免使用 Arial、Inter 等泛用字体；转而采用富有个性、出人意料的字体组合——例如，以一款极具表现力的展示字体搭配一款细腻考究的正文字体。
• 色彩与主题：坚持统一协调的整体美学。通过 CSS 自定义变量保障一致性。以主导色+锐利强调色构成的配色方案，远胜于畏首畏尾、平均分布的保守调色。
• 动效：善用动画实现视觉效果与微交互。HTML 场景优先采用纯 CSS 方案；React 场景在可用时推荐使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动效（配合 staggered reveals 与 animation-delay）所带来的愉悦感，远超零散堆砌的微交互。滚动触发动效与悬停状态应具备惊喜感。
• 空间构图：拥抱非常规布局——非对称结构、元素叠压、对角线视觉流、突破栅格的自由形态、充裕的负空间，或高度控制的密集排布。
• 背景与视觉细节：以氛围营造与纵深感替代单调纯色背景。添加契合整体美学的上下文效果与纹理——例如：渐变网格（gradient meshes）、噪点纹理（noise textures）、几何图案、多层透明叠加、戏剧性阴影、装饰性边框、自定义光标、胶片颗粒覆盖（grain overlays）等。

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

请进行创造性解读，做出真正契合场景的意外之选。每个设计都应独一无二——在明暗主题、字体选择、美学风格之间主动变化。切忌在多次生成中趋同于常见选项（例如 Space Grotesk）。

重要提示：实现复杂度须与美学愿景相匹配。繁复风格需依托结构精巧、动画丰富、效果密集的代码实现；而极简或精炼风格则依赖克制、精准与对间距、排版及细微质感的极致把控。优雅，源于对愿景的卓越执行。

请谨记：Claude 具备非凡的创造力。请尽情释放潜能，展现跳出常规思维、全情投入独特愿景所能达成的真实高度。