Home Blog Podcast Show Page

Podcast Show Page

A podcast show page with episode listings, audio player, guest profiles, and subscription links

Podcast Audio Episodes

Screenshots

See what this prompt generates across different AI tools

Copy this prompt and paste it into ChatGPT or Claude
Create a podcast show page for a tech-focused podcast called "Ship It" — a weekly show about building startups, shipping products, and the stories behind successful tech companies. The design should feel modern, content-rich, and audio-first.

1. HERO SECTION
- Podcast cover art (square, 400×400px placeholder) on the left
- Right side content:
  - Show title: "Ship It"
  - Tagline: "Stories from the builders shaping the future of tech"
  - Host names: "Hosted by Maya Park & Diego Santos"
  - Rating: ★★★★★ (4.9) · 12K+ ratings
  - Subscribe buttons row: Apple Podcasts, Spotify, YouTube, Google Podcasts, RSS — each with platform icon and brand color
  - Episode count: "187 episodes · New episodes every Tuesday"
- Background: subtle gradient from #0F172A to #1E293B

2. LATEST EPISODE (featured card, full-width)
- Large card with episode artwork on left, content on right
- Episode number + date: "EP 187 · March 4, 2026"
- Title: "How Figma Rebuilt Their Multiplayer Engine"
- Guest: "with Dylan Field, CEO of Figma"
- Description (2-3 sentences): "Dylan shares the technical decisions behind Figma's real-time collaboration system, the challenges of scaling WebSocket connections to millions of users, and why they rewrote their rendering engine in Rust."
- Duration: "58 min"
- Inline audio player: play/pause button, progress bar, current time / total time, playback speed (1x), volume
- Action buttons: "Show Notes" · "Transcript" · "Share"
- Tags: #design-tools #engineering #scaling

3. EPISODE LIST (main content area)
- Search bar: "Search 187 episodes..." with filter icon
- Filter tabs: All · Founders · Engineering · Design · Growth · AI
- Episode cards (list layout, 8-10 visible with "Load More"):
  - EP 186: "Inside Linear's Product Philosophy" — with Karri Saarinen — Mar 4 — 47 min
  - EP 185: "Scaling to 10M Users with a 5-Person Team" — with Sarah Chen — Feb 25 — 52 min
  - EP 184: "Why We Chose Rust for Our Backend" — with James Liu — Feb 18 — 41 min
  - EP 183: "The Art of Developer Marketing" — with Emily Zhang — Feb 11 — 38 min
  - EP 182: "From Side Project to $50M ARR" — with Marcus Johnson — Feb 4 — 55 min
  - EP 181: "Designing for AI-First Products" — with Anna Kowalski — Jan 28 — 44 min
- Each card: episode number, title, guest name, date, duration, play button, 1-line description preview
- Hover: card background shifts to #1E293B, play button highlights

4. POPULAR EPISODES SECTION (horizontal scroll on mobile)
- Headline: "Most Popular Episodes"
- 4 featured episode cards (larger format with artwork):
  - "How Notion Built a $10B Company" — 2.1M plays
  - "The Vercel Origin Story" — 1.8M plays
  - "Stripe's API Design Principles" — 1.5M plays
  - "Why Every Startup Needs a Design System" — 1.2M plays
- Play count badge on each card

5. GUEST SPOTLIGHT (3-column grid)
- Headline: "Notable Guests"
- 6 guest cards:
  - Circular photo, name, title, company, episode number link
  - Guest 1: Dylan Field — CEO, Figma — EP 187
  - Guest 2: Guillermo Rauch — CEO, Vercel — EP 156
  - Guest 3: Patrick Collison — CEO, Stripe — EP 142
  - Guest 4: Emmett Shear — Co-founder, Twitch — EP 128
  - Guest 5: Julie Zhuo — Author & Advisor — EP 115
  - Guest 6: Sahil Lavingia — CEO, Gumroad — EP 98
- "View All Guests" link

6. ABOUT THE HOSTS (2-column layout)
- Host 1: Maya Park
  - Photo (rounded square)
  - Bio: "Former engineering lead at Stripe. Maya brings deep technical expertise and a passion for developer tools."
  - Social links: Twitter, LinkedIn
- Host 2: Diego Santos
  - Photo (rounded square)
  - Bio: "Serial founder and YC alum. Diego focuses on the business and growth side of building products."
  - Social links: Twitter, LinkedIn

7. NEWSLETTER SIGNUP
- Headline: "Get Show Notes in Your Inbox"
- Description: "Weekly email with episode summaries, links mentioned, and bonus content."
- Email input + "Subscribe" button
- "Join 18,000+ subscribers" social proof text
- Privacy note: "No spam. Unsubscribe anytime."

8. SPONSORS SECTION
- Headline: "Brought to You By"
- 3 sponsor cards (horizontal):
  - Sponsor logos with "Learn more" links
  - Example sponsors: Vercel, LinearB, Datadog
- "Interested in sponsoring? Get our media kit →" link

9. STATS & SOCIAL PROOF BAR
- 4 metrics: 2M+ Total Downloads · 187 Episodes · 120+ Guests · 18K Newsletter Subs
- Platform ratings: Apple Podcasts 4.9★ · Spotify 4.8★

10. FOOTER
- Platform links: Apple Podcasts, Spotify, YouTube, Google Podcasts, RSS Feed
- Links: About, Contact, Sponsor, Media Kit, Privacy Policy
- Social: Twitter, LinkedIn, Instagram, YouTube
- "© 2026 Ship It Podcast. All rights reserved."

Design: Dark theme optimized for readability. Background: #0F172A (slate-900), cards: #1E293B (slate-800), text: #F1F5F9 (slate-100), accent: #F59E0B (amber-500) for play buttons and highlights, secondary accent: #8B5CF6 (violet-500) for tags. Typography: Cal Sans or Space Grotesk for headings, Inter for body. Cards with 12px border-radius, 1px border #334155. Audio player with custom-styled range input.

Responsive: On mobile, hero stacks vertically with cover art centered, episode list becomes full-width cards, guest grid switches to horizontal scroll, subscribe buttons wrap to 2-column grid. Sticky mini audio player at bottom when playing an episode (shows episode title, play/pause, progress).

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications

About this Blog Prompt

This Podcast Show Page prompt is designed to help you quickly create professional blog websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building podcast show page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

Podcast Audio Episodes Blog AI Prompt Free Template Website Builder Web Design Copy Paste Prompt