⚡

前端增强器 frontend-enhancer

前端增强器是一个专为Next.js应用设计的视觉美化与界面优化技能包。它提供现代化的UI组件库、响应式布局模板、专业配色方案、流畅动画效果以及全面的设计系统指南。核心功能包括：一键替换基础组件、快速构建英雄区域与功能网格、实施可访问性最佳实践、提升应用视觉层次与用户体验。适用于前端开发、UI设计、网页美化、响应式布局、组件库集成等场景。

前端开发 0 次安装 0 次浏览 更新于 2/28/2026

name: 前端增强器 description: 此技能应用于增强Next.js网络应用程序的视觉设计和美学效果。它提供现代UI组件、设计模式、调色板、动画和布局模板。用于改进样式、创建响应式设计、实现现代UI模式、添加动画、选择配色方案或构建美观的前端界面等任务。

前端增强器

概述

前端增强器技能将Next.js应用程序转变为视觉惊艳的现代网络体验。它提供生产就绪的组件、全面的设计指南、精选的调色板、流畅的动画以及为响应性和可访问性优化的灵活布局模板。

何时使用此技能

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

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

核心能力

1. 组件库

使用预构建、生产就绪的React组件，具有多种变体和状态：

按钮组件 (assets/button-variants.tsx):

  • 变体：主要、次要、轮廓、幽灵、危险
  • 尺寸：小、中、大
  • 带有动画旋转器的加载状态
  • 完整的TypeScript支持
  • 内置可访问性功能

卡片组件 (assets/card-variants.tsx):

  • 变体：默认、带边框、有阴影、可交互
  • 子组件：CardHeader、CardTitle、CardDescription、CardContent、CardFooter
  • 悬停效果和过渡
  • 灵活的填充选项

输入组件 (assets/input-variants.tsx):

  • 带有验证状态的文本输入框
  • 文本区域组件
  • 支持左/右侧图标
  • 错误和帮助文本显示
  • 标签集成
  • 完整的可访问性支持

实施工作流程:

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

2. 布局模板

为常见页面部分使用预设计的响应式布局模式：

英雄区域 (assets/layout-hero-section.tsx):

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

功能网格 (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. 调色板

访问为现代网络应用程序优化的专业精选配色方案：

可用调色板 (references/color_palettes.md):

  1. 企业蓝 - 专业、可信赖（商业应用、SaaS）
  2. 活力紫 - 创意、现代（创意工具、作品集）
  3. 极简灰 - 简洁、精致（极简设计）
  4. 温暖日落 - 充满活力、友好（消费类应用、电子商务）
  5. 海洋清新 - 平静、专业（健康、金融应用）
  6. 深色模式 - 现代、护眼（开发者工具、仪表板）

每个调色板包括：

  • 主要和次要颜色
  • 强调色
  • 背景和表面颜色
  • 文本颜色（主要和次要）
  • 语义颜色（成功、警告、错误）
  • 边框颜色

实施选项：

  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-300毫秒）
  • 使用动画引导用户注意力
  • 避免分散注意力的过度运动
  • 始终启用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
  • [ ] 触摸目标至少为44x44像素

自定义指南

要使组件和模板适应您的品牌：

  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. 为行动号召按钮实施一致的样式
  4. 添加交错动画以增加视觉趣味
  5. 彻底测试响应性

创建仪表板

  1. 为数据部分使用卡片组件
  2. 实施一致的间距和层次结构
  3. 选择专业的调色板
  4. 为数据获取添加骨架加载器
  5. 确保移动设备上的触摸友好控制

重新设计表单

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