Tag
Web Design prompts
32 prompts
Mesh Gradient with Grain Texture
Modern mesh gradient with multiple color points and fine grain overlay, creating depth while maintaining UI element visibility—ideal for hero sections and splash screens.
Expert Web Design Strategy and Technical Architecture
Provides comprehensive web design strategy including technical architecture, performance optimization, user experience design, and implementation roadmaps for professional web projects.
Modern Web Design System Generator with Component Library
Creates comprehensive web design systems including color palettes, typography scales, component specifications, and responsive grid frameworks for consistent digital experiences.
Minimalist Gradient Wave Background
Smooth, flowing wave gradients perfect for hero sections, splash screens, or modern web applications.
Soft Gradient with Subtle Noise Overlay
Clean, professional gradient with barely-there noise texture that adds depth without compromising readability—perfect for app backgrounds and dashboards.
Organic Blob Shape Background
Trendy, organic blob shapes with gradient fills, perfect for playful, modern brand interfaces.
SaaS Landing Page Hero Section UI Design
Creates compelling SaaS landing page hero section designs with clear value proposition, engaging visuals, and conversion-optimized layout for startup websites, design portfolios, and product marketing.
Gradient Mesh Web Background
Create modern gradient mesh backgrounds perfect for contemporary web design and landing pages
Geometric Pattern Background (abstract)
Clean, minimalist geometric patterns ideal for tech products, SaaS platforms, or fintech applications.
Glassmorphic Blur Background
A trendy glassmorphic style background with frosted glass effects, perfect for modern UI designs requiring depth and sophistication.
E-Commerce Product Page UI Mockup
Generates clean, modern e-commerce product page interface designs with professional layout, clear hierarchy, and conversion-optimized UI elements.
Progressive Web App Scaffold Generator
Generates a complete PWA implementation including service worker, web app manifest, offline fallback, caching strategies, push notification setup, and install prompt handling.
Abstract Particle Field Background
Dynamic particle systems creating depth and motion, ideal for tech, AI, or data visualization interfaces.
Hero Section Background Generator for Landing Pages
Creates compelling hero section backgrounds with depth, movement, and visual hierarchy perfect for website landing pages and marketing campaigns.
SVG Animation and Illustration Generator
Generates optimized SVG illustrations with CSS or SMIL animations, including path morphing, draw-on effects, and interactive states for icons, logos, and decorative elements.
Textured Web Section Divider Generator
Generates organic and geometric section dividers and transitions perfect for modern websites, creating visual separation between content areas with artistic flair.
Neumorphic Soft UI Background
Subtle neumorphic design with soft shadows and highlights, perfect for modern, tactile UI designs.
Design System Token Generator
Generates a complete design token system with color scales, typography, spacing, elevation, and motion tokens in multiple output formats for seamless design-to-code handoff.
Storybook Configuration and Story Writer
Generates complete Storybook configuration, story files with all variants, interactive controls, documentation pages, and visual testing setup for your component library.
Dark Mode Implementation Guide
Generates a complete dark mode implementation with theme tokens, toggle component, system preference detection, persistence, smooth transitions, and image adaptation for your frontend stack.
Internationalization Setup Guide Generator
Generates a complete i18n implementation with routing, translation file structure, pluralization, date/number formatting, and RTL support for your framework and locale requirements.
Image Optimization and Lazy Loading Setup
Generates a complete image optimization pipeline with responsive images, lazy loading, blur placeholders, format selection, CDN configuration, and Core Web Vitals optimizations.
CSS Grid and Flexbox Layout Solver
Takes a layout description or wireframe specification and generates the optimal CSS Grid or Flexbox implementation with responsive behavior, alignment, and gap handling.
Tailwind CSS Component Generator
Generates production-ready UI components styled entirely with Tailwind CSS, including responsive variants, dark mode support, and accessible markup for any component pattern you need.
Accessibility Audit and Fix Generator
Performs a comprehensive accessibility audit on your frontend code, identifies WCAG violations, and generates ready-to-apply fixes with ARIA attributes, semantic HTML, and keyboard navigation improvements.
WCAG Compliance Checker and Remediation Guide
Performs a systematic WCAG 2.2 compliance check across all four principles (Perceivable, Operable, Understandable, Robust) and generates a prioritized remediation plan with code fixes.
Abstract Gradient Web Background Generator
Creates smooth gradient backgrounds with subtle geometric overlays and soft lighting effects, perfect for website headers, landing pages, and modern web interfaces.
Form Validation System Builder
Generates a complete form validation system with schema definitions, real-time validation, accessible error messages, and multi-step form support for your chosen framework and validation library.
SEO Meta Tag and Structured Data Generator
Generates complete SEO meta tags, Open Graph tags, Twitter Cards, JSON-LD structured data, and canonical URL configuration for your page type and frontend framework.
Subtle Pattern Overlay Generator for Web Design
Generates delicate repeating patterns and textures perfect for website backgrounds, overlays, and design system elements that enhance visual depth without overwhelming content.
SSR vs SSG Migration Guide Generator
Generates a detailed migration guide for transitioning between server-side rendering and static site generation strategies, with framework-specific code changes, performance comparisons, and step-by-step implementation.
Responsive Grid and Layout System Builder
Generates a complete responsive grid and layout system with breakpoints, container queries, and fluid spacing, tailored to your CSS approach and design requirements.