用途
该技能用于指导创建独特、具备生产级品质的前端界面，并刻意避免通用化的“AI 感”审美。当用户要求构建 Web 组件、页面、产物或界面时启用。用户会提供前端需求，可能是组件、页面、应用或界面，也可能包含关于用途、受众或技术约束的上下文。
设计流程
在编写代码之前，先理解上下文并确定一个大胆的审美方向，需要明确以下方面：
- 用途：这个界面解决什么问题？谁在使用？
- 语气：选择一个极端方向，例如极度极简、极繁混乱、复古未来、有机自然、奢华精致、玩具趣味、杂志编辑风、粗野原始、装饰艺术几何、柔和粉彩、工业实用等。
- 约束：技术需求，例如框架、性能、无障碍。
- 差异化：什么让这个界面令人难忘？人们会记住的那一件事是什么？
关键点是选择一个清晰的概念方向并精准执行。大胆的极繁与精致的极简都可行，重点在于有意为之，而非程度强弱。
随后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求代码达到生产级且功能可用、视觉醒目且令人难忘、风格统一且审美观点明确、每个细节都经过细致打磨。
前端美学指南
主要关注以下方面：
- 字体排印：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体，改用能提升前端美感的独特选择，追求意外且有个性的字体搭配，通常以一个独特显示字体搭配一个精致正文字体。
- 色彩与主题：坚持统一的审美。用 CSS 变量保持一致性。主色搭配锐利点缀，效果优于怯懦、均匀分布的调色板。
- 动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案；React 在可用时使用 Motion 库。聚焦高影响力时刻：一次编排良好的页面加载配合错落呈现（animation-delay），比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发与悬停状态。
- 空间构图：使用意外布局。非对称、重叠、对角线流、打破网格的元素。要么使用充裕留白，要么采用受控的密集感。
- 背景与视觉细节：营造氛围与深度，而不是默认使用纯色。添加与整体审美匹配的情境效果与纹理。可运用渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰边框、自定义光标、颗粒叠加等创意形式。
禁止事项
绝不使用通用的 AI 生成式审美，例如被过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏情境特征的模板化设计。
创意要求
进行创造性诠释，做出感觉真正为情境而设计的意外选择。没有两个设计应该相同。在浅色与深色主题、不同字体、不同审美之间变化。绝不在不同生成结果中收敛到常见选择（例如 Space Grotesk）。
实现复杂度匹配
实现复杂度必须与审美愿景匹配。极繁设计需要配合大量动画与效果的精细代码。极简或精致设计则需要克制、精准，以及对间距、字体排印和微妙细节的审慎关注。优雅来自对愿景的良好执行。
限制与缺失信息
资料未提供该技能的具体安装命令、收费价格、支持平台、运行环境要求或评测效果数据。