Prompt Examples

Real examples of effective prompts for common use cases.

Landing Pages

SaaS Landing Page

Create a landing page for "TaskFlow" - a project management
tool for remote teams.

Hero Section:
- Headline: "Manage Projects, Not Chaos"
- Subheadline: "The simple way for distributed teams to
  stay aligned and ship faster"
- Primary CTA: "Start Free Trial"
- Secondary CTA: "Watch Demo"
- Background: Subtle gradient from blue to purple
- Include an illustration or mockup of the app

Features Section:
- 4 features with icons:
  1. Real-time Collaboration
  2. Visual Project Boards
  3. Time Tracking Built-in
  4. Integrations with 50+ tools

Testimonials:
- 3 customer quotes with photos, names, and company names

Pricing:
- 3 tiers: Starter ($0), Pro ($12/user/mo), Enterprise (Contact)
- Highlight Pro as most popular

Footer:
- Links: Product, Company, Resources, Legal
- Social icons: Twitter, LinkedIn, GitHub

Personal Portfolio

Create a portfolio website for a UX designer named Sarah Chen.

Style:
- Minimal and elegant
- Lots of whitespace
- Black text on white background with subtle gray accents
- Sans-serif typography (clean and modern)

Sections:
1. Hero: Large name, title "UX Designer", brief tagline,
   scroll indicator
2. About: Short bio, skills list, downloadable resume button
3. Projects: Grid of 6 project cards with thumbnail, title,
   and brief description. Clicking opens case study.
4. Contact: Simple form (name, email, message) plus email
   and LinkedIn links

Include subtle animations on scroll.

Dashboards

Analytics Dashboard

Create an analytics dashboard for an e-commerce store.

Layout:
- Sidebar navigation on the left (collapsible)
- Header with store name, search, notifications, user menu
- Main content area

Sidebar links:
- Dashboard (active)
- Orders
- Products
- Customers
- Analytics
- Settings

Dashboard content:
1. Top row: 4 stat cards
   - Total Revenue ($124,500 +12% from last month)
   - Orders (1,243 +8%)
   - Customers (892 +23%)
   - Average Order Value ($100.12 -2%)

2. Middle row:
   - Revenue chart (line chart, last 30 days)
   - Sales by category (donut chart)

3. Bottom row:
   - Recent orders table (Order #, Customer, Items, Total, Status)
   - Top selling products list

Use a clean, modern design with a white background and
subtle shadows on cards.

Admin Panel

Create an admin panel for managing users.

Features:
- Data table with columns: Avatar, Name, Email, Role,
  Status, Last Active, Actions
- Search bar to filter users
- Filters for role (Admin, User, Guest) and status (Active,
  Inactive, Pending)
- Bulk actions dropdown (Delete, Export, Change Role)
- Pagination controls
- "Add User" button that opens a modal
- Row actions: Edit, Delete, Reset Password

Include empty state when no users match filters.
Add loading skeleton while data fetches.

E-commerce

Product Catalog

Create a product catalog page for a fashion store.

Layout:
- Filter sidebar on the left
- Product grid on the right (3 columns on desktop)

Filters:
- Category (Tops, Bottoms, Dresses, Accessories)
- Size (XS, S, M, L, XL)
- Color (swatches)
- Price range (slider)
- "Clear All" button

Product Card:
- Image (square, with hover to show second image)
- Wishlist heart icon
- Product name
- Price (show original + sale price if on sale)
- Available colors as small dots

Top bar:
- Result count ("124 Products")
- Sort dropdown (Newest, Price Low-High, Price High-Low, Popular)
- Grid/List view toggle

Add smooth transitions and hover effects.

Shopping Cart

Create a shopping cart page.

Layout:
- Cart items list on the left (70% width)
- Order summary on the right (30% width, sticky)

Cart Item Row:
- Product image (thumbnail)
- Product name and variant (Size: M, Color: Blue)
- Quantity selector (+/- buttons)
- Unit price
- Line total
- Remove button (X)

Order Summary:
- Subtotal
- Shipping (calculated at checkout or free over $50)
- Promo code input with Apply button
- Estimated total
- "Proceed to Checkout" button
- Accepted payment icons

Show empty cart state with "Continue Shopping" button.

Forms

Contact Form

Create a contact page with a form.

Layout:
- Two columns on desktop: Contact info + Form
- Single column on mobile

Contact Info (left):
- Heading: "Get in Touch"
- Description paragraph
- Address with map icon
- Phone number with phone icon
- Email with email icon
- Business hours

Form (right):
- Full name (required)
- Email (required, validated)
- Phone (optional)
- Subject dropdown (General, Support, Sales, Partnership)
- Message textarea (required, min 20 characters)
- "Send Message" button

Show validation errors below each field.
Show success message after submission with a checkmark.

Multi-Step Form

Create a multi-step signup form for a fitness app.

Progress indicator showing: Profile > Goals > Preferences > Complete

Step 1 - Profile:
- First name
- Last name
- Email
- Password (with strength indicator)
- Next button

Step 2 - Goals:
- Goal selection (radio): Lose weight, Build muscle,
  Stay active, Train for event
- Target weight (optional number input)
- Timeframe dropdown (1 month, 3 months, 6 months, 1 year)
- Back and Next buttons

Step 3 - Preferences:
- Workout days (checkbox): Mon, Tue, Wed, Thu, Fri, Sat, Sun
- Preferred workout time (radio): Morning, Afternoon, Evening
- Equipment access (checkbox): Gym, Home equipment, No equipment
- Back and Complete buttons

Step 4 - Complete:
- Success message with checkmark animation
- "Go to Dashboard" button

Include smooth transitions between steps.

Components

Navigation Header

Create a navigation header for a tech company website.

Style: Modern, clean, white background with subtle shadow on scroll

Left side:
- Logo (company name in bold)

Center:
- Nav links: Products (dropdown), Solutions, Pricing, Resources, Company

Right side:
- Search icon (opens search modal)
- "Sign In" text link
- "Get Started" primary button

Mobile:
- Logo on left
- Hamburger menu on right
- Full-screen menu overlay when opened

Product dropdown should show:
- 4 product categories with icons and descriptions
- "View All Products" link at bottom

Pricing Table

Create a pricing comparison table with 3 tiers.

Tiers:
1. Starter - $0/month
   - 1 user
   - 5 projects
   - 1GB storage
   - Email support

2. Professional - $29/month (highlight as "Most Popular")
   - 10 users
   - Unlimited projects
   - 50GB storage
   - Priority support
   - Advanced analytics
   - Custom integrations

3. Enterprise - Custom pricing
   - Unlimited users
   - Unlimited everything
   - Dedicated support
   - SSO & SAML
   - SLA guarantee
   - Custom contract

Each tier has a CTA button:
- Starter: "Start Free"
- Professional: "Start Trial"
- Enterprise: "Contact Sales"

Add monthly/annual toggle at the top (20% discount for annual).
Highlight savings on annual plan.