Podcast Show Page
A podcast show page with episode listings, audio player, guest profiles, and subscription links
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). So verwendest du diesen Prompt
- 1 Kopiere den Prompt oben
- 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
- 3 Die KI generiert den Website-Code für dich
- 4 Passe an und iteriere nach deinen Bedürfnissen
Mehr Blog Prompts
Personal Finance Blog Homepage
A clean personal finance blog homepage with featured articles, budget calculator widget, category pillars, and email signup for money tips
Author Page
Author profile with bio and post list
Blog Post Page
Article page with content, author info, and related posts
Über diesen Blog Prompt
Dieser Podcast Show Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle blog-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.
Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von podcast show page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.
Kompatible KI-Tools
- ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
- Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
- v0 von Vercel - Perfekt für React- und Next.js-Komponenten
- Cursor - Ideal für KI-gestütztes Coding in deiner IDE
- Bolt.new - Schnelles Prototyping und Full-Stack-Apps
- Lovable - Benutzerfreundlicher KI-Website-Builder