SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场frontend-enhancer

frontend-enhancer

前端与建站

查看项目

更新于 10-15 08:33

技能介绍

用途

Frontend Enhancer 是一个用于提升 Next.js 网页应用视觉设计与美学效果的技能。它旨在将 Next.js 应用转化为现代、美观的网页体验，提供可直接用于生产环境的组件、设计指南、精选配色、平滑动画以及兼顾响应式与无障碍的布局模板。

主要能力

组件库

  • 按钮组件（assets/button-variants.tsx）：变体包括 primary、secondary、outline、ghost、danger；尺寸包括 sm、md、lg；带加载状态与动画 spinner；完整 TypeScript 支持；内置无障碍功能。
  • 卡片组件（assets/card-variants.tsx）：变体包括 default、bordered、elevated、interactive；子组件包括 CardHeader、CardTitle、CardDescription、CardContent、CardFooter；具有悬停效果与过渡；可灵活设置内边距。
  • 输入组件（assets/input-variants.tsx）：文本输入带验证状态；Textarea 组件；支持左右图标；显示错误与辅助文本；与 Label 集成；完整无障碍支持。

布局模板

  • 首屏区（assets/layout-hero-section.tsx）：三种变体（居中、分栏、极简）；支持主次 CTA；可选背景渐变；支持图片或插图；内置动画。
  • 特性网格（assets/layout-feature-grid.tsx）：可配置列数（2、3 或 4）；图标集成；错落动画；悬停效果；完全响应式。

设计系统指南

参考 references/design_principles.md，涵盖视觉层级最佳实践、间距与节奏、字体建议、色彩理论与用法、一致性标准、响应式策略、无障碍指南（WCAG AA/AAA）、常见布局模式。适用于开始新设计、做视觉层级决策、确保无障碍合规、建立应用内一致性、审查设计质量时参考。

配色方案

references/color_palettes.md 提供六套专业配色：Corporate Blue（专业可信，商务应用、SaaS）、Vibrant Purple（创意现代，创意工具、作品集）、Minimalist Gray（简洁精致，极简设计）、Warm Sunset（活力友好，消费应用、电商）、Ocean Fresh（平静专业，健康、金融应用）、Dark Mode（现代护眼，开发者工具、仪表盘）。每套包含主色与副色、强调色、背景与表面色、文本色（主次）、语义色（成功、警告、错误）、边框色。实现方式可选择 Tailwind CSS、CSS 变量或内联样式。

动画与过渡

assets/animations.css 提供：淡入淡出（fadeIn、fadeOut、fadeInUp、fadeInDown）、滑动（slideInLeft、slideInRight）、缩放（scaleIn、scaleOut）、工具类（bounce、pulse、spin）、骨架屏加载（shimmer 效果）、悬停效果（lift、glow、scale）、列表错落延迟。所有动画尊重 prefers-reduced-motion。

使用方式

增强流程：

  1. 评估现状：找出视觉不足处、不一致样式、响应式行为、无障碍问题、配色与字体。
  2. 选择设计方向：从配色文档选择方案，阅读设计原则，决定组件变体与风格，规划布局改进。
  3. 实现基础：设置 cn 工具函数（assets/utils-cn.ts），配置配色（Tailwind 或 CSS 变量），将动画 CSS 加入全局样式，确保间距一致。
  4. 应用组件：用增强组件替换基础元素，在关键页面实现布局模板，统一样式，添加动画与过渡。
  5. 打磨：测试不同设备尺寸响应式，验证无障碍（键盘导航、对比度、屏幕阅读器），统一悬停与聚焦状态，优化性能，在 prefers-reduced-motion 下测试。
  6. 最终审查：检查所有页面视觉层级、颜色一致性、交互状态、响应式断点与无障碍合规。

组件使用工作流：从 assets/ 复制所需组件文件到项目 components 目录，确保存在 cn 工具函数，按品牌自定义颜色、间距或变体，然后在页面中导入使用。布局模板同理，复制到 components 目录后按需调整 props 与内容。

工具函数设置：将 assets/utils-cn.ts 复制到项目 lib/utils.ts；安装依赖 npm install clsx tailwind-merge；在组件中导入 import { cn } from '@/lib/utils';。

动画使用：将 assets/animations.css 复制到全局 CSS，应用如 animate-fade-in-up、hover-lift 等类，列表使用 stagger 类，必要时自定义时长与缓动。建议动画保持细微（微交互 200-300ms），用于引导注意力，避免过度动效，始终在 prefers-reduced-motion 下测试。

响应式策略：移动优先。基础样式针对移动端（320px+），sm 断点（640px+），md（768px+），lg（1024px+），xl（1280px+）。需测试每个断点。

无障碍清单：颜色对比度满足 WCAG AA（文本 4.5:1）；交互元素可键盘访问；聚焦指示清晰；使用语义 HTML；图片有 alt；表单有正确标签；动画尊重 prefers-reduced-motion；触控目标至少 44x44px。

适用场景

  • 增强现有应用：选择并实现配色，用增强组件替换基础按钮与输入框，添加细微动画，改进间距一致性，确保响应式。
  • 构建落地页：以首屏区为焦点，用特性网格展示功能，统一 CTA 按钮样式，添加错落动画。
  • 创建仪表盘：用卡片组件展示数据区，统一间距与层级，选择专业配色，添加骨架加载器，确保移动端触控友好。
  • 重新设计表单：替换为增强输入组件，添加清晰错误与验证状态，确保标签关联，实现提交加载状态，测试键盘导航。

限制

  • 该技能主要面向 Next.js 应用，是否支持其他框架暂未提供。
  • 具体价格与收费模式暂未提供。
  • 除组件复制与依赖安装外，完整安装与构建步骤暂未提供。
  • 组件依赖 cn 工具函数及 clsx、tailwind-merge 依赖。