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