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