Back to Details

frontend-enhancer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Enhancer

前端视觉增强方案

Overview

概述

The Frontend Enhancer skill transforms Next.js applications into visually stunning, modern web experiences. It provides production-ready components, comprehensive design guidelines, curated color palettes, smooth animations, and flexible layout templates optimized for responsiveness and accessibility.
Frontend Enhancer Skill 可将Next.js应用转变为视觉惊艳、现代化的Web体验。它提供可用于生产环境的组件、全面的设计指南、精选调色板、流畅的动画效果，以及针对响应式和可访问性优化的灵活布局模板。

When to Use This Skill

适用场景

Invoke this skill when:
  • Improving the visual appearance of an existing application
  • Creating new UI components with modern styling
  • Selecting color schemes and design themes
  • Adding animations and transitions
  • Building responsive layouts for different screen sizes
  • Implementing hero sections, feature grids, or landing pages
  • Enhancing user experience with better visual hierarchy
  • Applying consistent design patterns across an application
在以下场景中调用此Skill：
  • 改进现有应用的视觉外观
  • 创建带有现代样式的新UI组件
  • 选择配色方案和设计主题
  • 添加动画与过渡效果
  • 为不同屏幕尺寸构建响应式布局
  • 实现英雄区、功能网格或着陆页
  • 通过优化视觉层级提升用户体验
  • 在应用中应用统一的设计模式

Core Capabilities

核心功能

1. Component Library

1. 组件库

Use pre-built, production-ready React components with multiple variants and states:
Button Component (
assets/button-variants.tsx
):
  • Variants: primary, secondary, outline, ghost, danger
  • Sizes: sm, md, lg
  • Loading states with animated spinner
  • Full TypeScript support
  • Accessibility features built-in
Card Component (
assets/card-variants.tsx
):
  • Variants: default, bordered, elevated, interactive
  • Subcomponents: CardHeader, CardTitle, CardDescription, CardContent, CardFooter
  • Hover effects and transitions
  • Flexible padding options
Input Components (
assets/input-variants.tsx
):
  • Text inputs with validation states
  • Textarea component
  • Left/right icon support
  • Error and helper text display
  • Label integration
  • Full accessibility support
Implementation workflow:
  1. Copy the desired component file from 
    assets/
    to your project's components directory
  2. Ensure the 
    cn
    utility function exists (see 
    assets/utils-cn.ts
    )
  3. Customize colors, spacing, or variants to match your brand
  4. Import and use the component in your pages
使用预构建、可用于生产环境的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. Layout Templates

2. 布局模板

Use pre-designed, responsive layout patterns for common page sections:
Hero Section (
assets/layout-hero-section.tsx
):
  • Three variants: centered, split, minimal
  • Support for CTAs (primary and secondary)
  • Optional background gradients
  • Image/illustration support
  • Built-in animations
Feature Grid (
assets/layout-feature-grid.tsx
):
  • Configurable columns (2, 3, or 4)
  • Icon integration
  • Staggered animations
  • Hover effects
  • Fully responsive
Implementation workflow:
  1. Copy the layout component from 
    assets/
    to your components directory
  2. Customize the props and content to match your needs
  3. Integrate with your existing pages
  4. Adjust styling as needed for your brand
使用为常见页面区域预设计的响应式布局模式：
英雄区 (
assets/layout-hero-section.tsx
):
  • 三种变体：居中、分栏、极简
  • 支持CTA按钮（主按钮和次要按钮）
  • 可选背景渐变效果
  • 支持图片/插图
  • 内置动画效果
功能网格 (
assets/layout-feature-grid.tsx
):
  • 可配置列数（2、3或4列）
  • 图标集成
  • 交错动画效果
  • 悬停效果
  • 完全响应式
实施流程:
  1. 将布局组件从
    assets/
    复制到你的组件目录
  2. 自定义属性和内容以满足需求
  3. 与现有页面集成
  4. 根据品牌需求调整样式

3. Design System Guidelines

3. 设计系统指南

Reference comprehensive design principles for consistent, professional interfaces:
Design Principles (
references/design_principles.md
):
  • Visual hierarchy best practices
  • Spacing and rhythm guidelines
  • Typography recommendations
  • Color theory and usage
  • Consistency standards
  • Responsiveness strategies
  • Accessibility guidelines (WCAG AA/AAA)
  • Common layout patterns
When to reference:
  • Starting a new design
  • Making decisions about visual hierarchy
  • Ensuring accessibility compliance
  • Establishing consistency across the app
  • Reviewing design quality
