Design Improvement Skill

Purpose

Streamline design optimization with systematic improvements following project design principles.

Prevents: Inconsistent design, broken responsive layouts, brand violations Ensures: Color palette consistency, mobile-first responsive design, professional appearance

Design Principles

Color Palette

css
1Primary:    slate-blue (#475569, #64748b)
2Accent:     coral-orange (#fb923c, #f97316)
3Background: warm-cream (#fef3c7, #fef9c3)
4Gradients:  Smooth transitions for visual interest

Typography

Hierarchy: h1 > h2 > h3 > p (clear distinction)
Body text: 16px+ for readability
Line-height: Consistent spacing
Hero sections: Center-aligned

Layout

Approach: Mobile-first responsive
Spacing: Tailwind utilities (p-4, gap-6, etc.)
Animations: Framer Motion (smooth, not jarring)

Workflow

1. Analyze Current Design

markdown
1Issues Checklist:
2- [ ] Color consistency problems?
3- [ ] Layout/alignment issues?
4- [ ] Typography hierarchy unclear?
5- [ ] Spacing inconsistent?
6- [ ] Responsive breakpoints broken?
7- [ ] Animations missing/excessive?

2. Propose Improvements (CARIO)

yaml
1📋 Context:
2  - Page: [Home/Projects/About/Speaking]
3  - Current state: [description]
4  - Issue: [what looks bad]
5
6❓ Problems:
7  1. [Color inconsistency]
8  2. [Poor spacing]
9  3. [Weak hierarchy]
10
11🎯 Options:
12  A. Minor tweaks (15 min, low impact)
13  B. Moderate redesign (30-45 min, medium impact)
14  C. Major overhaul (1-2 hours, high impact)
15
16💡 Recommendation: [Option B]
17  - Changes: [color X→Y, spacing p-4→p-6, add gradient]
18  - Reasoning: [balances improvement vs time]
19
20⚡ Impact:
21  - Files: [list]
22  - Testing: [responsive + visual]

3. Get User Confirmation

Identified [N] design improvements for [Page] page:
1. [Change 1]
2. [Change 2]
3. [Change 3]

Proceed with these improvements?

4. Implement Changes

Checklist:

• Update Tailwind classes
• Ensure responsive (sm:, md:, lg: breakpoints)
• Add/update Framer Motion animations
• Maintain color palette
• Follow typography hierarchy

Example:

tsx
1// Before
2<div className="p-4 bg-white">
3  <h1 className="text-2xl">Title</h1>
4</div>
5
6// After
7<div className="p-6 md:p-8 bg-gradient-to-br from-warm-cream to-white">
8  <h1 className="text-3xl md:text-4xl font-bold text-slate-700 text-center mb-6">
9    Title
10  </h1>
11</div>

5. Test Responsive Design

bash
1npm run dev
2# Test at: Mobile (375px), Tablet (768px), Desktop (1280px)

Visual checklist:

• Mobile (< 640px): Readable, no overflow
• Tablet (640-1024px): Proper spacing
• Desktop (> 1024px): Optimal layout
• Animations: Smooth (60fps)

6. Commit and Deploy

bash
1npm run build  # Verify
2git add .
3git commit -m "style: improve [page] design with better spacing and colors"
4git push  # Auto-deploys to Vercel

Common Improvements

Hero Section Enhancement

tsx
1// Before: Basic section
2<section className="py-12">
3  <h1 className="text-3xl">Welcome</h1>
4</section>
5
6// After: Enhanced with gradient + animation
7<section className="py-16 md:py-24 bg-gradient-to-br from-warm-cream via-white to-blue-50">
8  <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
9    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-slate-600 to-slate-800 bg-clip-text text-transparent mb-6">
10      Welcome
11    </h1>
12  </motion.div>
13</section>

Card Grid Optimization

tsx
1// Before: Fixed 3-column grid
2<div className="grid grid-cols-3 gap-4">
3  {projects.map(p => <Card {...p} />)}
4</div>
5
6// After: Responsive grid with hover animation
7<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
8  {projects.map(p => (
9    <motion.div whileHover={{ scale: 1.03 }}>
10      <Card {...p} />
11    </motion.div>
12  ))}
13</div>

Typography Hierarchy

tsx
1// Before: Flat hierarchy
2<h1>Title</h1>
3<p>Body text</p>
4
5// After: Clear hierarchy
6<h1 className="text-4xl md:text-5xl font-bold text-slate-800 mb-4 leading-tight">
7  Title
8</h1>
9<p className="text-base md:text-lg text-slate-600 leading-relaxed max-w-prose">
10  Body text
11</p>

Quality Checklist

Before committing:

markdown
1Visual:
2- [ ] Colors match palette (slate-blue, coral-orange, warm-cream)
3- [ ] Spacing consistent (4px increments: p-4, p-6, p-8)
4- [ ] Typography hierarchy clear
5- [ ] Contrast WCAG AA (4.5:1 for text)
6
7Responsive:
8- [ ] Mobile (< 640px): Works
9- [ ] Tablet (640-1024px): Optimized
10- [ ] Desktop (> 1024px): Polished
11- [ ] No horizontal scroll
12- [ ] Touch targets ≥ 44px (mobile)
13
14Performance:
15- [ ] Animations smooth (60fps)
16- [ ] No layout shift (CLS < 0.1)
17- [ ] Next.js Image component used
18
19Consistency:
20- [ ] Matches existing pages' style
21- [ ] Follows Tailwind conventions
22- [ ] Framer Motion patterns consistent
23- [ ] Bilingual support maintained

Anti-Patterns

❌ Breaking Responsive

tsx
1// Bad: Fixed width
2<div className="w-[1200px]">Content</div>
3
4// Good: Responsive width
5<div className="w-full max-w-7xl mx-auto px-4">Content</div>

❌ Inconsistent Colors

tsx
1// Bad: Random colors
2<div className="bg-red-500 text-purple-700">Content</div>
3
4// Good: Follow palette
5<div className="bg-warm-cream text-slate-700">Content</div>

❌ Poor Typography

tsx
1// Bad: Unreadable
2<p className="text-xs">Important content</p>
3
4// Good: Readable
5<p className="text-base md:text-lg">Important content</p>

Quick Reference

Spacing Scale

p-4  = 16px   p-8  = 32px
p-6  = 24px   p-12 = 48px

Typography Scale

text-base = 16px   text-2xl = 24px   text-4xl = 36px
text-lg   = 18px   text-3xl = 30px   text-5xl = 48px

Responsive Breakpoints

sm: ≥ 640px (mobile landscape)
md: ≥ 768px (tablet)
lg: ≥ 1024px (desktop)
xl: ≥ 1280px (large desktop)

Integration

• content-update: Content + design updates together
• deploy-check: Pre-deployment design verification

Version: v1.1 | Updated: 2025-12-31 Project: young-personal-site Philosophy: "Design is not just what it looks like. Design is how it works." - Steve Jobs