⚡

前端增强器Skill frontend-enhancer

前端增强器是一个专为Next.js应用设计的技能，提供现代化UI组件库、响应式布局模板、专业配色方案、流畅动画效果和全面的设计系统指南。用于快速提升Web应用视觉设计、用户体验和前端开发效率，关键词：Next.js UI组件、前端设计、响应式布局、CSS动画、设计系统、Web开发工具。

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

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

前端增强器

概述

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

何时使用此技能

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

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

核心能力

1. 组件库

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

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

  • 变体：primary, secondary, outline, ghost, danger
  • 尺寸：sm, md, lg
  • 带有动画加载指示器的加载状态
  • 完整的TypeScript支持
  • 内置可访问性功能

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

  • 变体：default, bordered, elevated, interactive
  • 子组件：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):

  • 三种变体：居中、分屏、极简
  • 支持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. 企业蓝 - 专业、可信赖（商业应用、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）
  • 骨架屏加载（微光效果）
  • 悬停效果（lift, glow, scale）
  • 列表动画的交错延迟

可访问性： 所有动画都尊重 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. 为CTA实施一致的按钮样式
  4. 添加交错动画以增加视觉趣味
  5. 彻底测试响应性

创建仪表板

  1. 为数据区域使用卡片组件
  2. 实施一致的间距和层次结构
  3. 选择专业的配色方案
  4. 为数据获取添加骨架屏加载器
  5. 确保移动端触摸友好的控件

重新设计表单

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