frontend-enhancer

Name: frontend-enhancer
Author: travisjneuman

github.com/travisjneuman设计与 UI106141 次安装今天更新

代码仓库

关于 frontend-enhancer

frontend-enhancer 是用于改进 Web 界面的技能，面向需要优化视觉设计与响应式表现的开发者。它以调研为起点，并提供无障碍、动画及避免通用 AI 风格的设计指导。

主要功能

01以调研为先的设计流程
02视觉样式与配色指导
03响应式布局建议
04动画与过渡规则
05无障碍与性能检查

适用场景

01润色现有 Web 应用的视觉设计
02构建响应式页面布局
03添加无障碍动画与过渡效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/travisjneuman/.claude --skill frontend-enhancer

安装后在 Claude Code 中输入/frontend-enhancer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

index.js

package.json

assets/

animations.css

button-variants.tsx

card-variants.tsx

input-variants.tsx

layout-feature-grid.tsx

layout-hero-section.tsx

utils-cn.ts

references/

color_palettes.md

design_principles.md

详细介绍

前端增强器

将 Web 应用转变为视觉精致、由人类设计的体验。

前置要求：先进行调研

采用新的设计方向时，先运行 ui-research，确保设计选择源自真实的参考产品，而非默认样式；需要避免的具体默认样式详见“避免 AI 风格”。请参阅 UI 灵感来源。

适用场景

适用于：

改进样式和视觉设计
创建响应式布局
添加动画和过渡效果
选择配色方案
构建现代 UI 模式
提升美观度

不适用于：

需要先获取灵感 → 先使用 ui-research
UX 流程设计 → 使用 generic-ux-designer
代码架构 → 使用 generic-feature-developer
代码审查 → 使用 generic-code-reviewer

基础参考资料：

UI 灵感来源 - 调研来源
设计模式 - 视觉设计令牌

以调研为基础的增强工作流

调研 - 先使用 ui-research 技能（至少 5-10 个示例）
评估 - 根据调研结果找出当前不足
规划 - 基于灵感分析确定设计方向
奠定基础 - 在主题中设置颜色、间距和动画
应用 - 以精心打磨的方式实现（而非使用默认样式）
反 AI 风格检查 - 确认没有泛化的 AI 模式
优化 - 测试响应性，验证无障碍性
审查 - 检查层级、一致性和性能

配色方案选择

配色方案	适用场景
企业蓝	商业应用、SaaS
活力紫	创意工具、作品集
极简灰	简洁、精致的界面
暖色夕阳	消费类应用、电商
清新海洋	健康、金融应用
深色模式	开发者工具、仪表板

每种配色方案都需要：主色、次色、强调色、背景色、前景色、弱化色、成功色、警告色、错误色

组件模式

按钮

变体：primary、secondary、outline、ghost、danger
尺寸：sm、md、lg
状态：加载中、禁用

卡片

变体：默认、带边框、凸起、可交互
子组件：页眉、标题、描述、内容、页脚

表单

清晰的焦点状态
验证反馈
辅助文本
必填项标记

动画指南

仅使用 GPU 加速：

/* ✅ DO animate */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ AVOID */
margin-top: -4px;
height: 100px;

时长指南：

微交互：100-200ms
过渡效果：200-300ms
复杂动画：300-500ms

无障碍性：

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

响应式策略

断点	最小宽度	目标
base	0	移动设备
sm	640px	大屏手机
md	768px	平板电脑
lg	1024px	笔记本电脑
xl	1280px	台式电脑

无障碍检查清单

布局模式

首屏主视觉区

居中、分栏或极简变体
主要 + 次要 CTA
可选背景渐变

功能网格

2、3 或 4 列
图标 + 标题 + 描述
错落式动画
悬停效果

性能

注意打包体积
延迟加载较重的组件
优化图像（WebP、响应式）
动画达到 60fps

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 风格的素材插画
“笔记本电脑模型图主视觉”的老套设计
未修改的默认配色方案
千篇一律的卡片网格
过度使用玻璃拟态／模糊效果

人性化设计检查清单

确保具备以下特点：

质量对比

方面	通用 AI 风格	人工打磨风格
颜色	默认蓝色	自定义品牌配色
布局	完美网格	有意的变化
图像	素材／通用图像	精心挑选／自定义图像
文案	Lorem ipsum	真实且个性鲜明
动效	基础淡入淡出	有目的且符合品牌风格
细节	无	悬停状态、反馈

另请参阅

UI 灵感来源 - 研究来源（优先使用）
设计模式 - 视觉设计参考
UX 原则 - 用户体验
ui-research - 为新的设计方向先运行的研究步骤
项目 CLAUDE.md - 设计约束

支持 Markdown

登录后评论