Skip to main content

Podcast Website & Player Interface Builder

Design a podcast website: persistent audio player, episode directory, show notes, transcript viewer, host dashboard, and RSS feed tools — with framework code.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Design a podcast website and player interface for The Build Log, a tech entrepreneurship and indie hacking podcast.

**Podcast context:**
- Episode count: 120+ episodes across 4 seasons
- Release schedule: weekly on Tuesdays, plus bonus episodes
- Monetization: sponsorships + premium subscriber episodes + community membership
- Platform distribution: Apple Podcasts, Spotify, YouTube (video), own website (primary)
- Framework: Next.js + Tailwind + Howler.js (audio)

**Design the following components:**

1. **Landing / Home Page:**
   - Hero: podcast artwork, title, tagline, latest episode player with one-click play
   - "Listen On" buttons: Apple Podcasts, Spotify, Google Podcasts, RSS link
   - Featured/pinned episodes section (host picks)
   - Latest episodes list (3-5) with "See All Episodes" link
   - Newsletter signup with lead magnet (e.g., "Get the episode resource guide")
   - Social proof: download stats, listener reviews, notable guest logos
   - About section: host bio with photo, podcast mission statement

2. **Episode Directory:**
   - List/grid toggle for episode browsing
   - Each episode card: artwork (if per-episode), title, guest name, date, duration, play button
   - Season/series grouping with collapsible sections
   - Search episodes by keyword (searches titles, descriptions, and transcripts)
   - Filter by: season, topic tag, guest, date range
   - Sort: newest, oldest, most popular
   - Pagination with "load more" or infinite scroll

3. **Episode Detail Page:**
   - Episode player: large play button, progress bar, time display, speed control (0.5x-3x)
   - Show notes: rich text with timestamps that jump to that point in the audio
   - Guest profile card: photo, bio, social links, other episodes they appeared on
   - Transcript viewer: synchronized with playback (auto-scroll to current position), searchable
   - Resource links mentioned in the episode
   - Share buttons: episode link, specific timestamp link, social cards with audiogram
   - Related episodes: "If you liked this, listen to..." recommendations
   - Comments/discussion section

4. **Persistent Audio Player:**
   - Fixed bottom bar: mini player showing current episode, play/pause, progress, skip 30 seconds
   - Expand to full player: artwork, full controls, volume, speed, queue
   - Queue management: up next, play later, drag to reorder
   - Sleep timer option
   - Continue where you left off (position saved to localStorage/account)
   - Keyboard shortcuts: Space = play/pause, left/right arrows = skip, up/down arrows = volume
   - Mini-player should not obstruct page footer on mobile

5. **Host/Network Dashboard (Admin):**
   - Episode management: draft, schedule, publish, edit show notes
   - Analytics: downloads per episode, listener retention curve, geographic distribution
   - Monetization: ad insertion points, sponsor management, premium content gating
   - RSS feed health check: validate feed, check platform ingestion status
   - Listener email list management and broadcast

6. **Monetization Features:**
   - Premium content: member-only episodes or early access
   - Donation/support: one-time or recurring via Stripe
   - Merch store integration: featured products section
   - Dynamic ad insertion UI for host-read ad scheduling

7. **Next.js + Tailwind + Howler.js (audio) Implementation:**
   - Audio player: Web Audio API with audio element fallback, preload metadata
   - Persistent player state: React context or global store surviving navigation
   - Transcript sync: timestamp-indexed text with IntersectionObserver for auto-scroll
   - RSS feed generation: dynamic XML with proper iTunes/podcast namespace tags
   - SEO: episode structured data (PodcastEpisode schema), Open Graph audio cards
   - Performance: audio streaming with range requests, lazy-loaded episode list

The player must feel native — instant response, no buffering spinners, and it should just work across every device and browser.

What this prompt does

This prompt has Claude or ChatGPT design a podcast website and player interface. You set [podcast_name] and [podcast_genre], then describe the [episode_count], the [release_schedule], the [monetization] model, the [platforms] you distribute on, and the [framework]. The model designs the landing page, the episode directory, the episode detail page, a persistent audio player, a host or network dashboard, and the framework implementation.

It works because a podcast site is really an audio app: the persistent player and transcript-synced playback are the hard parts, and the prompt designs them up front. By naming [episode_count] and [release_schedule], the model designs directory grouping and pagination that suit a 120-episode, four-season catalog. The [monetization] variable shapes premium-episode gating and sponsorship placement, and the framework section specifies audio handling, continue-where-you-left-off, and keyboard shortcuts.

When to use it

  • You're building a podcast website where your own site is the primary listening destination.
  • You want a persistent bottom-bar player with queue, speed control, and resume designed.
  • You need an episode directory with season grouping and transcript search.
  • You're designing episode pages with timestamped show notes and a synced transcript viewer.
  • You want premium subscriber episodes and sponsorship placement accounted for.
  • You need a host dashboard for publishing, scheduling, and per-episode analytics.

Example output

The model returns a component-by-component design document. The landing page is specified with a showreel-style hero player, "listen on" buttons, featured episodes, and a newsletter lead magnet. The episode detail page covers a full player with 0.5x-3x speed, timestamped show notes that jump playback, and a transcript that auto-scrolls with audio. The persistent player section details a mini-to-full expand, queue reordering, a sleep timer, and keyboard shortcuts. The closing [framework] section adds audio-library handling, resume via storage, and host-dashboard analytics. Expect a detailed spec, not finished code.

Pro tips

  • Set [episode_count] realistically so the directory uses sensible season grouping and pagination instead of one long list.
  • Use [monetization] to switch premium gating and sponsorship slots on, since they change the player and episode page.
  • Name your real [platforms] so the "listen on" buttons and RSS link match where you actually publish.
  • Keep the transcript-sync requirement explicit — synchronized auto-scroll and timestamp jumps are the standout feature.
  • Pin [framework] to your audio library so the persistent-player and resume notes are usable.
  • Ask the model to expand the host dashboard if publishing workflow and retention analytics matter most.

Frequently Asked Questions

Does it design a persistent audio player?
Yes. The design includes a fixed bottom-bar mini player that expands to a full player with queue management, a sleep timer, speed control, keyboard shortcuts, and resume-where-you-left-off via stored playback position.
Is the transcript synced with audio playback?
Yes. The episode detail page specifies a transcript viewer that auto-scrolls to the current playback position and is searchable, plus timestamped show notes that jump the audio to that point when clicked.
Can it handle premium subscriber episodes?
Yes, when you include them in `[monetization]`. The design accounts for premium gating and sponsorship placement, so the player and episode pages reflect your sponsorship-plus-subscriber revenue model.
Does it include a dashboard for the host?
Yes. The host or network dashboard covers episode management (draft, schedule, publish, edit show notes) and analytics like downloads per episode, listener retention curves, and geographic distribution.
Which audio library should I name in the framework variable?
Use whatever you plan to build with, such as Howler.js or the native HTML audio API. Naming it sharpens the persistent-player, queue, and resume implementation notes in the final section.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Creative & Portfolio UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support