How to use: Read 
references/design_principles.md
to understand best practices, then apply them to your specific design challenges. The document covers both theory and practical implementation.
参考全面的设计原则，打造一致、专业的界面：
设计原则 (
references/design_principles.md
):
  • 视觉层级最佳实践
  • 间距与韵律指南
  • 排版建议
  • 色彩理论与使用方法
  • 一致性标准
  • 响应式策略
  • 可访问性指南（WCAG AA/AAA）
  • 常见布局模式
参考时机:
  • 启动新设计项目时
  • 做视觉层级相关决策时
  • 确保可访问性合规时
  • 在应用中建立设计一致性时
  • 评审设计质量时
使用方法: 阅读
references/design_principles.md
了解最佳实践，然后将其应用到具体的设计挑战中。该文档涵盖理论与实际实施方法。

4. Color Palettes

4. 调色板

Access professionally curated color schemes optimized for modern web applications:
Available Palettes (
references/color_palettes.md
):
  1. Corporate Blue - Professional, trustworthy (business apps, SaaS)
  2. Vibrant Purple - Creative, modern (creative tools, portfolios)
  3. Minimalist Gray - Clean, sophisticated (minimalist designs)
  4. Warm Sunset - Energetic, friendly (consumer apps, e-commerce)
  5. Ocean Fresh - Calm, professional (health, finance apps)
  6. Dark Mode - Modern, eye-friendly (developer tools, dashboards)
Each palette includes:
  • Primary and secondary colors
  • Accent colors
  • Background and surface colors
  • Text colors (primary and secondary)
  • Semantic colors (success, warning, error)
  • Border colors
Implementation options:
  1. Tailwind CSS: Add colors to 
    tailwind.config.js
    (examples provided)
  2. CSS Variables: Use custom properties in global CSS (examples provided)
  3. Inline styles: Reference hex codes directly in components
Selection workflow:
  1. Review 
    references/color_palettes.md
    to see all available palettes
  2. Consider your application's purpose and brand identity
  3. Choose a palette that matches your goals
  4. Implement using Tailwind config or CSS variables
  5. Adjust specific colors if needed to match your brand
获取为现代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. Animations and Transitions

5. 动画与过渡效果

Add smooth, professional animations using pre-built CSS classes and keyframes:
Animation Library (
assets/animations.css
):
  • Fade animations (fadeIn, fadeOut, fadeInUp, fadeInDown)
  • Slide animations (slideInLeft, slideInRight)
  • Scale animations (scaleIn, scaleOut)
  • Utility animations (bounce, pulse, spin)
  • Skeleton loading (shimmer effect)
  • Hover effects (lift, glow, scale)
  • Stagger delays for list animations
Accessibility: All animations respect 
prefers-reduced-motion
for accessibility compliance.
Implementation workflow:
  1. Copy 
    assets/animations.css
    to your global CSS file (or create a separate animations file)
  2. Apply utility classes like 
    animate-fade-in-up
    , 
    hover-lift
    , etc.
  3. Use stagger classes for sequential animations in lists
  4. Customize duration and easing if needed
Best practices:
  • Keep animations subtle (200-300ms for micro-interactions)
  • Use animations to guide user attention
  • Avoid excessive motion that distracts
  • Always test with 
    prefers-reduced-motion
    enabled
使用预构建的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-300ms）
  • 使用动画引导用户注意力
  • 避免过度分散注意力的动画
  • 始终测试
    prefers-reduced-motion
    启用时的效果

Enhancement Workflow

增强流程

Follow this systematic approach when enhancing a frontend application:
遵循此系统化方法增强前端应用：

Step 1: Assess Current State

步骤1: 评估当前状态

  • Identify areas lacking visual polish
  • Note inconsistent styling patterns
  • Check responsive behavior
  • Review accessibility issues
  • Evaluate color scheme and typography
  • 识别缺乏视觉质感的区域
  • 记录不一致的样式模式
  • 检查响应式表现
  • 评审可访问性问题
  • 评估配色方案与排版

Step 2: Select Design Direction

步骤2: 选择设计方向

  • Choose a color palette from 
    references/color_palettes.md
  • Review design principles in 
    references/design_principles.md
  • Decide on component variants and styles
  • Plan layout improvements
  • 从
    references/color_palettes.md
    中选择调色板
  • 查看
    references/design_principles.md
    中的设计原则
  • 确定组件变体与样式
  • 规划布局改进方案

Step 3: Implement Foundation

