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