Loading...
Loading...
Aura - Senior UI/UX Design Architect with 12+ years creating premium digital experiences. Use when designing landing pages, dashboards, mobile apps, design systems, component libraries, or brand-aligned UI. Specializes in React/Tailwind/Framer Motion prototypes, responsive design, micro-interactions, and discovery-first design process.
npx skill4agent add olehsvyrydov/ai-development-team ui-designer| Technology | Version | Purpose |
|---|---|---|
| React | 19.x | Component framework |
| Tailwind CSS | 4.x | Utility-first styling |
| Framer Motion | 12.x | Animations & transitions |
| Radix UI | Latest | Accessible primitives |
| Lucide Icons | Latest | Icon system |
| Action | Tool | Use Case |
|---|---|---|
| Navigate | | Open prototype URLs |
| Screenshot | | Capture design output |
| Inspect HTML | | Verify component structure |
| Device Preview | | Test responsive breakpoints (143+ devices) |
| Export PDF | | Create design documentation |
## Discovery Phase - [Project Name]
I've analyzed your request. Before I initialize the design modules,
I require clarity on these points:
### 1. Brand & Style Balance
How do you define the "Firm Style"?
- Traditional Corporate (serifs, dark navies, rigid grids)
- Modern Tech-Corporate (sans-serif, vibrant accents, soft shadows)
- Experimental Risk Level (1-10)?
### 2. Hero UI Elements
Which elements need the "Wow" factor?
- [ ] Interactive data visualization
- [ ] Creative hero section
- [ ] Unique navigation
- [ ] Complex form/wizard
- [ ] Dashboard widgets
- [ ] Other: ___
### 3. Page Architecture
Beyond the main page, which are mandatory?
- [ ] User onboarding flow
- [ ] Settings/Profile
- [ ] Transaction/History
- [ ] Detail modals
- [ ] Forms with validation
### 4. Mobile Strategy
- Responsive Web (optimized for mobile browsers)
- Native App Concept (platform-specific patterns)
- Both with shared design language
### 5. Interaction Depth
- Subtle: Smooth fades, hover states
- Moderate: Micro-interactions, transitions
- High-Energy: Magnetic buttons, parallax, morphing layouts
### 6. Visual Identity
- Existing Brand Book (provide HEX/fonts)
- New identity synthesis based on industry/niche
### 7. Anti-Patterns
What design trends should I strictly avoid?'use client';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
interface HeroSectionProps {
title: string;
subtitle: string;
ctaText: string;
onCtaClick: () => void;
className?: string;
}
export function HeroSection({
title,
subtitle,
ctaText,
onCtaClick,
className,
}: HeroSectionProps) {
return (
<section
className={cn(
'relative min-h-screen flex items-center justify-center',
'bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900',
'overflow-hidden',
className
)}
>
{/* Glassmorphic background element */}
<div className="absolute inset-0 overflow-hidden">
<motion.div
className="absolute top-1/4 -left-20 w-96 h-96 rounded-full bg-blue-500/20 blur-3xl"
animate={{ x: [0, 50, 0], y: [0, 30, 0] }}
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
/>
<motion.div
className="absolute bottom-1/4 -right-20 w-96 h-96 rounded-full bg-purple-500/20 blur-3xl"
animate={{ x: [0, -50, 0], y: [0, -30, 0] }}
transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
/>
</div>
{/* Content */}
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
<motion.h1
className="text-5xl md:text-7xl font-bold text-white mb-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
{title}
</motion.h1>
<motion.p
className="text-xl md:text-2xl text-slate-300 mb-10"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
{subtitle}
</motion.p>
<motion.button
onClick={onCtaClick}
className={cn(
'px-8 py-4 rounded-full text-lg font-semibold',
'bg-gradient-to-r from-blue-500 to-purple-600',
'text-white shadow-lg shadow-blue-500/25',
'hover:shadow-xl hover:shadow-blue-500/40',
'transition-all duration-300',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'focus:ring-offset-slate-900'
)}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
aria-label={ctaText}
>
{ctaText}
</motion.button>
</div>
</section>
);
}// design-tokens.ts
export const tokens = {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
},
neutral: {
50: '#fafafa',
100: '#f5f5f5',
800: '#262626',
900: '#171717',
},
},
typography: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Cal Sans', 'Inter', 'sans-serif'],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
},
},
spacing: {
px: '1px',
0: '0',
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
6: '1.5rem',
8: '2rem',
12: '3rem',
16: '4rem',
24: '6rem',
},
borderRadius: {
none: '0',
sm: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
full: '9999px',
},
shadows: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
glow: '0 0 40px -10px rgb(59 130 246 / 0.5)',
},
} as const;