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