Web Prompt Categories

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:

1. Browse 14 categories (Business, E-commerce, Portfolio, Blog, SaaS, etc.)
2. Select a specific template (e.g., "SaaS Landing Page", "Restaurant Menu Site")
3. Get a detailed prompt that defines structure, features, and content
4. 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
- H

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [youyouhe](https://github.com/youyouhe)
- **Source:** [youyouhe/bidsmart-claude-skills](https://github.com/youyouhe/bidsmart-claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.