frontend-enhancer

用途

Frontend Enhancer 用于将 Web 应用转变为视觉精致、具有人类设计感的体验。它主要面向样式与 UI 打磨，涵盖现代 UI 组件、布局、响应式设计、配色方案与动画。

适用场景包括：改进样式与视觉设计、创建响应式布局、添加动画与过渡、选择配色方案、构建现代 UI 模式、提升美学效果。

不适合的场景：需要先获取灵感时，应先使用 ui-research；UX 流程设计应使用 generic-ux-designer；代码架构应使用 generic-feature-developer；代码审查应使用 generic-code-reviewer。

前提：先研究

对于全新的设计方向，应先运行 ui-research，使选择来自真实参考产品而非默认样式。需要避免的具体默认样式见"避免 AI 感"部分。参考资料包括 UI Inspiration Sources 与 Design Patterns。

研究驱动的增强工作流

研究 —— 先使用 ui-research 技能（最少 5-10 个示例）
评估 —— 对照研究结果识别当前差距
规划 —— 基于灵感分析确定方向
基础 —— 在主题中设置颜色、间距、动画
应用 —— 以人类打磨方式实现（而非默认样式）
反 AI 检查 —— 确认没有通用 AI 模式
精修 —— 测试响应式、验证无障碍
复查 —— 检查层级、一致性、性能

配色方案选择

技能提供以下配色的适用场景参考：企业蓝（商业应用、SaaS）、活力紫（创意工具、作品集）、极简灰（干净、精致）、暖日落（消费应用、电商）、海洋清新（健康、金融应用）、暗色模式（开发者工具、仪表盘）。每种配色需要包含：Primary、Secondary、Accent、Background、Foreground、Muted、Success、Warning、Error。

组件模式

按钮：变体含 primary、secondary、outline、ghost、danger；尺寸含 sm、md、lg；状态含 loading、disabled。

卡片：变体含 default、bordered、elevated、interactive；子组件含 Header、Title、Description、Content、Footer。

表单：清晰的焦点状态、校验反馈、辅助文本、必填指示。

动画指南

仅使用 GPU 加速属性：应动画 transform（如 translateY(-4px)）与 opacity；避免动画 margin-top、height 等。

时长建议：微交互 100-200ms；过渡 200-300ms；复杂动画 300-500ms。

无障碍处理：在 prefers-reduced-motion: reduce 媒体查询下禁用动画与过渡。

响应式策略

断点与目标设备：base（最小宽度 0，移动端）、sm（640px，大屏手机）、md（768px，平板）、lg（1024px，笔记本）、xl（1280px，桌面）。

无障碍清单

颜色对比度不低于 4.5:1（WCAG AA）；键盘可访问；可见焦点指示；语义化 HTML；图片替代文本；表单标签；尊重 prefers-reduced-motion；触控目标不小于 44x44px。

布局模式

Hero 区域：居中、分栏或极简变体；主次 CTA；可选背景渐变。

功能网格：2、3 或 4 列；图标 + 标题 + 描述；错落动画；悬停效果。

性能

关注打包体积；懒加载重型组件；优化图片（WebP、响应式）；保持 60fps 动画。

cn 工具配置

在 lib/utils.ts 中通过 clsx 与 tailwind-merge 组合实现 cn 函数：

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

前后对比模式

进行增强时需记录变更，例如：

Before: Plain gray button, no hover state After: Gradient primary button with hover lift effect

避免 AI 感

需要检查并避免的红牌项：默认蓝/紫渐变；完全对称布局；通用 blob/波浪装饰；Undraw 风格图库插画；"笔记本样机的 Hero"陈词滥调；未修改的默认配色；千篇一律的卡片网格；过度使用的玻璃拟态/模糊。

应具备的人类触感清单：自定义配色（非默认）；有意的布局不对称；独特字体搭配；真实/自定义图像；有个性的微交互；品牌专属细节；经过思考的空/加载状态；有特色的文案。

质量对比维度涵盖颜色、布局、图像、文案、动效、细节；通用 AI 表现为默认蓝、完美网格、图库素材、Lorem ipsum、基础淡入淡出、无细节，而人类打磨则对应自定义品牌配色、有意变化、精选/自定义、真实且有个性的文案、有目的的品牌化动效、悬停状态与反馈等细节。

技能介绍

用途