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.

Füllen Sie die Platzhalter aus

Edit the values, then copy your finished prompt.

Ihr Prompt
prompt.txt

                                

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.

Mehr in Creative & Portfolio UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

Claude Code Expert · Online

👋

Hey there!

Quick Actions

WhatsApp Instant reply

Chat on WhatsApp

+880 1723 741224 · Instant reply

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

[email protected]

✓ 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