菜单
**Philosophy:** Every pixel has purpose. Restraint is luxury. User psychology drives decisions.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.
Apply consistent changes across many files at once. One pattern, many targets.
**MANDATORY:** Use for complex/vague requests, new features, updates.
Reduce AI token usage by **6.8x average** (up to **49x** on monorepos) by giving the AI a structural map of your codebase instead of letting it read everything.
Keep sessions productive by compressing completed work while preserving key decisions.
Advanced multi-agent coordination with parallel dispatch and synthesis. Use for complex tasks requiring multiple specialist perspectives.
| name | frontend-design |
| description | **Philosophy:** Every pixel has purpose. Restraint is luxury. User psychology drives decisions. |
Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions. Core Principle: THINK, don't memorize. ASK, don't assume.
Read REQUIRED files always, OPTIONAL only when needed:
| File | Status | When to Read |
|---|---|---|
| ux-psychology.md | 🔴 REQUIRED | Always read first! |
| color-system.md | ⚪ Optional | Color/palette decisions |
| typography-system.md | ⚪ Optional | Font selection/pairing |
| visual-effects.md | ⚪ Optional | Glassmorphism, shadows, gradients |
| animation-guide.md | ⚪ Optional | Animation needed |
| motion-graphics.md | ⚪ Optional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optional | Context templates |
🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.
Execute these for audits (don't read, just run):
| Script | Purpose | Usage |
|---|---|---|
scripts/ux_audit.py | UX Psychology & Accessibility Audit | python scripts/ux_audit.py <project_path> |
STOP! If the user's request is open-ended, DO NOT default to your favorites.
Color not specified? Ask:
"What color palette do you prefer? (blue/green/orange/neutral/other?)"
Style not specified? Ask:
"What style are you going for? (minimal/bold/retro/futuristic/organic?)"
Layout not specified? Ask:
"Do you have a layout preference? (single column/grid/asymmetric/full-width?)"
| AI Default Tendency | Why It's Bad | Think Instead |
|---|---|---|
| Bento Grids (Modern Cliché) | Used in every AI design | Why does this content NEED a grid? |
| Hero Split (Left/Right) | Predictable & Boring | How about Massive Typography or Vertical Narrative? |
| Mesh/Aurora Gradients | The "new" lazy background | What's a radical color pairing? |
| Glassmorphism | AI's idea of "premium" | How about solid, high-contrast flat? |
| Deep Cyan / Fintech Blue | Safe harbor from purple ban | Why not Red, Black, or Neon Green? |
| "Orchestrate / Empower" | AI-generated copywriting | How would a human say this? |
| Dark background + neon glow | Overused, "AI look" | What does the BRAND actually need? |
| Rounded everything | Generic/Safe | Where can I use sharp, brutalist edges? |
🔴 "Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."
Before any design work, ANSWER THESE or ASK USER:
| Constraint | Question | Why It Matters |
|---|---|---|
| Timeline | How much time? | Determines complexity |
| Content | Ready or placeholder? | Affects layout flexibility |
| Brand | Existing guidelines? | May dictate colors/fonts |
| Tech | What stack? | Affects capabilities |
| Audience | Who exactly? | Drives all visual decisions |
| Audience | Think About |
|---|---|
| Gen Z | Bold, fast, mobile-first, authentic |
| Millennials | Clean, minimal, value-driven |
| Gen X | Familiar, trustworthy, clear |
| Boomers | Readable, high contrast, simple |
| B2B | Professional, data-focused, trust |
| Luxury | Restrained elegance, whitespace |
| Law | Principle | Application |
|---|---|---|
| Hick's Law | More choices = slower decisions | Limit options, use progressive disclosure |
| Fitts' Law | Bigger + closer = easier to click | Size CTAs appropriately |
| Miller's Law | ~7 items in working memory | Chunk content into groups |
| Von Restorff | Different = memorable | Make CTAs visually distinct |
| Serial Position | First/last remembered most | Key info at start/end |
VISCERAL (instant) → First impression: colors, imagery, overall feel
BEHAVIORAL (use) → Using it: speed, feedback, efficiency
REFLECTIVE (memory) → After: "I like what this says about me"
Use for proportional harmony:
├── Content : Sidebar = roughly 62% : 38%
├── Each heading size = previous × 1.618 (for dramatic scale)
├── Spacing can follow: sm → md → lg (each × 1.618)
All spacing and sizing in multiples of 8:
├── Tight: 4px (half-step for micro)
├── Small: 8px
├── Medium: 16px
├── Large: 24px, 32px
├── XL: 48px, 64px, 80px
└── Adjust based on content density
| Element | Consideration |
|---|---|
| Touch targets | Minimum comfortable tap size |
| Buttons | Height based on importance hierarchy |
| Inputs | Match button height for alignment |
| Cards | Consistent padding, breathable |
| Reading width | 45-75 characters optimal |
60% → Primary/Background (calm, neutral base)
30% → Secondary (supporting areas)
10% → Accent (CTAs, highlights, attention)
| If You Need... | Consider Hues | Avoid |
|---|---|---|
| Trust, calm | Blue family | Aggressive reds |
| Growth, nature | Green family | Industrial grays |
| Energy, urgency | Orange, red | Passive blues |
| Luxury, creativity | Deep Teal, Gold, Emerald | Cheap-feeling brights |
| Clean, minimal | Neutrals | Overwhelming color |
For detailed color theory: color-system.md
| Content Type | Scale Ratio | Feel |
|---|---|---|
| Dense UI | 1.125-1.2 | Compact, efficient |
| General web | 1.25 | Balanced (most common) |
| Editorial | 1.333 | Readable, spacious |
| Hero/display | 1.5-1.618 | Dramatic impact |
Contrast + Harmony:
├── DIFFERENT enough for hierarchy
├── SIMILAR enough for cohesion
└── Usually: display + neutral, or serif + sans
For detailed typography: typography-system.md
Key properties:
├── Semi-transparent background
├── Backdrop blur
├── Subtle border for definition
└── ⚠️ **WARNING:** Standard blue/white glassmorphism is a modern cliché. Use it radically or not at all.
Elevation concept:
├── Higher elements = larger shadows
├── Y-offset > X-offset (light from above)
├── Multiple layers = more realistic
└── Dark mode: may need glow instead
Harmonious gradients:
├── Adjacent colors on wheel (analogous)
├── OR same hue, different lightness
├── Avoid harsh complementary pairs
├── 🚫 **NO Mesh/Aurora Gradients** (floating blobs)
└── VARY from project to project radically
For complete effects guide: visual-effects.md
Duration based on:
├── Distance (further = longer)
├── Size (larger = slower)
├── Importance (critical = clear)
└── Context (urgent = fast, luxury = slow)
| Action | Easing | Why |
|---|---|---|
| Entering | Ease-out | Decelerate, settle in |
| Leaving | Ease-in | Accelerate, exit |
| Emphasis | Ease-in-out | Smooth, deliberate |
| Playful | Bounce | Fun, energetic |
For animation patterns: animation-guide.md, for advanced: motion-graphics.md
For EVERY design task:
1. CONSTRAINTS
└── What's the timeline, brand, tech, audience?
└── If unclear → ASK
2. CONTENT
└── What content exists?
└── What's the hierarchy?
3. STYLE DIRECTION
└── What's appropriate for context?
└── If unclear → ASK (don't default!)
4. EXECUTION
└── Apply principles above
└── Check against anti-patterns
5. REVIEW
└── "Does this serve the user?"
└── "Is this different from my defaults?"
└── "Would I be proud of this?"
For deeper guidance on specific areas:
| Skill | When to Use |
|---|---|
| frontend-design (this) | Before coding - Learn design principles (color, typography, UX psychology) |
| web-design-guidelines | After coding - Audit for accessibility, performance, and best practices |
After implementing your design, run the audit:
1. DESIGN → Read frontend-design principles ← YOU ARE HERE
2. CODE → Implement the design
3. AUDIT → Run web-design-guidelines review
4. FIX → Address findings from audit
Next Step: After coding, use
web-design-guidelinesskill to audit your implementation for accessibility, focus states, animations, and performance issues.
Remember: Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users. Avoid the Modern SaaS Safe Harbor!
[!IMPORTANT] For Next.js 16+ projects, use the native
next/formcomponent instead of standard HTML<form>for all GET-based search/filter operations.
<Form> Component Advantageimport Form from 'next/form'
export default function SearchBar() {
return (
<Form action="/search" className="flex gap-2">
<input
name="q"
placeholder="Search products..."
className="border p-2"
/>
<button type="submit">Search</button>
</Form>
)
}
<Form> vs. standard <form>:next/form for: Search, Filtering, Sorting, Pagination (GET requests).<form> for: Mutations, Login, Data Entry (POST requests via Server Actions).Animation principles and timing psychology - learn to decide, not copy. No fixed durations to memorize - understand what affects timing.
Factors that determine animation speed:
├── DISTANCE: Further travel = longer duration
├── SIZE: Larger elements = slower animations
├── COMPLEXITY: Complex = slower to process
├── IMPORTANCE: Critical actions = clear feedback
└── CONTEXT: Urgent = fast, luxurious = slow
| Purpose | Range | Why |
|---|---|---|
| Instant feedback | 50-100ms | Below perception threshold |
| Micro-interactions | 100-200ms | Quick but noticeable |
| Standard transitions | 200-300ms | Comfortable pace |
| Complex animations | 300-500ms | Time to follow |
| Page transitions | 400-600ms | Smooth handoff |
| Wow/Premium Effects | 800ms+ | Dramatic, organic spring-based, layered |
Ask yourself:
Easing = how speed changes over time
├── Linear: constant speed (mechanical, robotic)
├── Ease-out: fast start, slow end (natural entry)
├── Ease-in: slow start, fast end (natural exit)
└── Ease-in-out: slow both ends (smooth, deliberate)
| Easing | Best For | Feels Like |
|---|---|---|
| Ease-out | Elements entering | Arriving, settling |
| Ease-in | Elements leaving | Departing, exiting |
| Ease-in-out | Emphasis, loops | Deliberate, smooth |
| Linear | Continuous motion | Mechanical, constant |
| Bounce/Elastic | Playful UI | Fun, energetic |
/* Entering view = ease-out (decelerate) */
.enter {
animation-timing-function: ease-out;
}
/* Leaving view = ease-in (accelerate) */
.exit {
animation-timing-function: ease-in;
}
/* Continuous = ease-in-out */
.continuous {
animation-timing-function: ease-in-out;
}
Purpose of micro-interactions:
├── FEEDBACK: Confirm the action happened
├── GUIDANCE: Show what's possible
├── STATUS: Indicate current state
└── DELIGHT: Small moments of joy
Hover → slight visual change (lift, color, scale)
Active → pressed feeling (scale down, shadow change)
Focus → clear indicator (outline, ring)
Loading → progress indicator (spinner, skeleton)
Success → confirmation (check, color)
scale(0.95), hover = translateY(-4px) + glow)| Situation | Approach |
|---|---|
| Quick load (<1s) | No indicator needed |
| Medium (1-3s) | Spinner or simple animation |
| Long (3s+) | Progress bar or skeleton |
| Unknown duration | Indeterminate indicator |
Purpose: Reduce perceived wait time
├── Show layout shape immediately
├── Animate subtly (shimmer, pulse)
├── Replace with content when ready
└── Feels faster than spinner
When to show progress:
├── User-initiated action
├── File uploads/downloads
├── Multi-step processes
└── Long operations
When NOT needed:
├── Very quick operations
├── Background tasks
└── Initial page loads (skeleton better)
Simple rule: exit fast, enter slower
├── Outgoing content fades quickly
├── Incoming content animates in
└── Avoids "everything moving at once"
| Pattern | When to Use |
|---|---|
| Fade | Safe default, works everywhere |
| Slide | Sequential navigation (prev/next) |
| Scale | Opening/closing modals |
| Shared element | Maintaining visual continuity |
Navigation direction = animation direction
├── Forward → slide from right
├── Backward → slide from left
├── Deeper → scale up from center
├── Back up → scale down
Content appears as user scrolls:
├── Reduces initial cognitive load
├── Rewards exploration
├── Must not feel sluggish
└── Option to disable (accessibility)
| When to Trigger | Effect |
|---|---|
| Just entering viewport | Standard reveal |
| Centered in viewport | For emphasis |
| Partially visible | Earlier reveal |
| Fully visible | Late trigger |
| Element | Effect | Intent |
|---|---|---|
| Clickable card | Lift + shadow | "This is interactive" |
| Button | Color/brightness change | "Press me" |
| Image | Zoom/scale | "View closer" |
| Link | Underline/color | "Navigate here" |
Celebrate appropriately:
├── Minor action → subtle check/color
├── Major action → more pronounced animation
├── Completion → satisfying animation
└── Match brand personality
Draw attention without panic:
├── Color change (semantic red)
├── Shake animation (brief!)
├── Focus on error field
└── Clear messaging
GPU-accelerated (FAST):
├── transform: translate, scale, rotate
└── opacity: 0 to 1
CPU-intensive (SLOW):
├── width, height
├── top, left, right, bottom
├── margin, padding
├── border-radius changes
└── box-shadow changes
@media (prefers-reduced-motion: reduce) {
/* Honor this preference */
/* Essential animations only */
/* Reduce or remove decorative motion */
}
Before adding animation:
Remember: Animation is communication. Every motion should have meaning and serve the user experience.
Color theory principles, selection process, and decision-making guidelines. No memorized hex codes - learn to THINK about color.
YELLOW
│
Yellow- │ Yellow-
Green │ Orange
╲ │ ╱
╲ │ ╱
GREEN ─────────── ● ─────────── ORANGE
╱ │ ╲
╱ │ ╲
Blue- │ Red-
Green │ Orange
│
RED
│
PURPLE
╱ ╲
Blue- Red-
Purple Purple
╲ ╱
BLUE
| Scheme | How to Create | When to Use |
|---|---|---|
| Monochromatic | Pick ONE hue, vary only lightness/saturation | Minimal, professional, cohesive |
| Analogous | Pick 2-3 ADJACENT hues on wheel | Harmonious, calm, nature-inspired |
| Complementary | Pick OPPOSITE hues on wheel | High contrast, vibrant, attention |
| Split-Complementary | Base + 2 colors adjacent to complement | Dynamic but balanced |
| Triadic | 3 hues EQUIDISTANT on wheel | Vibrant, playful, creative |
┌─────────────────────────────────────────────────┐
│ │
│ 60% PRIMARY (Background, large areas) │
│ → Should be neutral or calming │
│ → Carries the overall tone │
│ │
├────────────────────────────────────┬────────────┤
│ │ │
│ 30% SECONDARY │ 10% ACCENT │
│ (Cards, sections, headers) │ (CTAs, │
│ → Supports without dominating │ highlights)│
│ │ → Draws │
│ │ attention│
└────────────────────────────────────┴────────────┘
:root {
/* 60% - Pick based on light/dark mode and mood */
--color-bg: /* neutral: white, off-white, or dark gray */
--color-surface: /* slightly different from bg */
/* 30% - Pick based on brand or context */
--color-secondary: /* muted version of primary or neutral */
/* 10% - Pick based on desired action/emotion */
--color-accent: /* vibrant, attention-grabbing */
}
| If Project Is... | Consider These Hues | Why |
|---|---|---|
| Finance, Tech, Healthcare | Blues, Teals | Trust, stability, calm |
| Eco, Wellness, Nature | Greens, Earth tones | Growth, health, organic |
| Food, Energy, Youth | Orange, Yellow, Warm | Appetite, excitement, warmth |
| Luxury, Beauty, Creative | Deep Teal, Gold, Black | Sophistication, premium |
| Urgency, Sales, Alerts | Red, Orange | Action, attention, passion |
| Hue Family | Positive Associations | Cautions |
|---|---|---|
| Blue | Trust, calm, professional | Can feel cold, corporate |
| Green | Growth, nature, success | Can feel boring if overused |
| Red | Passion, urgency, energy | High arousal, use sparingly |
| Orange | Warmth, friendly, creative | Can feel cheap if saturated |
| Purple | ⚠️ BANNED - AI overuses this! | Use Deep Teal/Maroon/Emerald instead |
| Yellow | Optimism, attention, happy | Hard to read, use as accent |
| Black | Elegance, power, modern | Can feel heavy |
| White | Clean, minimal, open | Can feel sterile |
Instead of memorizing hex codes, learn to manipulate HSL:
HSL = Hue, Saturation, Lightness
Hue (0-360): The color family
0/360 = Red
60 = Yellow
120 = Green
180 = Cyan
240 = Blue
300 = Purple
Saturation (0-100%): Color intensity
Low = Muted, sophisticated
High = Vibrant, energetic
Lightness (0-100%): Brightness
0% = Black
50% = Pure color
100% = White
Given ANY base color, create a scale:
Lightness Scale:
50 (lightest) → L: 97%
100 → L: 94%
200 → L: 86%
300 → L: 74%
400 → L: 66%
500 (base) → L: 50-60%
600 → L: 48%
700 → L: 38%
800 → L: 30%
900 (darkest) → L: 20%
| Context | Saturation Level |
|---|---|
| Professional/Corporate | Lower (40-60%) |
| Playful/Youth | Higher (70-90%) |
| Dark Mode | Reduce by 10-20% |
| Accessibility | Ensure contrast, may need adjustment |
Step 1: Identify the Context
What type of project?
├── E-commerce → Need trust + urgency balance
├── SaaS/Dashboard → Need low-fatigue, data focus
├── Health/Wellness → Need calming, natural feel
├── Luxury/Premium → Need understated elegance
├── Creative/Portfolio → Need personality, memorable
└── Other → ASK the user
Step 2: Select Primary Hue Family
Based on context, pick ONE:
- Blue family (trust)
- Green family (growth)
- Warm family (energy)
- Neutral family (elegant)
- OR ask user preference
Step 3: Decide Light/Dark Mode
Consider:
- User preference?
- Industry standard?
- Content type? (text-heavy = light preferred)
- Time of use? (evening app = dark option)
Step 4: Generate Palette Using Principles
Background layers (darker → lighter as elevation increases):
Layer 0 (base) → Darkest
Layer 1 (cards) → Slightly lighter
Layer 2 (modals) → Even lighter
Layer 3 (popups) → Lightest dark
| Light Mode | Dark Mode Adjustment |
|---|---|
| High saturation accent | Reduce saturation 10-20% |
| Pure white background | Dark gray with brand hue tint |
| Black text | Light gray (not pure white) |
| Colorful backgrounds | Desaturated, darker versions |
| Level | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| Use Case | Guideline |
|---|---|
| Text on light bg | Use lightness 35% or less |
| Text on dark bg | Use lightness 85% or more |
| Primary on white | Ensure dark enough variant |
| Buttons | High contrast between bg and text |
Before finalizing any color choice, verify:
Remember: Colors are decisions, not defaults. Every project deserves thoughtful selection based on its unique context.
Context-based design THINKING, not fixed solutions. These are decision GUIDES, not copy-paste templates. For UX psychology principles (Hick's, Fitts', etc.) see: ux-psychology.md
This file helps you DECIDE, not copy.
┌─────────────────────────────────────────────────────────────┐
│ WHAT ARE YOU BUILDING? │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────────────┼─────────────────────┐
│ │ │
▼ ▼ ▼
E-COMMERCE SaaS/APP CONTENT
- Product pages - Dashboard - Blog
- Checkout - Tools - Portfolio
- Catalog - Admin - Landing
│ │ │
▼ ▼ ▼
PRINCIPLES: PRINCIPLES: PRINCIPLES:
- Trust - Functionality - Storytelling
- Action - Clarity - Emotion
- Urgency - Efficiency - Creativity
TARGET AUDIENCE
│
├── Gen Z (18-25)
│ ├── Colors: Bold, vibrant, unexpected combinations
│ ├── Type: Large, expressive, variable
│ ├── Layout: Mobile-first, vertical, snackable
│ ├── Effects: Motion, gamification, interactive
│ └── Approach: Authentic, fast, no corporate feel
│
├── Millennials (26-41)
│ ├── Colors: Muted, earthy, sophisticated
│ ├── Type: Clean, readable, functional
│ ├── Layout: Responsive, card-based, organized
│ ├── Effects: Subtle, purposeful only
│ └── Approach: Value-driven, transparent, sustainable
│
├── Gen X (42-57)
│ ├── Colors: Professional, trusted, conservative
│ ├── Type: Familiar, clear, no-nonsense
│ ├── Layout: Traditional hierarchy, predictable
│ ├── Effects: Minimal, functional feedback
│ └── Approach: Direct, efficient, reliable
│
├── Boomers (58+)
│ ├── Colors: High contrast, simple, clear
│ ├── Type: Large sizes, high readability
│ ├── Layout: Simple, linear, uncluttered
│ ├── Effects: None or very minimal
│ └── Approach: Clear, detailed, trustworthy
│
└── B2B / Enterprise
├── Colors: Professional palette, muted
├── Type: Clean, data-friendly, scannable
├── Layout: Grid-based, organized, efficient
├── Effects: Professional, subtle
└── Approach: Expert, solution-focused, ROI-driven
WHAT EMOTION/ACTION DO YOU WANT?
│
├── Trust & Security
│ └── Consider: Blue family, professional neutrals
│ → ASK user for specific shade preference
│
├── Growth & Health
│ └── Consider: Green family, natural tones
│ → ASK user if eco/nature/wellness focus
│
├── Urgency & Action
│ └── Consider: Warm colors (orange/red) as ACCENTS
│ → Use sparingly, ASK if appropriate
│
├── Luxury & Premium
│ └── Consider: Deep darks, metallics, restrained palette
│ → ASK about brand positioning
│
├── Creative & Playful
│ └── Consider: Multi-color, unexpected combinations
│ → ASK about brand personality
│
└── Calm & Minimal
└── Consider: Neutrals with single accent
→ ASK what accent color fits brand
WHAT'S THE CONTENT TYPE?
│
├── Data-Heavy (Dashboard, SaaS)
│ ├── Style: Sans-serif, clear, compact
│ ├── Scale: Tighter ratio (1.125-1.2)
│ └── Priority: Scannability, density
│
├── Editorial (Blog, Magazine)
│ ├── Style: Serif heading + Sans body works well
│ ├── Scale: More dramatic (1.333+)
│ └── Priority: Reading comfort, hierarchy
│
├── Modern Tech (Startup, SaaS Marketing)
│ ├── Style: Geometric or humanist sans
│ ├── Scale: Balanced (1.25)
│ └── Priority: Modern feel, clarity
│
├── Luxury (Fashion, Premium)
│ ├── Style: Elegant serif or thin sans
│ ├── Scale: Dramatic (1.5-1.618)
│ └── Priority: Sophistication, whitespace
│
└── Playful (Kids, Games, Casual)
├── Style: Rounded, friendly fonts
├── Scale: Varied, expressive
└── Priority: Fun, approachable, readable
E-commerce typically needs:
├── Trust color (often blue family) → ASK preference
├── Clean background (white/neutral) → depends on brand
├── Action accent (for CTAs, sales) → depends on urgency level
├── Success/error semantics → standard conventions work
└── Brand integration → ASK about existing colors
┌────────────────────────────────────────────────────┐
│ HEADER: Brand + Search + Cart │
│ (Keep essential actions visible) │
├────────────────────────────────────────────────────┤
│ TRUST ZONE: Why trust this site? │
│ (Shipping, returns, security - if applicable) │
├────────────────────────────────────────────────────┤
│ HERO: Primary message or offer │
│ (Clear CTA, single focus) │
├────────────────────────────────────────────────────┤
│ CATEGORIES: Easy navigation │
│ (Visual, filterable, scannable) │
├────────────────────────────────────────────────────┤
│ PRODUCTS: Easy comparison │
│ (Price, rating, quick actions visible) │
├────────────────────────────────────────────────────┤
│ SOCIAL PROOF: Why others trust │
│ (Reviews, testimonials - if available) │
├────────────────────────────────────────────────────┤
│ FOOTER: All the details │
│ (Policies, contact, trust badges) │
└────────────────────────────────────────────────────┘
Dashboard typically needs:
├── Background: Light OR dark (ASK preference)
├── Surface: Slight contrast from background
├── Primary accent: For key actions
├── Data colors: Success/warning/danger semantics
└── Muted: For secondary information
Consider these patterns (not mandated):
OPTION A: Sidebar + Content
├── Fixed sidebar for navigation
└── Main area for content
OPTION B: Top nav + Content
├── Horizontal navigation
└── More horizontal content space
OPTION C: Collapsed + Expandable
├── Icon-only sidebar expands
└── Maximum content area
→ ASK user about their navigation preference
Landing page typically needs:
├── Brand primary: Hero background or accent
├── Clean secondary: Most of page
├── CTA color: Stands out from everything
├── Supporting: For sections, testimonials
└── ASK about brand colors first!
┌────────────────────────────────────────────────────┐
│ Navigation: Minimal, CTA visible │
├────────────────────────────────────────────────────┤
│ HERO: Hook + Value + CTA │
│ (Most important section, biggest impact) │
├────────────────────────────────────────────────────┤
│ PROBLEM: What pain do they have? │
├────────────────────────────────────────────────────┤
│ SOLUTION: How you solve it │
├────────────────────────────────────────────────────┤
│ PROOF: Why believe you? │
│ (Testimonials, logos, stats) │
├────────────────────────────────────────────────────┤
│ HOW: Simple explanation of process │
├────────────────────────────────────────────────────┤
│ PRICING: If applicable │
├────────────────────────────────────────────────────┤
│ FAQ: Address objections │
├────────────────────────────────────────────────────┤
│ FINAL CTA: Repeat main action │
└────────────────────────────────────────────────────┘
Portfolio is personal - many options:
├── Minimal: Neutrals + one signature accent
├── Bold: Unexpected color choices
├── Dark: Moody, artistic feel
├── Light: Clean, professional feel
└── ASK about personal brand identity!
┌────────────────────────────────────────────────────┐
│ Navigation: Unique to your personality │
├────────────────────────────────────────────────────┤
│ INTRO: Who you are, what you do │
│ (Make it memorable, not generic) │
├────────────────────────────────────────────────────┤
│ WORK: Featured projects │
│ (Large, visual, interactive) │
├────────────────────────────────────────────────────┤
│ ABOUT: Personal story │
│ (Creates connection) │
├────────────────────────────────────────────────────┤
│ CONTACT: Easy to reach │
│ (Clear, direct) │
└────────────────────────────────────────────────────┘
Simple landing page
Small portfolio
Basic form
Single component
→ Approach: Minimal decisions, focused execution
Multi-page site
Dashboard with modules
E-commerce category
Complex forms
→ Approach: Establish tokens, custom components
Full SaaS application
E-commerce platform
Custom design system
Complex workflows
→ Approach: Full design system, documentation, testing
Remember: These templates show STRUCTURE and THINKING process. Every project needs fresh color, typography, and styling decisions based on its unique context. ASK when unclear.
Advanced animation techniques for premium web experiences - Lottie, GSAP, SVG, 3D, Particles. Learn the principles, create WOW effects.
JSON-based vector animations:
├── Exported from After Effects via Bodymovin
├── Lightweight (smaller than GIF/video)
├── Scalable (vector-based, no pixelation)
├── Interactive (control playback, segments)
└── Cross-platform (web, iOS, Android, React Native)
| Use Case | Why Lottie? |
|---|---|
| Loading animations | Branded, smooth, lightweight |
| Empty states | Engaging illustrations |
| Onboarding flows | Complex multi-step animations |
| Success/Error feedback | Delightful micro-interactions |
| Animated icons | Consistent cross-platform |
Professional timeline-based animation:
├── Precise control over sequences
├── ScrollTrigger for scroll-driven animations
├── MorphSVG for shape transitions
├── Physics-based easing
└── Works with any DOM element
| Concept | Purpose |
|---|---|
| Tween | Single A→B animation |
| Timeline | Sequenced/overlapping animations |
| ScrollTrigger | Scroll position controls playback |
| Stagger | Cascade effect across elements |
| Type | Technique | Use Case |
|---|---|---|
| Line Drawing | stroke-dashoffset | Logo reveals, signatures |
| Morph | Path interpolation | Icon transitions |
| Transform | rotate, scale, translate | Interactive icons |
| Color | fill/stroke transition | State changes |
How stroke-dashoffset drawing works:
├── Set dasharray to path length
├── Set dashoffset equal to dasharray (hidden)
├── Animate dashoffset to 0 (revealed)
└── Create "drawing" effect
CSS 3D Space:
├── perspective: depth of 3D field (500-1500px typical)
├── transform-style: preserve-3d (enable children 3D)
├── rotateX/Y/Z: rotation per axis
├── translateZ: move toward/away from viewer
└── backface-visibility: show/hide back side
| Pattern | Use Case |
|---|---|
| Card flip | Reveals, flashcards, product views |
| Tilt on hover | Interactive cards, 3D depth |
| Parallax layers | Hero sections, immersive scrolling |
| 3D carousel | Image galleries, sliders |
| Type | Feel | Use Case |
|---|---|---|
| Geometric | Tech, network | SaaS, tech sites |
| Confetti | Celebration | Success moments |
| Snow/Rain | Atmospheric | Seasonal, mood |
| Dust/Bokeh | Dreamy | Photography, luxury |
| Fireflies | Magical | Games, fantasy |
| Library | Best For |
|---|---|
| tsParticles | Configurable, lightweight |
| particles.js | Simple backgrounds |
| Canvas API | Custom, maximum control |
| Three.js | Complex 3D particles |
CSS Scroll Timelines:
├── animation-timeline: scroll() - document scroll
├── animation-timeline: view() - element in viewport
├── animation-range: entry/exit thresholds
└── No JavaScript required
| Trigger Point | Use Case |
|---|---|
| Entry 0% | When element starts entering |
| Entry 50% | When half visible |
| Cover 50% | When centered in viewport |
| Exit 100% | When fully exited |
CHEAP (GPU-accelerated):
├── transform (translate, scale, rotate)
├── opacity
└── filter (use sparingly)
EXPENSIVE (triggers reflow):
├── width, height
├── top, left, right, bottom
├── padding, margin
└── complex box-shadow
will-change before heavy animations (remove after)prefers-reduced-motionWhat animation do you need?
│
├── Complex branded animation?
│ └── Lottie (After Effects export)
│
├── Sequenced scroll-triggered?
│ └── GSAP + ScrollTrigger
│
├── Logo/icon animation?
│ └── SVG animation (stroke or morph)
│
├── Interactive 3D effect?
│ └── CSS 3D Transforms (simple) or Three.js (complex)
│
├── Atmospheric background?
│ └── tsParticles or Canvas
│
└── Simple entrance/hover?
└── CSS @keyframes or Framer Motion
| ❌ Don't | ✅ Do |
|---|---|
| Animate everything at once | Stagger and sequence |
| Use heavy libraries for simple effects | Start with CSS |
| Ignore reduced-motion | Always provide fallback |
| Block main thread | Optimize for 60fps |
| Same particles every project | Match brand/context |
| Complex effects on mobile | Feature detection |
| Effect | Tool | Performance |
|---|---|---|
| Loading spinner | CSS/Lottie | Light |
| Staggered reveal | GSAP/Framer | Medium |
| SVG path draw | CSS stroke | Light |
| 3D card flip | CSS transforms | Light |
| Particle background | tsParticles | Heavy |
| Scroll parallax | GSAP ScrollTrigger | Medium |
| Shape morphing | GSAP MorphSVG | Medium |
Remember: Motion graphics should enhance, not distract. Every animation must serve a PURPOSE—feedback, guidance, delight, or storytelling.
Typography principles and decision-making - learn to think, not memorize. No fixed font names or sizes - understand the system.
A mathematical relationship between font sizes:
├── Pick a BASE size (usually body text)
├── Pick a RATIO (multiplier)
└── Generate all sizes using: base × ratio^n
| Ratio | Value | Feeling | Best For |
|---|---|---|---|
| Minor Second | 1.067 | Very subtle | Dense UI, small screens |
| Major Second | 1.125 | Subtle | Compact interfaces |
| Minor Third | 1.2 | Comfortable | Mobile apps, cards |
| Major Third | 1.25 | Balanced | General web (most common) |
| Perfect Fourth | 1.333 | Noticeable | Editorial, blogs |
| Perfect Fifth | 1.5 | Dramatic | Headlines, marketing |
| Golden Ratio | 1.618 | Maximum impact | Hero sections, display |
Given: base = YOUR_BASE_SIZE, ratio = YOUR_RATIO
Scale:
├── xs: base ÷ ratio²
├── sm: base ÷ ratio
├── base: YOUR_BASE_SIZE
├── lg: base × ratio
├── xl: base × ratio²
├── 2xl: base × ratio³
├── 3xl: base × ratio⁴
└── ... continue as needed
| Context | Base Size Range | Why |
|---|---|---|
| Mobile-first | 16-18px | Readability on small screens |
| Desktop app | 14-16px | Information density |
| Editorial | 18-21px | Long-form reading comfort |
| Accessibility focus | 18px+ | Easier to read |
Contrast + Harmony:
├── Different ENOUGH to create hierarchy
├── Similar ENOUGH to feel cohesive
└── Usually: serif + sans, or display + neutral
| Strategy | How | Result |
|---|---|---|
| Contrast | Serif heading + Sans body | Classic, editorial feel |
| Same Family | One variable font, different weights | Cohesive, modern |
| Same Designer | Fonts by same foundry | Often harmonious proportions |
| Era Match | Fonts from same time period | Historical consistency |
When pairing, compare:
├── x-height (height of lowercase letters)
├── Letter width (narrow vs wide)
├── Stroke contrast (thin/thick variation)
└── Overall mood (formal vs casual)
| Heading Style | Body Style | Mood |
|---|---|---|
| Geometric sans | Humanist sans | Modern, friendly |
| Display serif | Clean sans | Editorial, sophisticated |
| Neutral sans | Same sans | Minimal, tech |
| Bold geometric | Light geometric | Contemporary |
Line height depends on:
├── Font size (larger text = less line height needed)
├── Line length (longer lines = more line height)
├── Font design (some fonts need more space)
└── Content type (headings vs body)
| Content Type | Line Height Range | Why |
|---|---|---|
| Headings | 1.1 - 1.3 | Short lines, want compact |
| Body text | 1.4 - 1.6 | Comfortable reading |
| Long-form | 1.6 - 1.8 | Maximum readability |
| UI elements | 1.2 - 1.4 | Space efficiency |
The sweet spot: 45-75 characters per line
├── < 45: Too choppy, breaks flow
├── 45-75: Comfortable reading
├── > 75: Eye tracking strain
/* Character-based (recommended) */
max-width: 65ch; /* ch = width of "0" character */
/* This adapts to font size automatically */
| Context | Character Range |
|---|---|
| Desktop article | 60-75 characters |
| Mobile | 35-50 characters |
| Sidebar text | 30-45 characters |
| Wide monitors | Still cap at ~75ch |
Fixed sizes don't scale well:
├── Desktop size too big on mobile
├── Mobile size too small on desktop
└── Breakpoint jumps feel jarring
/* Syntax: clamp(MIN, PREFERRED, MAX) */
font-size: clamp(
MINIMUM_SIZE,
FLUID_CALCULATION,
MAXIMUM_SIZE
);
/* FLUID_CALCULATION typically:
base + viewport-relative-unit */
| Element | Scaling Behavior |
|---|---|
| Body text | Slight scaling (1rem → 1.125rem) |
| Subheadings | Moderate scaling |
| Headings | More dramatic scaling |
| Display text | Most dramatic scaling |
| Weight Range | Name | Use For |
|---|---|---|
| 300-400 | Light/Normal | Body text, paragraphs |
| 500 | Medium | Subtle emphasis |
| 600 | Semibold | Subheadings, labels |
| 700 | Bold | Headings, strong emphasis |
| 800-900 | Heavy/Black | Display, hero text |
Good contrast = skip at least 2 weight levels
├── 400 body + 700 heading = good
├── 400 body + 500 emphasis = subtle
├── 600 heading + 700 subheading = too similar
Large text (headings): tighter tracking
├── Letters are big, gaps feel larger
└── Slight negative tracking looks better
Small text (body): normal or slightly wider
├── Improves readability at small sizes
└── Never negative for body text
ALL CAPS: always wider tracking
├── Uppercase lacks ascenders/descenders
└── Needs more space to feel right
| Context | Tracking Adjustment |
|---|---|
| Display/Hero | -2% to -4% |
| Headings | -1% to -2% |
| Body text | 0% (normal) |
| Small text | +1% to +2% |
| ALL CAPS | +5% to +10% |
Ways to create hierarchy:
├── SIZE (most obvious)
├── WEIGHT (bold stands out)
├── COLOR (contrast levels)
├── SPACING (margins separate sections)
└── POSITION (top = important)
| Level | Characteristics |
|---|---|
| Primary (H1) | Largest, boldest, most distinct |
| Secondary (H2) | Noticeably smaller but still bold |
| Tertiary (H3) | Medium size, may use weight only |
| Body | Standard size and weight |
| Caption/Meta | Smaller, often lighter color |
Ask: "Can I tell what's most important at a glance?"
If squinting at the page, the hierarchy should still be clear.
Users scan in F-pattern:
├── Across the top (first line)
├── Down the left side
├── Across again (subheading)
└── Continue down left
Implication: Key info on left and in headings
Before finalizing typography:
Remember: Typography is about communication clarity. Choose based on content needs and audience, not personal preference.
Deep dive into UX laws, emotional design, trust building, and behavioral psychology.
Principle: The time to make a decision increases logarithmically with the number of choices.
Decision Time = a + b × log₂(n + 1)
Where n = number of choices
Application:
Example:
❌ Bad: 15 menu items in one nav
✅ Good: 5 main categories + "More"
❌ Bad: 20 form fields at once
✅ Good: 3-step wizard with 5-7 fields each
Principle: Time to reach a target = function of distance and size.
MT = a + b × log₂(1 + D/W)
Where D = distance, W = width
Application:
Button Sizing:
/* Size by importance */
.btn-primary { height: 48px; padding: 0 24px; }
.btn-secondary { height: 40px; padding: 0 16px; }
.btn-tertiary { height: 36px; padding: 0 12px; }
/* Mobile touch targets */
@media (hover: none) {
.btn { min-height: 44px; min-width: 44px; }
}
Principle: Average person can hold 7±2 chunks in working memory.
Application:
Chunking Example:
❌ 5551234567
✅ 555-123-4567
❌ Long paragraph of text without breaks
✅ Short paragraphs
With bullet points
And subheadings
Principle: An item that stands out is more likely to be remembered.
Application:
Example:
/* All buttons gray, primary stands out */
.btn { background: #E5E7EB; }
.btn-primary { background: #3B82F6; }
/* Recommended plan highlighted */
.pricing-card { border: 1px solid #E5E7EB; }
.pricing-card.popular {
border: 2px solid #3B82F6;
box-shadow: var(--shadow-lg);
}
Principle: Items at the beginning (primacy) and end (recency) of a list are remembered best.
Application:
Example:
Navigation: Home | [key items] | Contact
Long landing page:
- CTA at hero (top)
- Content sections
- CTA repeated at bottom
Principle: Users spend most of their time on other sites. They prefer your site to work the same way as all the other sites they already know.
Application:
Example:
❌ Bad: A website where clicking the logo takes you to an "About Us" page.
✅ Good: Clicking the logo always returns the user to the Homepage.
❌ Bad: Using a "Star" icon to represent "Delete."
✅ Good: Using a "Trash Can" icon to represent "Delete."
Principle: For any system, there is a certain amount of complexity which cannot be reduced, only shifted from user to software.
Application:
Example:
❌ Bad: Making users type "USD $" before every price field in a form.
✅ Good: The app automatically prefixing the "$" based on the user's location.
❌ Bad: Forcing users to manually select their "Card Type" (Visa/Mastercard).
✅ Good: Detecting the card type automatically from the first four digits entered.
Principle: Any task will inflate until all available time is spent.
Application:
Example:
❌ Bad: A 10-page registration form that allows users to browse away and lose data.
✅ Good: A "One-Tap Sign In" using Google or Apple ID.
❌ Bad: Giving a user an indefinite amount of time to fill out a bio.
✅ Good: Providing a "Suggested Bios" feature to help them finish in seconds.
Principle: Productivity skyrockets when a computer and its users interact at a pace (<400ms) that ensures neither has to wait on the other.
Application:
Example:
❌ Bad: A button that does nothing for 2 seconds after being clicked.
✅ Good: A button that immediately changes color and shows a "Loading" spinner.
❌ Bad: A blank white screen that appears while data is fetching.
✅ Good: A skeleton screen showing the gray outlines of where content will appear.
Principle: Be conservative in what you do, be liberal in what you accept from others.
Application:
Example:
❌ Bad: Rejecting a phone number because the user put a space in it.
✅ Good: Accepting the input and stripping the spaces automatically.
❌ Bad: Forcing users to type "January" instead of "01" or "Jan."
✅ Good: A date field that understands all three formats.
Principle: Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected. The simplest solution is usually the best.
Application:
Example:
❌ Bad: A "Login" button that opens a new page, then email, then password.
✅ Good: A single login modal that asks for both on one screen.
❌ Bad: Using 5 different font sizes and 4 colors on a single card.
✅ Good: Using 2 font sizes and 1 accent color.
Principle: Objects that are near, or proximate to each other, tend to be grouped together.
Application:
Example:
❌ Bad: Large, equal gaps between every line of text in a form.
✅ Good: Tight spacing between a label and its input, with larger gaps between pairs.
❌ Bad: A "Submit" button floating in the middle of a page, far from the form.
✅ Good: The "Submit" button placed directly under the last input field.
Principle: The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Application:
Example:
❌ Bad: Some links are blue, some are green, and some are just bold black.
✅ Good: Every clickable text element in the app is the same shade of Blue.
❌ Bad: Using a "Blue Button" for "Submit" and the same "Blue Button" for "Cancel."
✅ Good: "Submit" is Solid Blue; "Cancel" is a Blue Outline (Ghost Button).
Principle: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Application:
Example:
❌ Bad: A list of news articles where the text and image of different stories overlap.
✅ Good: Each article is contained within its own white card on a light gray background.
❌ Bad: A footer that has the same background color as the main body.
✅ Good: A dark-themed footer that clearly separates legal links from page content.
Principle: Elements that are visually connected (e.g., via lines, arrows) are perceived as more related than elements with no connection.
Application:
Example:
❌ Bad: A 3-step setup where the numbers "1", "2", and "3" are scattered.
✅ Good: A horizontal line connecting "1", "2", and "3" to show a sequence.
❌ Bad: Floating dropdown menus that don't touch the button that opened them.
✅ Good: A dropdown menu that visually "attaches" to the parent button.
Principle: People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort.
Application:
Example:
❌ Bad: A hyper-realistic 3D illustration of a file folder for the "Files" icon.
✅ Good: A simple 2D outline of a folder.
❌ Bad: A multi-colored, complex logo used as a loading spinner.
✅ Good: A simple, single-color circular ring.
Principle: The eye differentiates an object from its surrounding area. a form, silhouette, or shape is perceived as figure (object), while the surrounding area is perceived as ground (background).
Application:
Example:
❌ Bad: A popup window that has no shadow or border, blending into the page.
✅ Good: A modal with a drop shadow and a dimmed background overlay.
❌ Bad: White text placed directly over a busy, multi-colored photograph.
✅ Good: White text placed over a dark semi-transparent "scrim."
Principle: Whatever stands out visually will capture and hold the viewer’s attention first.
Application:
Example:
❌ Bad: A homepage with 5 buttons of the same size and color.
✅ Good: One large "Get Started" button in a bright color.
❌ Bad: A dashboard where "Total Revenue" is the same size as "System Version."
✅ Good: "Total Revenue" displayed in huge, bold numbers at the top center.
Principle: People remember uncompleted or interrupted tasks better than completed tasks.
Application:
Example:
❌ Bad: A silent onboarding process that gives no indication of what's left.
✅ Good: A checklist that shows "3 of 5 steps finished."
❌ Bad: An e-learning app that shows a checkmark even if a video was half-watched.
✅ Good: A progress ring that stays half-full until the video is finished.
Principle: The tendency to approach a goal increases with proximity to the goal.
Application:
Example:
❌ Bad: A progress bar that starts at 0% and feels like a long climb.
✅ Good: A bar that starts at 20% because the user "started" by opening the app.
❌ Bad: A checkout flow where the "Final Review" feels like a surprise 5th step.
✅ Good: Clearly labeling the steps: "Shipping > Payment > Almost Done!"
Principle: People judge an experience largely based on how they felt at its peak (the most intense point) and at its end, rather than the total sum or average of every moment.
Application:
Example:
❌ Bad: After a 20-minute tax filing process, the app just says "Submitted."
✅ Good: A "Congratulations!" screen with a summary of the refund amount.
❌ Bad: A game that ends with a simple "Game Over" text in plain font.
✅ Good: A summary screen showing high scores with celebratory music.
Principle: Users often perceive aesthetically pleasing design as design that’s more usable.
Application:
Example:
❌ Bad: A banking app with misaligned text and clashing 1990s colors.
✅ Good: A sleek, modern banking app with smooth animations.
❌ Bad: Using low-resolution, pixelated stock photos.
✅ Good: Using high-definition, custom brand illustrations.
Principle: Users rely heavily on the first piece of information offered (the "anchor") when making decisions.
Application:
Example:
❌ Bad: Only showing the price "$49."
✅ Good: Showing "~~$99~~ $49 (50% Off)."
❌ Bad: Sorting a list of laptops from cheapest to most expensive.
✅ Good: Showing a high-end "Pro" model first to make others seem cheap.
Principle: People copy the actions of others in an attempt to undertake behavior in a given situation.
Application:
Example:
❌ Bad: A signup page with just a form.
✅ Good: A signup page that says "Join 2 million designers."
❌ Bad: Anonymous reviews with no names or photos.
✅ Good: Reviews that include a face, a name, and a "Verified Buyer" tag.
Principle: Humans place a higher value on an object that is scarce, and a lower value on those that are in abundance.
Application:
Example:
❌ Bad: A sale that never ends and has no countdown.
✅ Good: A "Deal of the Day" with a ticking timer.
❌ Bad: Showing a product is available with no stock count.
✅ Good: "Only 3 left at this price!"
Principle: The tendency to attribute greater accuracy to the opinion of an authority figure and be more influenced by that opinion.
Application:
Example:
❌ Bad: A health blog written by "Admin."