Startseite Blog Podcast Show Page

Podcast Show Page

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

Podcast Audio Episodes
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
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. 1 Kopiere den Prompt oben
  2. 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
  3. 3 Die KI generiert den Website-Code für dich
  4. 4 Passe an und iteriere nach deinen Bedürfnissen

Ü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

Tags

Podcast Audio Episodes Blog KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt