frontend-enhancer

前端增强器

概述

Frontend Enhancer 技能可将 Next.js 应用转变为视觉效果出众、符合现代风格的 Web 体验。它提供可用于生产环境的组件、全面的设计指南、精选配色方案、流畅动画，以及针对响应式设计和无障碍体验进行优化的灵活布局模板。

何时使用此技能

在以下情况下调用此技能：

• 改善现有应用的视觉效果
• 使用现代样式创建新的 UI 组件
• 选择配色方案和设计主题
• 添加动画和过渡效果
• 为不同屏幕尺寸构建响应式布局
• 实现 Hero 区块、功能网格或落地页
• 通过更好的视觉层次提升用户体验
• 在应用中应用一致的设计模式

核心功能

1. 组件库

使用预构建、可用于生产环境的 React 组件，支持多种变体和状态：

Button 组件（assets/button-variants.tsx）：

• 变体：primary、secondary、outline、ghost、danger
• 尺寸：sm、md、lg
• 带动画加载指示器的加载状态
• 完整的 TypeScript 支持
• 内置无障碍功能

Card 组件（assets/card-variants.tsx）：

• 变体：default、bordered、elevated、interactive
• 子组件：CardHeader、CardTitle、CardDescription、CardContent、CardFooter
• 悬停效果和过渡效果
• 灵活的内边距选项

Input 组件（assets/input-variants.tsx）：

• 带验证状态的文本输入框
• Textarea 组件
• 支持左侧和右侧图标
• 显示错误信息和辅助文本
• 集成标签
• 完整的无障碍支持

实现工作流：

1. 将所需组件文件从 assets/ 复制到项目的组件目录
2. 确保 cn 工具函数存在（参见 assets/utils-cn.ts）
3. 自定义颜色、间距或变体，以匹配品牌风格
4. 在页面中导入并使用该组件

2. 布局模板

使用预先设计的响应式布局模式，构建常见页面区块：

Hero 区块（assets/layout-hero-section.tsx）：

• 三种变体：居中、分栏、极简
• 支持 CTA（主要和次要）
• 可选背景渐变
• 支持图片/插图
• 内置动画

功能网格（assets/layout-feature-grid.tsx）：

• 可配置列数（2、3 或 4）
• 图标集成
• 交错动画
• 悬停效果
• 完全响应式

实现工作流：

1. 将布局组件从 assets/ 复制到组件目录
2. 自定义属性和内容，以满足需求
3. 与现有页面集成
4. 根据品牌风格按需调整样式

3. 设计系统指南

参考全面的设计原则，打造一致、专业的界面：

设计原则（references/design_principles.md）：

• 视觉层次最佳实践
• 间距和节奏指南
• 字体排印建议
• 色彩理论与应用
• 一致性标准
• 响应式策略
• 无障碍指南（WCAG AA/AAA）
• 常见布局模式

何时参考：

• 开始新的设计
• 决定如何安排视觉层次
• 确保符合无障碍要求
• 在应用中建立一致性
• 评估设计质量

使用方法： 阅读 references/design_principles.md 了解最佳实践，然后将其应用于具体的设计挑战。该文档涵盖理论知识和实际实现。

4. 配色方案

获取经过专业设计、适用于现代 Web 应用的配色方案：

可用配色方案（references/color_palettes.md）：

1. Corporate Blue - 专业、可靠（商务应用、SaaS）
2. Vibrant Purple - 富有创意、现代（创意工具、作品集）
3. Minimalist Gray - 简洁、精致（极简设计）
4. Warm Sunset - 活力、友好（消费者应用、电商）
5. Ocean Fresh - 沉稳、专业（健康、金融应用）
6. Dark Mode - 现代、护眼（开发者工具、仪表盘）

每种配色方案都包含：

• 主色和辅助色
• 点缀色
• 背景色和表面色
• 文字颜色（主要和次要）
• 语义色（成功、警告、错误）
• 边框颜色

实现方式：

1. Tailwind CSS：将颜色添加到 tailwind.config.js（提供了示例）
2. CSS 变量：在全局 CSS 中使用自定义属性（提供了示例）
3. 内联样式：在组件中直接引用十六进制颜色代码

选择流程：

1. 查看 references/color_palettes.md，了解所有可用的配色方案
2. 考虑应用的用途和品牌形象
3. 选择符合目标的配色方案
4. 使用 Tailwind 配置或 CSS 变量实现
5. 根据需要调整特定颜色，使其符合品牌风格

5. 动画和过渡效果

使用预构建的 CSS 类和关键帧，添加流畅、专业的动画：

动画库（assets/animations.css）：

• 淡入淡出动画（fadeIn、fadeOut、fadeInUp、fadeInDown）
• 滑动动画（slideInLeft、slideInRight）
• 缩放动画（scaleIn、scaleOut）
• 实用动画（bounce、pulse、spin）
• 骨架屏加载（闪烁效果）
• 悬停效果（上浮、发光、缩放）
• 列表动画的错开延迟

无障碍性： 所有动画都遵循 prefers-reduced-motion 设置，以符合无障碍要求。

实现流程：

1. 将 assets/animations.css 复制到全局 CSS 文件（或创建单独的动画文件）
2. 应用 animate-fade-in-up、hover-lift 等实用类
3. 在列表中使用错开类实现连续动画
4. 根据需要自定义持续时间和缓动效果

最佳实践：