步骤3: 搭建基础

  • Set up the 
    cn
    utility function (
    assets/utils-cn.ts
    )
  • Configure chosen color palette (Tailwind or CSS variables)
  • Add animation CSS (
    assets/animations.css
    ) to global styles
  • Ensure consistent spacing scale
  • 设置
    cn
    工具函数（
    assets/utils-cn.ts
    ）
  • 配置所选调色板（Tailwind或CSS变量）
  • 将动画CSS（
    assets/animations.css
    ）添加到全局样式
  • 确保一致的间距比例

Step 4: Apply Components

步骤4: 应用组件

  • Replace basic elements with enhanced components from 
    assets/
  • Implement layout templates for key pages
  • Apply consistent styling across the application
  • Add animations and transitions
  • 用
    assets/
    中的增强组件替换基础元素
  • 为关键页面实现布局模板
  • 在应用中应用一致的样式
  • 添加动画与过渡效果

Step 5: Refine and Polish

步骤5: 优化与打磨

  • Test responsiveness across device sizes
  • Verify accessibility (keyboard navigation, contrast, screen readers)
  • Ensure consistent hover/focus states
  • Optimize performance (check animation performance)
  • Test with 
    prefers-reduced-motion
  • 在不同设备尺寸上测试响应式表现
  • 验证可访问性（键盘导航、对比度、屏幕阅读器）
  • 确保一致的悬停/聚焦状态
  • 优化性能（检查动画性能）
  • 测试
    prefers-reduced-motion
    效果

Step 6: Final Review

步骤6: 最终评审

  • Check visual hierarchy on all pages
  • Verify color consistency
  • Test all interactive states
  • Validate responsive breakpoints
  • Review accessibility compliance
  • 检查所有页面的视觉层级
  • 验证颜色一致性
  • 测试所有交互状态
  • 验证响应式断点
  • 评审可访问性合规性

Utility Function Setup

工具函数设置

Most components require the 
cn
utility function for class name merging. To set it up:
  1. Copy 
    assets/utils-cn.ts
    to your project's 
    lib/utils.ts
  2. Install dependencies:
    bash
    npm install clsx tailwind-merge
  3. Import in components:
    typescript
    import { cn } from '@/lib/utils';
大多数组件需要
cn
工具函数来合并类名。设置方法如下：
  1. 将
    assets/utils-cn.ts
    复制到项目的
    lib/utils.ts
  2. 安装依赖：
    bash
    npm install clsx tailwind-merge
  3. 在组件中导入：
    typescript
    import { cn } from '@/lib/utils';

Responsive Design Strategy

响应式设计策略

All components and layouts follow a mobile-first approach:
  1. Base styles - Optimized for mobile (320px+)
  2. sm breakpoint - Small tablets (640px+)
  3. md breakpoint - Tablets (768px+)
  4. lg breakpoint - Desktops (1024px+)
  5. xl breakpoint - Large desktops (1280px+)
Test each breakpoint to ensure proper layout and readability.
所有组件和布局遵循移动优先的方法：
  1. 基础样式 - 针对移动端优化（320px+）
  2. sm断点 - 小平板（640px+）
  3. md断点 - 平板（768px+）
  4. lg断点 - 桌面端（1024px+）
  5. xl断点 - 大桌面端（1280px+）
测试每个断点，确保布局和可读性正常。

Accessibility Checklist

可访问性检查清单

Ensure all enhanced interfaces meet these standards:
  • Color contrast meets WCAG AA (4.5:1 for text)
  • All interactive elements are keyboard accessible
  • Focus indicators are visible and clear
  • Semantic HTML is used (nav, main, article, etc.)
  • Images have alt text
  • Forms have proper labels
  • Animations respect prefers-reduced-motion
  • Touch targets are at least 44x44px
确保所有增强后的界面符合以下标准：
  • 颜色对比度符合WCAG AA标准（文本对比度4.5:1）
  • 所有交互元素支持键盘访问
  • 焦点指示器清晰可见
  • 使用语义化HTML（nav、main、article等）
  • 图片包含替代文本
  • 表单带有正确的标签
  • 动画尊重prefers-reduced-motion设置
  • 触摸目标至少为44x44px

Customization Guide

自定义指南

To adapt components and templates to your brand:
  1. Colors: Update color values in palette config or component files
  2. Typography: Adjust font sizes, weights, and families
  3. Spacing: Modify padding and margin values
  4. Border Radius: Change rounded corners (e.g., 
    rounded-lg
    to 
    rounded-xl
    )
  5. Shadows: Adjust shadow intensity (e.g., 
    shadow-md
    to 
    shadow-lg
    )
  6. Animations: Modify duration and easing functions
