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 (
,
,
,
)
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
← 返回排行榜