• 动画应保持轻柔（微交互建议为 200-300ms）
• 使用动画引导用户注意力
• 避免会分散注意力的过度动态效果
• 始终在启用 prefers-reduced-motion 的情况下进行测试

增强工作流

增强前端应用时，请遵循以下系统化方法：

步骤 1：评估当前状态

• 找出缺乏视觉精致度的部分
• 记录不一致的样式模式
• 检查响应式表现
• 检查无障碍问题
• 评估配色方案和排版

步骤 2：选择设计方向

• 从 references/color_palettes.md 中选择配色方案
• 查看 references/design_principles.md 中的设计原则
• 确定组件变体和样式
• 规划布局改进

步骤 3：实现基础

• 设置 cn 实用函数（assets/utils-cn.ts）
• 配置选定的配色方案（Tailwind 或 CSS 变量）
• 将动画 CSS（assets/animations.css）添加到全局样式
• 确保间距比例一致

步骤 4：应用组件

• 使用 assets/ 中的增强组件替换基础元素
• 为关键页面实现布局模板
• 在整个应用中应用一致的样式
• 添加动画和过渡效果

步骤 5：优化和润色

• 在不同设备尺寸下测试响应式表现
• 验证无障碍性（键盘导航、对比度、屏幕阅读器）
• 确保悬停和焦点状态一致
• 优化性能（检查动画性能）
• 使用 prefers-reduced-motion 进行测试

步骤 6：最终检查

• 检查所有页面的视觉层次
• 验证颜色一致性
• 测试所有交互状态
• 验证响应式断点
• 检查无障碍合规性

实用函数设置

大多数组件都需要使用 cn 实用函数来合并类名。设置方法如下：

1. 将 assets/utils-cn.ts 复制到项目的 lib/utils.ts
2. 安装依赖：

   npm install clsx tailwind-merge
   

3. 在组件中导入：

   import { cn } from '@/lib/utils';
   

响应式设计策略

所有组件和布局均采用移动优先的方法：

1. 基础样式 - 针对移动设备优化（320px 及以上）
2. sm 断点 - 小型平板电脑（640px 及以上）
3. md 断点 - 平板电脑（768px 及以上）
4. lg 断点 - 桌面设备（1024px 及以上）
5. xl 断点 - 大型桌面设备（1280px 及以上）

请测试每个断点，确保布局和可读性良好。

无障碍检查清单

确保所有增强后的界面都符合以下标准：

• 颜色对比度符合 WCAG AA 标准（文本为 4.5:1）
• 所有交互元素均可通过键盘访问
• 焦点指示器清晰可见
• 使用语义化 HTML（nav、main、article 等）
• 图片带有替代文本
• 表单具有恰当的标签
• 动画遵循 prefers-reduced-motion 设置
• 触控目标至少为 44x44px

自定义指南

要根据品牌调整组件和模板：

1. 颜色：更新调色板配置或组件文件中的颜色值
2. 排版：调整字体大小、字重和字体系列
3. 间距：修改内边距和外边距
4. 边框圆角：更改圆角（例如，将 rounded-lg 改为 rounded-xl）
5. 阴影：调整阴影强度（例如，将 shadow-md 改为 shadow-lg）
6. 动画：修改持续时间和缓动函数

资源摘要

此技能包括：

references/

• color_palettes.md - 六种专业设计的配色方案及实现示例
• design_principles.md - 全面的设计指南，涵盖视觉层次、排版、无障碍和常见模式

assets/

• button-variants.tsx - 现代按钮组件，包含 5 种变体和 3 种尺寸
• card-variants.tsx - 灵活的卡片组件，包含子组件
• input-variants.tsx - 带验证状态的输入框和文本区域组件
• layout-hero-section.tsx - 包含 3 种布局变体的主视觉区域
• layout-feature-grid.tsx - 列数可配置的响应式功能网格
• animations.css - 完整的动画库，支持无障碍功能
• utils-cn.ts - 用于合并类名的实用函数

成功提示

1. 先制定计划：进行更改前先查看设计原则
2. 选择一种配色方案：坚持使用单一配色方案，以保持一致性
3. 在真实设备上测试：模拟器不一定能准确呈现响应式效果
4. 保持简洁：现代设计更注重简洁，而非复杂
5. 优先考虑无障碍：从一开始就为所有用户进行设计
6. 根据反馈迭代：向用户展示设计并不断改进
7. 保持一致性：在整个应用中使用相同的模式
8. 重视性能：保持动画流畅（60fps）并优化图片

常见用例

增强现有应用

1. 选择一种配色方案并加以应用
2. 用增强组件替换基础按钮和输入框
3. 添加细腻的动画以改善交互反馈
4. 检查并改善间距的一致性
5. 确保在各种设备上的响应式表现

构建着陆页

1. 将主视觉区域布局作为焦点
2. 添加功能网格以展示关键功能
3. 为 CTA 使用一致的按钮样式
4. 添加交错动画以增强视觉效果
5. 全面测试响应能力

创建仪表板

1. 使用卡片组件展示数据板块
2. 保持间距和层次结构一致
3. 选择专业的配色方案
4. 为数据加载添加骨架屏
5. 确保移动设备上的控件便于触控

重新设计表单

1. 用增强型输入组件替换现有输入框
2. 添加清晰的错误和验证状态
3. 确保标签与表单控件正确关联
4. 为表单提交添加加载状态
5. 测试键盘导航流程