要使组件和模板适配你的品牌：
  1. 颜色: 更新调色板配置或组件文件中的颜色值
  2. 排版: 调整字体大小、字重和字体族
  3. 间距: 修改内边距和外边距值
  4. 圆角: 调整圆角大小（例如将
    rounded-lg
    改为
    rounded-xl
    ）
  5. 阴影: 调整阴影强度（例如将
    shadow-md
    改为
    shadow-lg
    ）
  6. 动画: 修改持续时间和缓动函数

Resources Summary

资源汇总

This skill includes:
此Skill包含以下资源：

references/

references/

  • color_palettes.md
    - Six professionally designed color schemes with implementation examples
  • design_principles.md
    - Comprehensive design guidelines covering visual hierarchy, typography, accessibility, and common patterns
  • color_palettes.md
    - 六个专业设计的配色方案，附带实施示例
  • design_principles.md
    - 全面的设计指南，涵盖视觉层级、排版、可访问性和常见模式

assets/

assets/

  • button-variants.tsx
    - Modern button component with 5 variants and 3 sizes
  • card-variants.tsx
    - Flexible card component with subcomponents
  • input-variants.tsx
    - Input and textarea components with validation states
  • layout-hero-section.tsx
    - Hero section with 3 layout variants
  • layout-feature-grid.tsx
    - Responsive feature grid with configurable columns
  • animations.css
    - Complete animation library with accessibility support
  • utils-cn.ts
    - Utility function for class name merging
  • 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
    - 用于合并类名的工具函数

Tips for Success

成功技巧

  1. Start with a plan: Review design principles before making changes
  2. Choose one palette: Stick to a single color scheme for consistency
  3. Test on real devices: Emulators don't always show true responsive behavior
  4. Keep it simple: Modern design favors simplicity over complexity
  5. Prioritize accessibility: Design for all users from the start
  6. Iterate based on feedback: Show designs to users and refine
  7. Maintain consistency: Use the same patterns throughout your application
  8. Performance matters: Keep animations smooth (60fps) and optimize images
  1. 提前规划: 在进行更改前先查看设计原则
  2. 单一调色板: 坚持使用单一配色方案以保持一致性
  3. 真实设备测试: 模拟器无法完全呈现真实的响应式表现
  4. 保持简洁: 现代设计更倾向于简洁而非复杂
  5. 优先考虑可访问性: 从设计初期就为所有用户考虑
  6. 基于反馈迭代: 向用户展示设计并进行优化
  7. 保持一致性: 在整个应用中使用相同的设计模式
  8. 性能优先: 保持动画流畅（60fps）并优化图片

Common Use Cases

常见用例

Enhancing an Existing App

增强现有应用

  1. Select a color palette and implement it
  2. Replace basic buttons/inputs with enhanced components
  3. Add subtle animations to improve feedback
  4. Review and improve spacing consistency
  5. Ensure responsive behavior across devices
  1. 选择并实施一个调色板
  2. 用增强组件替换基础按钮/输入框
  3. 添加微妙的动画以提升反馈体验
  4. 评审并改进间距一致性
  5. 确保在不同设备上的响应式表现

Building a Landing Page

构建着陆页

  1. Use hero section layout as the focal point
  2. Add feature grid to showcase key features
  3. Implement consistent button styles for CTAs
  4. Add staggered animations for visual interest
  5. Test responsiveness thoroughly
  1. 以英雄区布局为核心
  2. 添加功能网格展示关键特性
  3. 为CTA按钮实现一致的样式
  4. 添加交错动画提升视觉吸引力
  5. 全面测试响应式表现

Creating a Dashboard

创建仪表盘

  1. Use card components for data sections
  2. Implement consistent spacing and hierarchy
  3. Choose a professional color palette
  4. Add skeleton loaders for data fetching
  5. Ensure touch-friendly controls on mobile
  1. 使用卡片组件展示数据区域
  2. 实现一致的间距和层级
  3. 选择专业的调色板
  4. 为数据加载添加骨架屏
  5. 确保移动端的触控友好控件

Redesigning Forms

重新设计表单

  1. Replace inputs with enhanced input components
  2. Add clear error and validation states
  3. Ensure proper label associations
  4. Implement loading states for submission
  5. Test keyboard navigation flow
  1. 用增强输入组件替换原有输入框
  2. 添加清晰的错误和验证状态
  3. 确保标签关联正确
  4. 为提交操作实现加载状态
  5. 测试键盘导航流程