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