AgentSkillsCN

premium-ui-design

“wasser”项目的系统设计指南。聚焦于玻璃质感、动画和高端美学。当创建新的UI组件或重构现有组件时，可使用此功能。

SKILL.md
--- frontmatter
name: premium-ui-design
description: Design system guidelines for the "wasser" project. Focuses on glassmorphism, animations, and high-end aesthetics. Use when creating new UI components or refactoring existing ones.

Premium UI Design: "wasser"

Maintain a high-end, modern, and fluid user interface that "wows" the user.

Visual Language

1. Glassmorphism

Use semi-transparent backgrounds with backdrops-blur.

  • •Surface: rgba(255, 255, 255, 0.1) (light) / rgba(15, 23, 42, 0.6) (dark).
  • •Blur: backdrop-filter: blur(12px).
  • •Border: Subtle 1px white border at 0.1 opacity.

2. Color Palette

Defined in tailwind.config.js and src/theme/index.ts.

  • •Primary: Deep Teal / Blue.
  • •Accents: Vivid gradients representing water purity.
  • •Mineral Colors: See mineralConfig.ts for specific color tokens per mineral.

Micro-Interactions (Framer Motion)

Every action should have a physical feel.

  • •Entry: Subtle slide + fade-in (duration: 0.4, ease: "easeOut").
  • •Hover: Slight scale-up (1.02) + shadow increase.
  • •Feedback: "Haptic" style animations for button presses.

Layout Principles

  • •Safe Area: Always respect env(safe-area-inset-top) and bottom.
  • •Spacing: Use 4px grid (spacing-1, 2, 4, 8).
  • •Typography: Outfit/Inter with tight letter-spacing for headings.

Component Reference

  • •Icons: Lucide React.
  • •UI Components: MUI (Material UI) + custom styled wrappers.
  • •Backgrounds: LivingBackground.tsx for dynamic particle effects.