modern-web-design

Modern Web Design Creator

Build beautiful, responsive websites using modern design principles, Tailwind CSS, and contemporary UI patterns. Creates production-ready code with animations, responsive layouts, and accessibility features.

When to Use This Skill

Use this skill for:

• Landing pages and marketing websites
• Portfolio and personal brand sites
• Business and company websites
• SaaS application interfaces
• E-commerce product pages
• Blog and content sites
• Dashboard and admin interfaces

Design System Foundation

Core Principles

• Mobile-first responsive design with breakpoint optimization
• Design tokens for consistent spacing, colors, and typography
• Component-based architecture for maintainable code
• Accessibility-first development with ARIA labels and semantic HTML
• Performance optimization with minimal CSS and efficient animations

Style Categories

Reference references/design-systems.md for complete style specifications:

Minimalist Professional

• Clean typography with generous whitespace
• Neutral color palette with strategic accent colors
• Subtle shadows and minimal animations
• Focus on content hierarchy and readability

Modern SaaS

• Bold gradients and vibrant colors
• Card-based layouts with elevation
• Micro-interactions and hover states
• Dashboard-style components

Creative Portfolio

• Experimental layouts and grid systems
• Bold typography and creative color schemes
• Advanced animations and scroll effects
• Image-focused design patterns

E-commerce Optimized

• Product-focused layouts
• Trust signals and social proof elements
• Conversion-optimized CTAs
• Shopping and checkout flows

Implementation Workflow

1. Analyze Requirements: Determine site purpose, target audience, and functionality needs
2. Select Design Category: Choose appropriate style system from references
3. Generate Structure: Create semantic HTML with proper heading hierarchy
4. Apply Styling: Implement Tailwind CSS classes with design system tokens
5. Add Interactions: Include animations, hover states, and micro-interactions
6. Optimize Responsive: Ensure mobile-first responsive behavior
7. Enhance Accessibility: Add ARIA labels, alt text, and keyboard navigation

Code Generation Standards

HTML Structure

• Semantic HTML5 elements (<header>, <main>, <section>, <article>)
• Proper heading hierarchy (h1 → h6)
• Accessibility attributes (ARIA, alt text, roles)
• Meta tags for SEO and responsive design

CSS Framework

• Tailwind CSS utility classes for rapid development
• Custom CSS for complex animations and unique effects
• CSS variables for design token consistency
• Mobile-first media queries

JavaScript Features

• Vanilla JavaScript for lightweight interactions
• Intersection Observer for scroll animations
• Form validation and submission handling
• Mobile menu and navigation toggles

Component Library

Load assets/component-templates.html for reusable components:

Navigation Components

• Responsive header with mobile menu
• Sticky navigation with scroll effects
• Breadcrumb navigation
• Footer with social links

Content Sections

• Hero sections with various layouts
• Feature grids and comparison tables
• Testimonial carousels
• FAQ accordions
• Contact forms

Interactive Elements

• Animated buttons and CTAs
• Image galleries and lightboxes
• Progress bars and counters
• Modal dialogs and tooltips

Advanced Features

Animation System

• CSS transitions for smooth interactions
• Keyframe animations for complex movements
• Intersection Observer for scroll-triggered effects
• Performance-optimized animations

Performance Optimization

• Minimal CSS footprint with utility-first approach
• Lazy loading for images and heavy content
• Critical CSS inlining for above-fold content
• Progressive enhancement strategies

SEO Foundation

• Semantic HTML structure
• Meta tags and Open Graph
• JSON-LD structured data
• Performance optimization for Core Web Vitals

Supporting Resources

• references/design-systems.md: Complete style guides and color palettes
• assets/component-templates.html: Reusable HTML component library
• scripts/build-tools.js: Optimization and build utilities