Web Design Expert Skill

Type: Design System & UX/UI Workflow Version: 1.0.0 Last Updated: 2025-11-07

Description

High-end web design team capabilities for creating exceptional user experiences. Combines visual design, UX research, accessibility, performance optimization, and rigorous testing protocols.

---

Core Competencies

1. Visual Design & Mockups

• Modern design systems (Tailwind, custom tokens)
• Typography hierarchy and readability
• Color theory and contrast ratios (WCAG 2.2 AA/AAA)
• Layout composition and white space
• Component design patterns
• Responsive design principles
• Animation and microinteraction design

2. User Experience (UX)

• User journey mapping
• Information architecture
• Conversion funnel optimization
• A/B test hypothesis and variant design
• Usability heuristics (Nielsen's 10)
• Mental models and user expectations
• Progressive disclosure patterns
• Cognitive load reduction

3. Accessibility (WCAG 2.2)

• Semantic HTML structure
• ARIA labels and roles
• Keyboard navigation
• Screen reader compatibility
• Focus management
• Color contrast (4.5:1 text, 3:1 UI)
• Touch target sizing (44x44px minimum)
• Alternative text and descriptions
• Motion reduction preferences

4. Performance Optimization

• Core Web Vitals (LCP, FID, CLS)
• Lighthouse score optimization
• Image optimization strategies
• Code splitting and lazy loading
• Bundle size management
• Caching strategies
• Critical rendering path
• Performance budgets

5. Testing & Quality Assurance

• Cross-browser testing (Chrome, Safari, Firefox, Edge)
• Device testing (iOS, Android, Desktop)
• Visual regression testing
• Screenshot comparison workflows
• Responsive design verification
• Touch interaction testing
• Load time testing (3G, 4G, WiFi)

---

Required MCP Integrations

Critical MCPs (Must Have)

1. Playwright MCP

Purpose: Visual testing, screenshots, browser automation Usage:

// Capture baseline screenshots
await playwright.screenshot({
  url: 'https://frankx.ai',
  selector: '#hero',
  viewport: { width: 1920, height: 1080 }
})

// Test responsive design
await playwright.screenshot({
  url: 'https://frankx.ai',
  viewport: { width: 375, height: 812 } // iPhone 13
})

// Visual regression testing
await playwright.compareScreenshots({
  before: 'baseline.png',
  after: 'current.png'
})

2. Vercel MCP (or equivalent hosting MCP)

Purpose: Deployment, analytics, performance monitoring Usage:

// Check current deployment
vercel.getDeployment({ project: 'frankx-ai' })

// Get analytics data
vercel.getAnalytics({
  project: 'frankx-ai',
  metrics: ['bounceRate', 'timeOnPage', 'conversionRate']
})

// Trigger preview deployment
vercel.deploy({
  branch: 'feature/hero-improvements',
  environment: 'preview'
})

// Run Lighthouse audit
vercel.runLighthouse({ url: 'preview-url' })

3. GitHub MCP

Purpose: Proper PR workflow, code review, issue tracking Usage:

// Create feature branch
github.createBranch({
  name: 'feature/2025-11-07-hero-improvements',
  from: 'v3'
})

// Create PR with screenshots
github.createPR({
  title: '✨ Improve homepage hero clarity',
  body: markdown_with_screenshots,
  reviewers: ['frankxai'],
  labels: ['design', 'ux-improvement']
})

// Check existing issues
github.searchIssues({
  repo: 'frankxai/frankx.ai-vercel-website',
  labels: ['bug', 'ux']
})

Recommended MCPs

4. Notion MCP

Purpose: Design documentation, strategy tracking Usage:

• Document design decisions
• Track A/B test results
• Maintain design system docs
• Update project roadmap

5. Linear MCP

Purpose: Task management, sprint planning Usage:

• Create design tasks
• Track implementation progress
• Link commits to tasks
• Sprint retrospectives

6. Figma MCP (if available)

Purpose: Design file integration Usage:

• Export design mockups
• Share component specs
• Version control for designs

7. Nano Banana MCP

Purpose: AI image generation Usage:

• Generate hero images
• Create placeholder graphics
• Mockup visual concepts
• Design variations

---

Standard Web Design Workflow

Phase 1: Research & Baseline (ALWAYS START HERE)

1. ✅ Capture Current State
   - Use Playwright MCP to screenshot all key pages
   - Organize screenshots: `/screenshots/baseline/YYYY-MM-DD/`
   - Document viewport: Desktop (1920x1080), Tablet (768x1024), Mobile (375x812)

2. ✅ Establish Performance Baseline
   - Run Lighthouse via Vercel MCP or direct
   - Document scores:
     * Performance: __/100
     * Accessibility: __/100
     * Best Practices: __/100
     * SEO: __/100
   - Check Core Web Vitals:
     * LCP: __ seconds
     * FID: __ ms
     * CLS: __ score

3. ✅ Analyze Current Analytics
   - Use Vercel MCP to get actual metrics:
     * Bounce rate: __%
     * Average time on page: __ seconds
     * Conversion rate: __%
     * Top exit pages: __
   - Don't estimate - use real data!

4. ✅ Document User Flows
   - Map current user journeys
   - Identify friction points
   - Note confusing elements
   - List accessibility issues

Phase 2: Design & Plan

1. ✅ Define Success Metrics
   - Specific, measurable goals
   - Example: "Reduce bounce rate from 80% to 60%"
   - Example: "Increase assessment starts by 30%"

2. ✅ Create Design Mockups (if major changes)
   - Use Figma or describe detailed changes
   - Show before/after comparison
   - Get stakeholder approval

3. ✅ Accessibility Check
   - Color contrast: Use tool to verify 4.5:1 minimum
   - Touch targets: Ensure 44x44px minimum
   - Semantic HTML: Plan proper heading structure
   - ARIA labels: Document where needed

4. ✅ Performance Budget
   - Maximum bundle size increase: +50KB
   - LCP target: <2.5 seconds
   - CLS target: <0.1
   - Lighthouse target: 95+ all categories

Phase 3: Develop & Iterate

1. ✅ Create Feature Branch
   - Use GitHub MCP or git commands
   - Name: feature/YYYY-MM-DD-description
   - Branch from: main or v3

2. ✅ Make Changes
   - Edit components
   - Follow design system patterns
   - Use TypeScript strict mode
   - Comment complex logic

3. ✅ Local Testing
   - Test in development mode
   - Verify responsive behavior
   - Check console for errors
   - Test keyboard navigation

Phase 4: Test & Validate

1. ✅ Capture After Screenshots
   - Use Playwright MCP for same viewports
   - Save to: `/screenshots/after/YYYY-MM-DD/`
   - Create comparison images

2. ✅ Cross-Browser Testing
   - Chrome (latest)
   - Safari (latest)
   - Firefox (latest)
   - Edge (latest)
   - Document any browser-specific issues

3. ✅ Device Testing
   - iOS (iPhone 13 Pro, iPad Pro)
   - Android (Pixel 7, Galaxy S23)
   - Desktop (1920x1080, 2560x1440)

4. ✅ Accessibility Audit
   - Run axe DevTools or similar
   - Test with keyboard only
   - Test with screen reader (VoiceOver or NVDA)
   - Verify ARIA labels
   - Check color contrast

5. ✅ Performance Testing
   - Run Lighthouse after changes
   - Compare to baseline
   - Check bundle size impact
   - Test on throttled connection (3G)

Phase 5: Deploy & Monitor

1. ✅ Deploy to Preview
   - Use Vercel MCP to trigger deployment
   - Get preview URL
   - Test preview thoroughly

2. ✅ Create PR with Evidence
   - Use GitHub MCP to create PR
   - Include before/after screenshots
   - Include Lighthouse comparison
   - List changes and impact
   - Tag reviewers

3. ✅ Share for Review
   - Preview URL
   - Screenshot comparisons
   - Performance metrics
   - Expected impact on KPIs

4. ✅ Monitor After Deploy
   - Watch analytics for 24-48 hours
   - Compare actual vs expected metrics
   - Document learnings
   - Iterate if needed

---

Design System Guidelines

Typography Scale

/* Heading Scale */
h1: 3.5rem (56px) - Hero headlines
h2: 3rem (48px) - Section headings
h3: 2rem (32px) - Subsection headings
h4: 1.5rem (24px) - Card titles
h5: 1.25rem (20px) - Small headings
h6: 1rem (16px) - Overlines

/* Body Scale */
body-large: 1.25rem (20px) - Subheadlines
body: 1rem (16px) - Default text
body-small: 0.875rem (14px) - Captions
body-xs: 0.75rem (12px) - Labels

Spacing Scale (Tailwind-based)

xs: 0.25rem (4px)
sm: 0.5rem (8px)
md: 1rem (16px)
lg: 1.5rem (24px)
xl: 2rem (32px)
2xl: 3rem (48px)
3xl: 4rem (64px)
4xl: 6rem (96px)

Color System Principles

// Primary Actions: Cyan/Blue gradient
primary: { 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2' }

// Creative/Music: Purple gradient
secondary: { 400: '#c084fc', 500: '#a855f7', 600: '#9333ea' }

// Content/Warm: Amber gradient
accent: { 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706' }

// Backgrounds: Slate (dark mode first)
bg-primary: slate-950
bg-secondary: slate-900
bg-tertiary: slate-800

// Text: High contrast
text-primary: white (on dark)
text-secondary: slate-300
text-tertiary: slate-400

Component Patterns

Button Hierarchy

// Primary: Main action (cyan gradient)
<button className="bg-gradient-to-r from-cyan-500 to-blue-600
  hover:from-cyan-400 hover:to-blue-500
  text-white font-semibold px-8 py-4 rounded-2xl
  shadow-[0_0_40px_rgba(6,182,212,0.3)]
  transition-all hover:-translate-y-1">
  Primary Action
</button>

// Secondary: Alternative action (outline)
<button className="border-2 border-white/20 bg-white/5
  hover:bg-white/10 hover:border-white/30
  text-white font-semibold px-8 py-4 rounded-2xl
  transition-all hover:-translate-y-1">
  Secondary Action
</button>

// Tertiary: Low emphasis (text only)
<button className="text-slate-300 hover:text-white
  font-medium px-4 py-2 transition-colors">
  Tertiary Action
</button>

Card Patterns

// Glass card with subtle border
<div className="rounded-3xl border border-white/10
  bg-white/5 backdrop-blur-sm p-8
  hover:bg-white/10 hover:border-white/20
  transition-all">
  Card Content
</div>

// Elevated card with shadow
<div className="rounded-3xl bg-white/5 p-8
  shadow-xl shadow-black/20
  hover:shadow-2xl hover:shadow-cyan-500/10
  transition-all">
  Card Content
</div>

---

Accessibility Checklist

Semantic HTML

• Proper heading hierarchy (h1 → h2 → h3, no skipping)
• Landmark regions (header, nav, main, aside, footer)
• Lists for grouped content (ul, ol)
• Buttons for actions, links for navigation
• Form labels associated with inputs

Keyboard Navigation

• All interactive elements focusable (tabindex="0" or native)
• Focus visible with clear outline
• Tab order logical and predictable
• Escape closes modals/dropdowns
• Enter/Space activates buttons
• Arrow keys for custom components

Screen Reader Support

• ARIA labels for icon-only buttons
• ARIA landmarks for page regions
• ARIA live regions for dynamic content
• Alt text for all images (descriptive, not decorative)
• Hidden decorative elements (aria-hidden="true")
• Skip to main content link

Visual Accessibility

• Color contrast ≥4.5:1 for text
• Color contrast ≥3:1 for UI elements
• Text resizable to 200% without breaking
• No information conveyed by color alone
• Focus indicators visible and clear
• Touch targets ≥44x44px

Motion & Animation

• Respect prefers-reduced-motion
• No auto-playing video with sound
• Parallax effects subtle
• Animations not essential to understanding
• Option to pause/stop animations

---

Performance Budget

Lighthouse Targets

Performance: ≥95
Accessibility: 100
Best Practices: 100
SEO: ≥95

Core Web Vitals

LCP (Largest Contentful Paint): <2.5s
FID (First Input Delay): <100ms
CLS (Cumulative Layout Shift): <0.1

Bundle Sizes

Initial JS: <200KB (gzipped)
CSS: <50KB (gzipped)
Total Page Weight: <1MB

Image Optimization

Format: WebP with fallback
Lazy loading: Below the fold
Responsive: srcset for multiple sizes
CDN: Use Vercel Image Optimization

---

Testing Protocol

Cross-Browser Testing Matrix

Browser	Desktop	Mobile	Notes
Chrome	✅ Latest	✅ Latest	Primary test browser
Safari	✅ Latest	✅ iOS 15+	Test webkit-specific features
Firefox	✅ Latest	✅ Latest	Test gecko engine
Edge	✅ Latest	-	Chromium-based

Device Testing Matrix

Device	Viewport	Test Focus
Desktop	1920x1080	Full feature set
Laptop	1440x900	Medium screens
iPad Pro	1024x1366	Tablet layout
iPhone 13 Pro	390x844	Mobile portrait
Galaxy S23	360x800	Small mobile

Testing Checklist

Visual Testing

• Hero section renders correctly
• All images load and display properly
• Typography is readable at all sizes
• Colors meet contrast requirements
• Animations are smooth (60fps)
• No layout shift on page load

Interaction Testing

• All buttons clickable/tappable
• Forms submit correctly
• Dropdowns open and close
• Modals/overlays function
• Links navigate correctly
• Error states display properly

Responsive Testing

• Mobile menu works
• Touch targets are 44x44px minimum
• No horizontal scroll
• Content readable without zooming
• Images scale appropriately

Performance Testing

• Page loads in <3s on 4G
• No render-blocking resources
• Images are optimized
• Fonts load efficiently
• No JavaScript errors in console

---

A/B Testing Framework

Hypothesis Template

**Hypothesis**: [Change] will [increase/decrease] [metric] because [reason]

**Example**:
Reducing CTAs from 3 to 1 will increase assessment starts by 30%
because it eliminates decision paralysis and creates a clear next action.

**Metric**: Assessment starts per 100 visitors
**Baseline**: 5 starts per 100 visitors
**Target**: 6.5 starts per 100 visitors (30% increase)
**Duration**: 2 weeks
**Traffic Split**: 50/50

Variant Design Process

1. Control: Current design (A)
2. Variant: New design (B)
3. Screenshot both: For documentation
4. Deploy both: Using feature flags or Vercel edge config
5. Track metrics: Conversion rate, bounce rate, time on page
6. Analyze: After reaching statistical significance
7. Implement winner: Deploy to 100% traffic

---

Documentation Standards

Design Decision Log

### [Feature Name] - YYYY-MM-DD

**Problem**:
[What user problem are we solving?]

**Solution**:
[What design change are we making?]

**Rationale**:
[Why this solution over alternatives?]

**Expected Impact**:
[Metrics we expect to improve]

**Actual Impact** (after deploy):
[Measured results]

**Learnings**:
[What we learned, what we'd do differently]

Component Documentation

## ComponentName

**Purpose**: [What it does]
**Used in**: [Which pages]
**Props**: [TypeScript interface]
**Variants**: [Different visual states]
**Accessibility**: [ARIA labels, keyboard support]
**Performance**: [Bundle impact, load time]

**Usage**:
\`\`\`tsx
<ComponentName prop1="value" prop2="value" />
\`\`\`

---

When to Use This Skill

Invoke this skill when:

• Designing new pages or components
• Optimizing conversion funnels
• Improving accessibility
• Running performance audits
• Conducting A/B tests
• Troubleshooting UX issues
• Creating design systems
• Reviewing visual design quality

---

Integration with FrankX Website Development

This skill enhances the

/frankx-website

command by ensuring:

• ✅ All design changes are data-driven
• ✅ Visual quality is maintained at highest level
• ✅ Accessibility is never compromised
• ✅ Performance budgets are respected
• ✅ Testing is comprehensive and rigorous
• ✅ Changes are deployed with confidence

---

Skill Version: 1.0.0 Last Updated: 2025-11-07 Maintained By: FrankX Website Development Team Review Frequency: Monthly or after major changes