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
- Analyze Requirements: Determine site purpose, target audience, and functionality needs
- Select Design Category: Choose appropriate style system from references
- Generate Structure: Create semantic HTML with proper heading hierarchy
- Apply Styling: Implement Tailwind CSS classes with design system tokens
- Add Interactions: Include animations, hover states, and micro-interactions
- Optimize Responsive: Ensure mobile-first responsive behavior
- 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 palettesassets/component-templates.html: Reusable HTML component libraryscripts/build-tools.js: Optimization and build utilities