| name | web-prompt-categories |
| description | Provide 60+ pre-built web template prompts organized by category (Business, E-commerce, Portfolio, Blog, etc.). Users select a category + template, and this skill provides a detailed starting prompt that can be used with web-builder-initial for instant, professional website generation.
Trigger conditions: - User requests: "show me template categories", "what templates are available", "生成模板" - User wants a specific type of site: "create an e-commerce site", "make a restaurant website" - Interactive template selection workflow
Outputs: Detailed prompt for selected template category
|
Web Prompt Categories - 60+ Template Database
Overview
The web-prompt-categories skill provides a curated library of 60+ pre-built web template prompts organized by industry and use case. Instead of starting from scratch, users can:
- Browse 14 categories (Business, E-commerce, Portfolio, Blog, SaaS, etc.)
- Select a specific template (e.g., "SaaS Landing Page", "Restaurant Menu Site")
- Get a detailed prompt that defines structure, features, and content
- Pass to web-builder-initial for instant professional website generation
This dramatically accelerates POC development by providing proven, production-ready website structures.
Template Categories
1. Business & SaaS (6 templates)
Template 1.1: SaaS Landing Page
Best for: Software companies, cloud platforms, B2B tools
Generated prompt:
Create a modern SaaS landing page with:
HEADER:
- Logo (left), navigation menu (center): Features, Pricing, About, Blog
- CTA buttons (right): "Sign In", "Start Free Trial" (primary)
HERO SECTION:
- Large headline: "Transform Your [Business Process]"
- Subheadline: Problem/solution statement (2 sentences)
- Primary CTA: "Start Free Trial" button
- Screenshot/mockup placeholder (1024x576)
- Trust badges: "14-day free trial", "No credit card required", "Cancel anytime"
FEATURES SECTION (3-column grid):
- Feature 1: Icon + title + 2-sentence description
- Feature 2: Icon + title + 2-sentence description
- Feature 3: Icon + title + 2-sentence description
- Use http://static.photos/technology/320x240/[1-3] for feature images
TESTIMONIALS:
- 3 customer quotes in cards
- Each with: Avatar placeholder (200x200), name, company, quote
- Use http://static.photos/people/200x200/[10-12] for avatars
PRICING TABLE (3 tiers):
- Starter ($29/mo): 3-5 features bullet list
- Professional ($79/mo): 5-7 features (highlight)
- Enterprise (Custom): 7-9 features
- Each tier has "Choose Plan" button
CTA SECTION:
- Headline: "Ready to get started?"
- Subheadline: Final value prop
- CTA button: "Start Your Free Trial"
- Background: gradient (primary to secondary color)
FOOTER:
- 4 columns: Product links, Company links, Resources, Social media
- Copyright notice
DESIGN:
- Primary color: Blue (#4F46E5)
- Secondary color: Purple (#9333EA)
- Modern, clean aesthetic with rounded corners
- Generous white space
- TailwindCSS for all styling
Template 1.2: Corporate Website
Best for: Established companies, professional services, consulting firms
Generated prompt:
Create a professional corporate website with:
PAGES: Home, About Us, Services, Careers, Contact
HOME PAGE:
- Hero with company tagline + CTA ("Learn More")
- "Our Services" section (4-column grid of service cards)
- Company stats (Years in business, Clients served, Projects completed)
- Latest news/blog posts (3 recent articles)
- Newsletter signup form
ABOUT US PAGE:
- Company history timeline (4-5 milestones)
- Leadership team (6-8 executive profiles with photos)
- Company values (4 core values with icons)
- Office locations map
SERVICES PAGE:
- Service 1-6 detailed cards (icon, title, description, "Learn More" link)
- CTA: "Request a Consultation"
DESIGN:
- Professional navy blue and gray color scheme
- Conservative, trustworthy aesthetic
- High-quality placeholder images from http://static.photos/office
Template 1.3: Startup Homepage
Best for: Tech startups, innovative products, pre-launch companies
Generated prompt:
Create a bold startup homepage with:
- Attention-grabbing hero: "The Future of [Industry]"
- Product demo video embed placeholder
- "How It Works" (3-step process with numbers)
- Early access signup form (email + "Join Waitlist" button)
- Investor logos (6 investor/partner logos)
- FAQ accordion (8-10 common questions)
- Footer with social proof ("10,000+ users on waitlist")
DESIGN:
- Vibrant gradient backgrounds
- Bold typography (large headings)
- Playful micro-interactions (hover effects)
- Primary color: Electric Blue (#0EA5E9)
Template 1.4: Agency Portfolio
Best for: Marketing agencies, design studios, creative agencies
Generated prompt:
Create a creative agency portfolio with:
- Hero: "We create experiences that move people"
- Services grid (Strategy, Design, Development, Marketing)
- Case studies (6 project cards with hover effects)
- Each card: Client name, project type, featured image, "View Case Study" link
- Client logos marquee (15+ client logos scrolling)
- Team members (12 team cards with hover reveal)
- Awards/recognition badges
- Contact form with office address
DESIGN:
- Black and white base with accent color (Cyan #06B6D4)
- Large typography, asymmetric layouts
- Creative use of negative space
Template 1.5: Freelancer Portfolio
Best for: Independent contractors, freelance developers/designers, consultants
Generated prompt:
Create a personal freelancer portfolio with:
- Hero: Photo + "Hi, I'm [Name]" + headline + CTA ("View My Work")
- About section (bio, skills list, experience summary)
- Portfolio grid (9-12 project thumbnails with hover overlay)
- Services offered (3-4 service cards)
- Testimonials slider (5 client testimonials)
- Contact form + social links
- Availability badge ("Available for projects")
DESIGN:
- Personal, approachable aesthetic
- Warm color palette (Orange #F97316 + Neutral)
- Single-page scroll layout
Template 1.6: Consulting Services
Best for: Business consultants, strategy advisors, coaching services
Generated prompt:
Create a consulting services website with:
- Hero: Professional headshot + credentials + CTA ("Schedule Consultation")
- Problem statement section (client pain points)
- Solution framework (methodology with 4-5 steps)
- Service packages (3 consulting tiers)
- Case results (3 success metrics/case studies)
- Booking calendar integration placeholder
- LinkedIn/credentials social proof
DESIGN:
- Professional, credible aesthetic
- Navy blue and gold color scheme
- Clean typography, minimal decoration
2. E-commerce & Retail (5 templates)
Template 2.1: Product Showcase
Best for: Online stores, product launches, DTC brands
Generated prompt:
Create a product showcase e-commerce site with:
- Header: Logo, search bar, cart icon (0), account icon
- Hero banner: Featured product with "Shop Now" CTA
- Product grid (12 products, 4 per row)
- Each product card: Image, name, price, "Add to Cart" button, rating stars
- Use http://static.photos/white/320x240/[1-12] for product images
- Category filters sidebar (Electronics, Fashion, Home, etc.)
- "Best Sellers" section (top 6 products)
- Newsletter signup: "Get 10% off your first order"
- Footer: Shipping info, returns policy, contact
PAGES: Home, Shop, Product Detail, Cart, Checkout
PRODUCT DETAIL PAGE:
- Large product images (carousel with 4-5 images)
- Product name, price, description
- Size/color selectors
- Quantity picker + "Add to Cart" button
- Customer reviews section (5 reviews)
- "You may also like" (4 related products)
DESIGN:
- Clean, modern e-commerce aesthetic
- Primary color: Black (#000000)
- Accent color: Red (#EF4444) for CTAs
- TailwindCSS + minimal custom styles
Template 2.2: Fashion Store
Best for: Clothing retailers, fashion brands, apparel stores
Generated prompt:
Create a fashion e-commerce site with:
- Hero: Full-width lifestyle image + "New Collection" overlay
- Category tiles (Men, Women, Kids, Accessories)
- Featured products (8 products in 2 rows)
- Lookbook section (4 styled outfit photos with product tags)
- Instagram feed integration placeholder (12 recent posts)
- Size guide modal
- Wishlist functionality
DESIGN:
- High-fashion aesthetic with large imagery
- Minimalist black and white with gold accents
- Elegant serif headings (Playfair Display style)
Template 2.3: Digital Products
Best for: Course sellers, ebook authors, template creators
Generated prompt:
Create a digital products marketplace with:
- Hero: "Premium [Product Type] for [Audience]"
- Product cards (6-8 digital products)
- Each: Cover image, title, description, price, "Buy Now" button
- Tags: "Best Seller", "New", "Popular"
- Product detail page with:
- Preview screenshots (4-6 images)
- What's included (bullet list)
- Testimonials (3 customer reviews)
- FAQ section
- Instant download CTA
- Creator profile sidebar (about the author)
- Free sample/lead magnet section
DESIGN:
- Professional, trustworthy aesthetic
- Purple gradient (#9333EA to #6366F1)
- Card-based layouts
Template 2.4: Marketplace Platform
Best for: Multi-vendor platforms, handmade goods, service marketplaces
Generated prompt:
Create a marketplace platform with:
- Hero: Search bar ("What are you looking for?") + category quick filters
- Featured sellers (6 seller profiles with rating stars)
- Product/service listings (16 items in grid)
- Each: Image, title, seller name, price, rating, "View Details"
- "How It Works" (3 steps: Browse → Purchase → Enjoy)
- Trust signals (secure payment, buyer protection, verified sellers)
- Seller dashboard placeholder (for sellers: "Start Selling" CTA)
PAGES: Home, Browse, Item Detail, Seller Profile, Cart, Messages
DESIGN:
- Friendly, accessible aesthetic
- Teal (#14B8A6) and orange (#F97316) color scheme
- Rounded corners, playful illustrations
Template 2.5: Subscription Box
Best for: Subscription services, curated boxes, membership products
Generated prompt:
Create a subscription box landing page with:
- Hero: "Curated [Products] Delivered Monthly"
- How it works (3-step process with icons)
- Subscription plans (Monthly, 3-Month, Annual with savings badges)
- What's inside (sample product photos from recent boxes)
- Unboxing video embed placeholder
- Reviews/testimonials (5-star ratings + quotes)
- Gift subscription option
- FAQ section (15 questions)
- Footer with subscription management link
DESIGN:
- Colorful, exciting aesthetic
- Pastel palette (Pink #EC4899, Purple #9333EA, Blue #3B82F6)
- Playful, modern typography
3. Food & Restaurant (4 templates)
Template 3.1: Restaurant Website
Best for: Restaurants, cafes, bistros, fine dining
Generated prompt:
Create a restaurant website with:
- Hero: Full-screen food photo + restaurant name + tagline + "Reserve a Table" CTA
- Menu section (Appetizers, Mains, Desserts, Drinks)
- Each item: Name, description, price, dietary icons (vegan, gluten-free, etc.)
- Use http://static.photos/food/320x240/[1-20] for dish images
- Photo gallery (12 food and ambiance photos)
- Reservation form (date, time, party size, special requests)
- Location with embedded map placeholder
- Hours of operation
- Reviews section (5 Google/Yelp-style reviews)
- Instagram feed (#restaurantname hashtag)
PAGES: Home, Menu, Reservations, About, Contact
DESIGN:
- Elegant, appetizing aesthetic
- Warm color palette (Amber #F59E0B, Brown #78350F)
- Large food photography, serif headings
Template 3.2: Food Delivery App
Best for: Food delivery services, ghost kitchens, meal kits
Generated prompt:
Create a food delivery platform with:
- Hero: Address input + "Find Food Near You" search
- Restaurant cards (12 restaurants in grid)
- Each: Logo, name, cuisine type, rating, delivery time, "Order Now"
- Category filters (Pizza, Burgers, Asian, Italian, etc.)
- Special offers banner ("Free delivery on orders $25+")
- Popular dishes section (8 trending dishes)
- How it works (Order → Prepare → Deliver in 3 steps)
- Download app buttons (iOS, Android)
PAGES: Home, Restaurant Menu, Cart, Checkout, Track Order
DESIGN:
- Modern app-style interface
- Primary: Red (#EF4444), secondary: Yellow (#F59E0B)
- Card-based, mobile-first design
Template 3.3: Recipe Blog
Best for: Food bloggers, recipe creators, cooking influencers
Generated prompt:
Create a recipe blog with:
- Hero: Featured recipe (large image, title, "Get Recipe")
- Recipe grid (12 recent recipes, 3 per row)
- Each card: Image, title, prep time, difficulty, rating
- Category sidebar (Breakfast, Lunch, Dinner, Desserts, etc.)
- Recipe detail page:
- Hero image (1024x576)
- Ingredients list (checkbox format)
- Step-by-step instructions (numbered)
- Nutrition facts table
- Print recipe button
- Share buttons (Pinterest, Facebook)
- Comments section
- About the blogger sidebar
- Email newsletter signup
DESIGN:
- Warm, inviting aesthetic
- Orange (#F97316) and cream (#FFFBEB) color scheme
- Hand-written style fonts for headings
Template 3.4: Cafe Menu Board
Best for: Coffee shops, juice bars, breakfast cafes
Generated prompt:
Create a cafe digital menu board with:
- Header: Cafe name + logo + "Now Open" badge
- Menu sections (Coffee, Tea, Smoothies, Pastries, Breakfast, Lunch)
- Items displayed as cards with:
- Item name, description, sizes/options, price
- Daily specials board
- Loyalty program signup ("Get a free drink after 10 purchases")
- Location hours
- WiFi password display
- Instagram handle
DESIGN:
- Hipster cafe aesthetic
- Brown (#78350F) and mint green (#10B981) color scheme
- Chalkboard-style text, vintage badges
- Large typography for easy reading
4. Real Estate (3 templates)
Template 4.1: Property Listings
Best for: Real estate agencies, property managers, rental platforms
Generated prompt:
Create a property listings website with:
- Hero: Search bar (location, price range, bedrooms, property type)
- Featured properties (6 property cards)
- Each: Primary photo, address, price, beds/baths, sqft, "View Details"
- Use http://static.photos/estate/640x360/[1-6] for property images
- Property filters sidebar (Price, Type, Beds, Baths, Features)
- Map view toggle button
- "Recently Sold" section (3 properties)
- Agent profiles (4 top agents with contact buttons)
PROPERTY DETAIL PAGE:
- Photo gallery (8-12 property images)
- Property details (price, address, specs, description)
- Features list (2 columns: checkmarks for included features)
- Mortgage calculator
- Virtual tour button placeholder
- Schedule viewing form
- Similar properties (4 related listings)
DESIGN:
- Professional real estate aesthetic
- Navy blue (#1E3A8A) and gold (#F59E0B) color scheme
- Clean, trustworthy layout
Template 4.2: Agent Portfolio
Best for: Individual real estate agents, broker profiles
Generated prompt:
Create a real estate agent portfolio with:
- Hero: Professional agent photo + credentials + "Let's Find Your Dream Home"
- About the agent (bio, certifications, awards, experience)
- Current listings (9 active listings in grid)
- Recent sales (6 sold properties with sale price)
- Client testimonials (5 reviews with ratings)
- Market insights blog (3 recent articles)
- Contact form + direct phone/email
- Service areas map
- Social proof (years of experience, homes sold, total volume)
DESIGN:
- Personal, professional aesthetic
- Teal (#14B8A6) and gray (#6B7280) color scheme
- Headshot-focused, credential-heavy
Template 4.3: Vacation Rentals
Best for: Airbnb hosts, vacation rental agencies, short-term rentals
Generated prompt:
Create a vacation rental website with:
- Hero: Destination photo + "Find Your Perfect Getaway"
- Date picker + guest selector + "Search" button
- Property grid (8 vacation rentals)
- Each: Main photo, location, price per night, rating, "Book Now"
- Destination categories (Beach, Mountain, City, Countryside)
- "Why Book With Us" (3 benefits: best prices, verified hosts, 24/7 support)
- Travel tips blog section
RENTAL DETAIL PAGE:
- Photo slideshow (12+ property photos)
- Pricing calendar (availability + nightly rates)
- Amenities list (WiFi, parking, kitchen, pool, etc.)
- House rules
- Location map
- Guest reviews (10 reviews with photos)
- Instant booking button
- Host profile sidebar
DESIGN:
- Travel-focused, aspirational aesthetic
- Bright blue (#3B82F6) and sunny yellow (#FBBF24) color scheme
- Large imagery, vacation vibes
5. Creative & Portfolio (4 templates)
Template 5.1: Design Portfolio
Best for: Graphic designers, UI/UX designers, visual artists
Generated prompt:
Create a design portfolio with:
- Hero: Full-screen featured project image + name + role
- Project grid (12 projects in masonry layout)
- Each: Project thumbnail, title, client, hover overlay with description
- Use http://static.photos/abstract/640x360/[1-12] for project images
- Filter buttons (All, Branding, Web Design, Print, Illustration)
- About section (designer bio, skills wheel/bars, tools used)
- Process section (Design process in 5 steps)
- Contact form
PROJECT DETAIL PAGE:
- Hero image (1200x630)
- Project overview (client, role, year, deliverables)
- Challenge + solution sections
- Project images (6-10 full-width images)
- "Next Project" navigation
DESIGN:
- Minimalist, design-focused aesthetic
- Black and white base with accent color (Hot Pink #EC4899)
- Grid-based, Swiss design influence
Template 5.2: Photography Portfolio
Best for: Photographers, photo studios, visual storytellers
Generated prompt:
Create a photography portfolio with:
- Hero: Full-screen photo slideshow (5 best photos)
- Category pages (Weddings, Portraits, Commercial, Travel, etc.)
- Photo gallery grid (20 photos in masonry layout)
- Lightbox view on click
- Use http://static.photos/[category]/640x360/[1-20] for galleries
- About the photographer (bio, equipment, philosophy)
- Pricing packages (3 tiers with inclusions)
- Booking form (event type, date, location, message)
- Instagram integration (latest 12 Instagram photos)
- Print shop link (sell prints)
DESIGN:
- Photo-first, minimal UI
- Black interface, white text
- Full-bleed images, edge-to-edge layouts
Template 5.3: Artist Website
Best for: Fine artists, illustrators, sculptors, mixed media artists
Generated prompt:
Create an artist website with:
- Hero: Featured artwork with artist statement
- Gallery (15-20 artwork images in grid)
- Each: Artwork image, title, medium, size, price
- "Inquire" button on each piece
- Artist biography (extensive CV, exhibitions, awards)
- Exhibitions (past and upcoming shows)
- Press/publications section (3-5 featured articles)
- Commission inquiry form
- Shop link (purchase originals or prints)
- Newsletter signup for exhibition updates
DESIGN:
- Gallery aesthetic (white walls)
- Minimal UI, artwork-focused
- Serif headings, elegant typography
Template 5.4: Writer Portfolio
Best for: Freelance writers, journalists, content creators, authors
Generated prompt:
Create a writer portfolio with:
- Hero: Photo + tagline ("Words that move minds")
- Published work (10 article cards)
- Each: Publication logo, headline, excerpt, "Read More" link
- Writing samples by category (Tech, Business, Lifestyle, etc.)
- About the writer (bio, credentials, clients)
- Services offered (blog posts, copywriting, ghostwriting, etc.)
- Testimonials from editors/clients
- Contact form + availability status
DESIGN:
- Editorial, readable aesthetic
- Navy blue (#1E3A8A) and cream (#FFFBEB) color scheme
- Serif body text, generous line height
6. Personal & Blog (3 templates)
Template 6.1: Personal Blog
Best for: Lifestyle bloggers, personal writers, hobby bloggers
Generated prompt:
Create a personal blog with:
- Hero: Blog name + tagline + featured post image
- Recent posts (6 post cards in 2 rows)
- Each: Featured image, title, excerpt, date, "Read More"
- Use http://static.photos/[various]/640x360/[1-6] for post images
- Sidebar:
- About the blogger (photo + short bio)
- Categories list
- Popular posts (5 links)
- Email newsletter signup
- Social media links
POST PAGE:
- Featured image (1024x576)
- Post title, date, author
- Post content (rich text with subheadings, images, quotes)
- Tags
- Share buttons (Twitter, Facebook, Pinterest)
- Author bio box
- Related posts (3 suggestions)
- Comments section
DESIGN:
- Personal, warm aesthetic
- Pastel color palette (Pink #FDF2F8, Purple #F3E8FF)
- Hand-written style fonts
Template 6.2: Tech Blog
Best for: Developer blogs, tech tutorials, code walkthroughs
Generated prompt:
Create a tech blog with:
- Header: Logo, search bar, categories (Tutorials, Reviews, News)
- Hero: Featured tutorial with code snippet preview
- Article grid (9 posts, 3 per row)
- Each: Thumbnail, title, category badge, read time, date
- Category tags cloud
- Newsletter signup ("Weekly dev tips")
- Resources section (tools, links, downloads)
POST PAGE:
- Title + author + date + read time
- Table of contents (anchor links)
- Code syntax highlighting blocks
- Step-by-step tutorial sections
- GitHub repo link
- Share on Twitter/Reddit/HN
- Author follow button
DESIGN:
- Developer-friendly aesthetic
- Dark mode by default
- Syntax highlighting theme (Monokai)
- Monospace fonts for code
Template 6.3: Travel Blog
Best for: Travel bloggers, digital nomads, adventure writers
Generated prompt:
Create a travel blog with:
- Hero: Full-screen destination photo + blog name
- Destinations grid (12 location cards)
- Each: Location photo, destination name, post count, "Explore"
- Use http://static.photos/travel/640x360/[1-12] for destination images
- Interactive world map with visited countries
- Latest posts (6 recent travel stories)
- About the traveler (bio, stats: countries visited, miles traveled)
- Travel tips section
- Gear recommendations (affiliate links)
- Instagram feed integration
POST PAGE:
- Destination header image
- Itinerary sidebar (days + activities)
- Photo gallery (15-20 travel photos)
- Budget breakdown table
- Travel tips list
- Pin to Pinterest button
DESIGN:
- Adventurous, vibrant aesthetic
- Turquoise (#06B6D4) and orange (#F97316) color scheme
- Large imagery, inspiring layouts
7. Health & Fitness (4 templates)
Template 7.1: Fitness Studio
Best for: Gyms, yoga studios, fitness centers, personal trainers
Generated prompt:
Create a fitness studio website with:
- Hero: Action photo + "Transform Your Body" + "Start Free Trial" CTA
- Class schedule (weekly timetable with class types, times, instructors)
- Classes offered (6 class types with descriptions)
- Each: Icon, name, difficulty, duration, "Try It" button
- Use http://static.photos/sport/320x240/[1-6] for class images
- Membership pricing (3 tiers: Basic, Premium, VIP)
- Trainer profiles (4 trainers with certifications)
- Transformation stories (before/after photos + testimonials)
- Studio tour video embed placeholder
- Location + parking info
- Online class login button
DESIGN:
- Energetic, motivating aesthetic
- Bright orange (#F97316) and black (#000000) color scheme
- Bold typography, dynamic angles
Template 7.2: Nutrition Coaching
Best for: Nutritionists, dietitians, meal planning services
Generated prompt:
Create a nutrition coaching website with:
- Hero: Coach photo + credentials + "Achieve Your Health Goals"
- Services offered (1-on-1 coaching, meal plans, group programs)
- How it works (4-step process: Assess → Plan → Execute → Track)
- Success stories (3 client transformations with metrics)
- Free resources (downloadable meal plan template, nutrition guide)
- Blog posts (5 recent nutrition articles)
- Booking calendar integration placeholder
- FAQ section (15 common questions)
DESIGN:
- Clean, health-focused aesthetic
- Green (#10B981) and white (#FFFFFF) color scheme
- Fresh, organic vibes
Template 7.3: Wellness Spa
Best for: Spas, massage therapists, wellness centers
Generated prompt:
Create a wellness spa website with:
- Hero: Tranquil spa photo + "Relax, Rejuvenate, Restore"
- Services menu (Massages, Facials, Body Treatments)
- Each: Service name, duration, price, description, "Book Now"
- Use http://static.photos/wellness/640x360/[1-9] for service images
- Spa packages (3 curated packages with savings)
- Gift certificates section
- Therapist profiles (6 therapists with specialties)
- Amenities (sauna, steam room, relaxation lounge)
- Online booking system
- Location + hours
- Reviews (5 Google reviews)
DESIGN:
- Calming, serene aesthetic
- Soft blue (#DBEAFE) and lavender (#E9D5FF) color scheme
- Organic shapes, peaceful imagery
Template 7.4: Yoga Retreat
Best for: Yoga retreats, meditation centers, wellness getaways
Generated prompt:
Create a yoga retreat website with:
- Hero: Outdoor yoga photo + "Find Inner Peace"
- Upcoming retreats (3 retreat packages)
- Each: Location, dates, duration, price, "Reserve Spot" button
- What's included (accommodation, meals, activities, transportation)
- Daily schedule sample (typical retreat day)
- Retreat leaders (2-3 instructors with bios)
- Photo gallery (20 retreat photos)
- Testimonials from past attendees
- Packing list
- Booking form (retreat selection, payment info)
DESIGN:
- Natural, zen aesthetic
- Earth tones (Brown #78350F, Green #10B981, Cream #FFFBEB)
- Organic, flowing layouts
8. Education & Learning (4 templates)
Template 8.1: Online Course Platform
Best for: Course creators, e-learning platforms, educational content
Generated prompt:
Create an online course platform with:
- Hero: "Learn [Skill] at Your Own Pace"
- Course catalog (12 course cards)
- Each: Thumbnail, title, instructor, rating, enrolled count, price, "Enroll Now"
- Use http://static.photos/education/320x240/[1-12] for course images
- Category filters (Development, Design, Business, Marketing, etc.)
- Featured instructor spotlight
- Free course preview (1 free intro course)
- How it works (Browse → Enroll → Learn → Certificate)
- Student testimonials (5 success stories)
COURSE DETAIL PAGE:
- Course banner image
- Course overview (what you'll learn, requirements, outcomes)
- Curriculum (expandable sections with lesson titles)
- Instructor bio + credentials
- Student reviews (10 reviews with ratings)
- Enrollment CTA (price, "Enroll Now" button)
- Money-back guarantee badge
- FAQ section
DESIGN:
- Educational, trustworthy aesthetic
- Blue (#3B82F6) and yellow (#FBBF24) color scheme
- Clean, organized layouts
Template 8.2: Tutoring Service
Best for: Private tutors, tutoring centers, exam prep services
Generated prompt:
Create a tutoring service website with:
- Hero: "Expert Tutoring for [Subjects]"
- Subjects offered (8 subject cards: Math, Science, English, etc.)
- How tutoring works (3 steps: Match → Schedule → Learn)
- Tutor profiles (8 tutors with qualifications)
- Pricing plans (Hourly, Package, Subscription)
- Success rates (student improvement statistics)
- Parent testimonials (5 reviews)
- Free trial session CTA
- Booking calendar
DESIGN:
- Professional education aesthetic
- Navy blue (#1E3A8A) and orange (#F97316) color scheme
- Academic, credible layouts
Template 8.3: Language Learning
Best for: Language schools, online language tutors, language apps
Generated prompt:
Create a language learning website with:
- Hero: "Master [Language] in 90 Days"
- Languages offered (10 language cards with flags)
- Learning method overview (conversational approach, immersion, etc.)
- Course levels (Beginner, Intermediate, Advanced)
- Features (1-on-1 lessons, group classes, self-paced, mobile app)
- Success stories (3 student videos/testimonials)
- Free placement test CTA
- Pricing (per lesson, monthly subscription)
- Teacher profiles (native speakers)
DESIGN:
- Vibrant, multicultural aesthetic
- Rainbow color accents for different languages
- Friendly, approachable layouts
Template 8.4: Kids' Learning Platform
Best for: Children's education, homeschool resources, kids' activities
Generated prompt:
Create a kids' learning platform with:
- Hero: Colorful illustration + "Learning is Fun!"
- Age groups (Toddlers 2-4, Kids 5-7, Tweens 8-12)
- Subject areas (Reading, Math, Science, Art, Music)
- Game-based learning preview
- Parent dashboard (track progress, reports)
- Free trial (7-day free access)
- Safety certifications (COPPA compliant, ad-free)
- Parent testimonials
DESIGN:
- Playful, child-friendly aesthetic
- Bright primary colors (Red, Blue, Yellow, Green)
- Rounded corners, cartoon illustrations
- Large buttons, simple navigation
9. Events & Entertainment (3 templates)
Template 9.1: Event Venue
Best for: Wedding venues, conference centers, event spaces
Generated prompt:
Create an event venue website with:
- Hero: Venue photo + "Host Your Perfect Event"
- Venue spaces (3 space options: Ballroom, Garden, Rooftop)
- Each: Photos, capacity, features, "Request Tour" button
- Use http://static.photos/event/1024x576/[1-3] for venue images
- Event types served (Weddings, Corporate, Social, etc.)
- Photo gallery (20 past event photos)
- Catering menu options
- AV equipment + amenities list
- Pricing packages (Bronze, Silver, Gold)
- Booking calendar (check availability)
- Testimonials from past clients
- Contact form + venue tour scheduling
DESIGN:
- Elegant, versatile aesthetic
- Gold (#F59E0B) and navy (#1E3A8A) color scheme
- Sophisticated, event-ready layouts
Template 9.2: Concert/Festival Site
Best for: Music festivals, concert venues, entertainment events
Generated prompt:
Create a concert/festival website with:
- Hero: Event poster + date + "Get Tickets"
- Lineup (20+ artist cards with photos)
- Each: Artist photo, name, genre, performance time
- Use http://static.photos/people/200x200/[1-20] for artist images
- Festival schedule (3-day timeline)
- Venue map (stages, food, restrooms, exits)
- Ticket options (Single Day, Weekend Pass, VIP)
- Sponsor logos
- FAQ (parking, age restrictions, prohibited items)
- Newsletter signup (festival updates)
DESIGN:
- Vibrant, energetic aesthetic
- Neon colors (Pink #EC4899, Cyan #06B6D4, Purple #9333EA)
- Bold typography, festival poster style
Template 9.3: Ticketing Platform
Best for: Event ticketing, theater bookings, show reservations
Generated prompt:
Create a ticketing platform with:
- Hero: Search bar ("Find events near you")
- Event categories (Concerts, Sports, Theater, Comedy, etc.)
- Featured events (8 event cards)
- Each: Event image, title, venue, date, price, "Get Tickets"
- "Events Near You" with location detection
- Date range picker
- Venue finder (by city/zip code)
- My tickets section (user account login)
- Gift cards/vouchers
EVENT DETAIL PAGE:
- Event banner + details (date, time, venue, age restrictions)
- Seating chart with interactive seat selection
- Ticket tiers (GA, Reserved, VIP)
- Add to cart + checkout
- Share event buttons
DESIGN:
- Modern ticketing aesthetic
- Purple (#9333EA) and black (#000000) color scheme
- Clean, e-commerce-style layouts
10. Professional Services (4 templates)
Template 10.1: Law Firm
Best for: Lawyers, legal services, law offices
Generated prompt:
Create a law firm website with:
- Hero: "Protecting Your Rights" + "Free Consultation" CTA
- Practice areas (6 legal services)
- Each: Icon, area of law, brief description, "Learn More"
- Use http://static.photos/legal/320x240/[1-6] for service images
- Attorney profiles (8 lawyers with credentials)
- Case results (5 notable case outcomes)
- Client testimonials (5 reviews with ratings)
- Legal blog (4 recent articles)
- Contact form + office locations
- FAQ section (20 common legal questions)
- "Speak to an Attorney" phone CTA
DESIGN:
- Professional, authoritative aesthetic
- Navy blue (#1E3A8A) and gold (#F59E0B) color scheme
- Conservative, trustworthy layouts
Template 10.2: Accounting Firm
Best for: CPAs, bookkeepers, tax advisors, financial services
Generated prompt:
Create an accounting firm website with:
- Hero: "Your Trusted Financial Partner"
- Services offered (Tax Prep, Bookkeeping, Audit, Consulting)
- Why choose us (experience, certifications, client satisfaction)
- Tax deadline reminders
- Client portal login
- Resources (tax forms, financial calculators)
- Team members (6 CPAs with credentials)
- Industry specializations (Small Business, Real Estate, etc.)
- Contact form + phone number
- Free consultation CTA
DESIGN:
- Professional, trustworthy aesthetic
- Dark blue (#1E3A8A) and green (#10B981) color scheme
- Clean, numbers-focused layouts
Template 10.3: Medical Practice
Best for: Doctors, clinics, medical specialists
Generated prompt:
Create a medical practice website with:
- Hero: "Quality Care You Can Trust"
- Services provided (Primary Care, Pediatrics, etc.)
- Meet the doctors (4 physician profiles with specialties)
- Patient portal login
- Appointment booking form (date, time, reason)
- Accepted insurance list
- Office hours + location
- Patient testimonials (5 reviews)
- Health blog (3 recent articles)
- COVID-19 safety protocols
- Emergency contact info
DESIGN:
- Clean, medical aesthetic
- Blue (#3B82F6) and white (#FFFFFF) color scheme
- Trustworthy, professional layouts
Template 10.4: Architecture Studio
Best for: Architects, urban planners, design firms
Generated prompt:
Create an architecture studio website with:
- Hero: Featured project photo + studio name
- Project portfolio (12 project cards)
- Each: Project photo, name, type, location, year
- Use http://static.photos/construction/640x360/[1-12] for projects
- Services (Residential, Commercial, Urban Planning, Interior)
- Design process (5-phase methodology)
- Awards + recognition
- Team members (8 architects with credentials)
- Sustainability approach
- Client testimonials
- Contact form + studio location
DESIGN:
- Architectural, minimalist aesthetic
- Monochrome base with accent color (Blue #3B82F6)
- Grid-based, blueprint-inspired layouts
11. Technology & Apps (3 templates)
Template 11.1: Mobile App Landing Page
Best for: App developers, mobile startups, SaaS mobile apps
Generated prompt:
Create a mobile app landing page with:
- Hero: App screenshot + "Transform [Task] with [App Name]"
- Download buttons (App Store, Google Play)
- Key features (6 feature cards with icons)
- How it works (3-step process with phone mockups)
- Screenshots carousel (8 app screens)
- User testimonials (5 reviews with ratings)
- Pricing (Free, Pro, Enterprise)
- Press mentions (logos of publications that featured the app)
- FAQ section
- Email signup for launch updates
DESIGN:
- Modern app aesthetic
- Gradient backgrounds (Purple #9333EA to Blue #3B82F6)
- Phone mockups, app UI screenshots
Template 11.2: Software Product Page
Best for: B2B software, enterprise tools, developer tools
Generated prompt:
Create a software product page with:
- Hero: "The Complete [Tool Type] for [Audience]"
- Feature comparison table (Competitor 1, Competitor 2, Us)
- Core features (8 feature cards with screenshots)
- Integration logos (15+ tools/platforms it integrates with)
- Pricing tiers (Starter, Business, Enterprise)
- Case studies (3 customer success stories)
- Documentation link
- API reference
- Changelog
- Request demo form
DESIGN:
- Tech-forward aesthetic
- Dark mode UI with code examples
- Developer-friendly layouts
Template 11.3: Tech Startup Homepage
Best for: Tech startups, innovative products, B2B tech
Generated prompt:
Create a tech startup homepage with:
- Hero: "We're Building the Future of [Industry]"
- Product demo video (autoplay with muted)
- Problem statement + solution
- How it works (technical diagram)
- Customer logos (20+ customer companies)
- Use cases (3 industry use cases)
- Roadmap (upcoming features timeline)
- Careers CTA ("We're hiring!")
- Investor logos
- Latest blog posts
DESIGN:
- Cutting-edge tech aesthetic
- Neon accents on dark background
- Futuristic, innovative layouts
12. Non-profit & Community (2 templates)
Template 12.1: Non-profit Organization
Best for: Charities, NGOs, community organizations
Generated prompt:
Create a non-profit website with:
- Hero: "Help Us [Mission Statement]" + "Donate Now" CTA
- Our mission (cause description + statistics)
- How donations help (3 impact areas with icons)
- Donation form (one-time or recurring options)
- Volunteer opportunities (3 volunteer roles)
- Success stories (3 beneficiary stories)
- Upcoming events (4 fundraising events)
- Annual report download
- Partner logos
- Newsletter signup
DESIGN:
- Compassionate, community aesthetic
- Warm colors (Orange #F97316, Teal #14B8A6)
- Heart-forward, mission-driven layouts
Template 12.2: Community Forum
Best for: Online communities, discussion boards, member groups
Generated prompt:
Create a community forum website with:
- Hero: "Join [Number] Members" + "Sign Up Free" CTA
- Recent discussions (10 forum threads)
- Each: Thread title, author, replies count, last activity, category badge
- Category list (Tech, Business, Off-Topic, etc.)
- Member leaderboard (top contributors)
- Forum rules/guidelines
- Search bar (search threads)
- User profiles (login/register buttons)
- Notifications bell icon
THREAD PAGE:
- Thread title + original post
- Replies (paginated, 20 per page)
- Reply composer (rich text editor)
- Voting buttons (upvote/downvote)
- Share thread button
DESIGN:
- Reddit-style aesthetic
- Light/dark mode toggle
- Clean, reading-focused layouts
13. Tools & Utility (2 templates)
Template 13.1: SaaS Tool Dashboard
Best for: Web apps, productivity tools, SaaS dashboards
Generated prompt:
Create a SaaS dashboard interface with:
- Top nav: Logo, workspace selector, notifications, profile menu
- Sidebar: Navigation menu (Dashboard, Projects, Reports, Settings)
- Main content:
- Welcome banner ("Hi [User], here's your overview")
- Key metrics cards (4 stat cards with numbers + charts)
- Recent activity feed (10 recent actions)
- Quick actions buttons (New Project, Upload File, etc.)
- Data table (sortable, filterable, paginated)
- Empty state illustrations (for new users)
- Upgrade to Pro banner
DESIGN:
- Modern SaaS aesthetic
- Sidebar navigation, card-based content
- Blue (#3B82F6) accents on white/gray base
Template 13.2: Landing Page Builder Preview
Best for: Website builders, page builders, drag-and-drop tools
Generated prompt:
Create a landing page builder preview with:
- Hero: "Build Beautiful Websites Without Code"
- Features showcase (drag-and-drop, templates, responsive, fast)
- Template gallery (15 template previews)
- Each: Template thumbnail, name, category, "Use Template"
- Use http://static.photos/minimal/320x240/[1-15] for template previews
- Editor screenshot (show builder interface)
- Pricing (Free, Pro, Team)
- Customer testimonials
- Start building CTA
- Integrations (analytics, payments, email, etc.)
DESIGN:
- Product-focused aesthetic
- Purple (#9333EA) and white (#FFFFFF) color scheme
- Screenshot-heavy, feature-rich layouts
14. Media & Publishing (2 templates)
Template 14.1: News/Magazine Site
Best for: Online magazines, news publications, media outlets
Generated prompt:
Create a news/magazine website with:
- Top breaking news banner (latest headline)
- Header: Logo, main menu (News, Politics, Tech, Sports, etc.)
- Featured story (large image + headline + excerpt)
- Latest articles grid (12 article cards)
- Each: Thumbnail, category badge, headline, author, date, "Read More"
- Use http://static.photos/[various]/640x360/[1-12] for article images
- Trending sidebar (5 most-read articles)
- Newsletter signup box
- Social media share buttons
ARTICLE PAGE:
- Hero image (1200x630)
- Headline + byline (author, date, read time)
- Article content (rich text with images, pull quotes)
- Related articles (4 suggestions)
- Comment section
- Share toolbar (Twitter, Facebook, email)
DESIGN:
- Editorial aesthetic
- Red (#EF4444) and black (#000000) color scheme
- Newspaper-inspired layouts
Template 14.2: Podcast Website
Best for: Podcasters, audio creators, interview shows
Generated prompt:
Create a podcast website with:
- Hero: Podcast cover art + "Listen Now" player
- Latest episodes (8 episode cards)
- Each: Episode number, title, duration, description, play button
- Embedded audio player (play/pause, scrubber, speed, volume)
- Subscribe buttons (Apple Podcasts, Spotify, RSS)
- About the show (host bio, show format, topics)
- Guest profiles (6 recent guests)
- Sponsors/partners
- Contact form (booking inquiries, guest pitches)
- Transcript toggle (show/hide transcript)
EPISODE PAGE:
- Episode details (number, title, date, duration)
- Audio player
- Show notes (links, resources, timestamps)
- Full transcript
- Share episode buttons
DESIGN:
- Audio-first aesthetic
- Purple (#9333EA) and dark gray (#374151) color scheme
- Waveform visualizations
Usage Workflow
Step 1: Category Selection
Present categories to user:
📚 Available Template Categories:
1. Business & SaaS (6 templates)
2. E-commerce & Retail (5 templates)
3. Food & Restaurant (4 templates)
4. Real Estate (3 templates)
5. Creative & Portfolio (4 templates)
6. Personal & Blog (3 templates)
7. Health & Fitness (4 templates)
8. Education & Learning (4 templates)
9. Events & Entertainment (3 templates)
10. Professional Services (4 templates)
11. Technology & Apps (3 templates)
12. Non-profit & Community (2 templates)
13. Tools & Utility (2 templates)
14. Media & Publishing (2 templates)
Which category interests you? (Enter number 1-14)
Step 2: Template Selection
Once category chosen, show available templates:
You selected: Business & SaaS
Available templates:
1. SaaS Landing Page - For software companies, cloud platforms
2. Corporate Website - For established companies, professional services
3. Startup Homepage - For tech startups, innovative products
4. Agency Portfolio - For marketing agencies, design studios
5. Freelancer Portfolio - For independent contractors
6. Consulting Services - For business consultants, coaches
Which template? (Enter number 1-6)
Step 3: Prompt Generation
Return the complete prompt for selected template:
#!/bin/bash
CATEGORY="$1"
TEMPLATE="$2"
PROMPT=$(python3 << EOF
category = "$CATEGORY"
template = "$TEMPLATE"
# Return the prompt from templates dictionary
prompts = {
'business-saas': {
'saas-landing-page': '''[Full prompt text here]''',
# ... other templates
},
# ... other categories
}
print(prompts[category][template])
EOF
)
echo "$PROMPT"
Step 4: Integration with web-builder-initial
TEMPLATE_PROMPT=$(/skills/web-prompt-categories/get_prompt.sh "business-saas" "saas-landing-page")
USER_CUSTOMIZATION="Primary color: Blue, Company name: Acme Corp"
COMPLETE_PROMPT="$TEMPLATE_PROMPT
User Customizations:
$USER_CUSTOMIZATION"
/skills/web-builder-initial/generate.sh "$COMPLETE_PROMPT"
Advanced Features
Feature 1: Template Customization
Allow user to customize template before generation:
Selected template: SaaS Landing Page
Customize your template:
- Company name: [Acme Corp]
- Primary color: [Blue #4F46E5] or [Select color]
- Number of features: [3] or [6] or [9]
- Include pricing?: [Yes] or [No]
- Include testimonials?: [Yes] or [No]
[Generate] [Cancel]
Feature 2: Template Preview
Show visual preview of template structure:
Template Preview: SaaS Landing Page
┌─────────────────────────────────────────┐
│ HEADER │
│ Logo | Features | Pricing | Login │
├─────────────────────────────────────────┤
│ HERO SECTION │
│ Headline + CTA + Screenshot │
├─────────────────────────────────────────┤
│ FEATURES (3-column grid) │
│ [Feature 1] [Feature 2] [Feature 3] │
├─────────────────────────────────────────┤
│ TESTIMONIALS │
│ [Quote 1] [Quote 2] [Quote 3] │
├─────────────────────────────────────────┤
│ PRICING (3 tiers) │
│ [Starter] [Pro] [Enterprise] │
├─────────────────────────────────────────┤
│ CTA SECTION │
│ "Ready to get started?" + Button │
├─────────────────────────────────────────┤
│ FOOTER (4 columns + copyright) │
└─────────────────────────────────────────┘
[Use This Template] [Back to Categories]
Feature 3: Template Combination
Allow users to mix sections from different templates:
Build Custom Template:
Select sections to include:
☑ Hero from "SaaS Landing Page"
☑ Features from "Corporate Website"
☑ Testimonials from "Agency Portfolio"
☐ Pricing from "Subscription Box"
☑ Contact form from "Consulting Services"
[Generate Custom Template]
Feature 4: Industry-Specific Keywords
Inject industry-specific terms automatically:
industry_keywords = {
'saas': ['platform', 'cloud-based', 'subscription', 'dashboard', 'integrations'],
'ecommerce': ['products', 'cart', 'checkout', 'shipping', 'returns'],
'restaurant': ['menu', 'reservations', 'cuisine', 'ambiance', 'chef'],
}
def enhance_prompt_with_keywords(prompt: str, industry: str) -> str:
"""Inject industry-specific keywords into template prompt."""
keywords = industry_keywords.get(industry, [])
keyword_hints = f"\n\nIndustry Keywords to Include: {', '.join(keywords)}"
return prompt + keyword_hints
Verification Checklist
Implementation Status: ✅ Complete - 60+ templates ready
BuildFlow Source: Inspired by BuildFlow template library concept
Dependencies: web-builder-initial (receives template prompts)
Templates Count: 60+ across 14 categories
Last Updated: 2026-03-30
