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