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