AgentSkillsCN

ui-ux-designer

贯彻高端AI行业标准设计（玻璃质感、深色模式、微交互）。在修改任何前端组件时使用，以确保带来令人惊艳的视觉效果。

SKILL.md
--- frontmatter
name: ui-ux-designer
description: Enforce Premium AI Industry Standard Design (Glassmorphism, Dark Mode, Micro-interactions). Use when modifying ANY frontend component to ensure "wow" factor.
allowed-tools: ReplaceFileContent, MultiReplaceFileContent

Premium UI/UX Designer Skill

This skill enforces a high-end, "AI-native" aesthetic inspired by Linear, Vapi, and modern SaaS dashboards.

Core Design Principles

1. Typography (The "Premium" Feel)

  • •Font: Use Inter or Geist Sans.
  • •Sizing: Default text should be text-sm (14px). Use text-xs (12px) for metadata.
  • •Headings: text-lg or text-xl is usually large enough for section headers. text-3xl only for main page titles.
  • •Tracking: Use tracking-tight on almost ALL text larger than text-xs.
  • •Color: Never use pure black/white.
    • •Primary text: text-slate-50 (Dark Mode) / text-gray-900 (Light Mode)
    • •Secondary: text-slate-400 / text-gray-500
    • •Tertiary: text-slate-500 / text-gray-400

2. The Glassmorphism & Borders System

  • •Cards:
    • •Dark: bg-slate-900/50 backdrop-blur-md border border-slate-800/50
    • •Light: bg-white/70 backdrop-blur-md border border-gray-100 shadow-sm
  • •Borders: Subtle is key. border-slate-800 (dark) or border-gray-200 (light).
  • •Rounding: rounded-xl or rounded-2xl for containers. rounded-lg for internal elements (buttons, inputs).

3. Layout force

  • •Spacing: Use multiples of 4 (1rem). p-6 for cards, gap-4 or gap-6 for grids.
  • •Grids: Use "Bento Box" style grids for metrics.
  • •Whitespace: Don't crowd elements. "Airy" interfaces feel expensive.

4. Interaction & Performance (Anti- "Cheap" Feel)

  • •No Page Reloads: Use Client Components with SWR/React Query for data.
  • •Skeleton Loaders: NEVER show a spinning global loader for a small component update. Use skeletons where the content will appear.
  • •Transitions: transition-all duration-200 ease-in-out on interactive elements.
  • •Hover Effects: hover:bg-slate-800 (dark) or hover:bg-gray-50 (light) for table rows/list items.

Refactoring Checklist (The "Ugly" Fixer)

When user says "Ugly" or "Cheap", check for:

  1. • Font Sizes: Is everything too big? Downscale text-base to text-sm.
  2. • Contrast: Is secondary text too faint? Or too bold?
  3. • Borders: Are borders thick (2px)? Make them 1px and subtle.
  4. • Shadows: Are shadows generic? Use colored shadows or subtle diffused shadows.
  5. • Loading: Is the whole screen flashing white? Fix the loading state to be local.

Example Component Implementation

tsx
// Premium Card Example
<div className="group relative p-6 rounded-2xl border border-slate-800/60 bg-slate-900/40 backdrop-blur-sm hover:bg-slate-800/60 transition-all duration-300">
  <div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
  <h3 className="text-sm font-medium text-slate-400 tracking-tight">Total Revenue</h3>
  <div className="mt-2 flex items-baseline gap-2">
    <span className="text-2xl font-semibold text-slate-50 tracking-tight">$45,231.89</span>
    <span className="text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-full">+20.1%</span>
  </div>
</div>