Music Streaming Player Interface Builder

What this prompt does

This prompt generates a full music streaming interface by encoding the actual design conventions that make Spotify, Apple Music, and Tidal feel native — not generic card layouts. The template bakes in the persistent bottom mini player, dynamic accent color extraction from album art, and the browse-to-now-playing navigation flow that users expect without being taught. You specify the platform type (web app, mobile, desktop), features, and library size, and the output maps those inputs to components that respect the anti-patterns section — playback never gets buried behind navigation.

What makes it structurally sound: the template forces the AI to address all seven views in sequence, which prevents the common failure mode of getting a detailed now-playing screen but a sketched-out library. The framework code requirement in the final step grounds the output in something buildable, not just a wireframe description.

The color mood guidance — dark background, art-driven accent, gradient overlays — is prescriptive enough that the AI does not default to a generic light-theme card grid, which is the wrong starting point for audio-first interfaces.

When to use it

• Prototyping a music or podcast streaming app and need a coherent UI system before you touch Figma.
• Building a personal project or demo reel portfolio piece that needs to look production-grade, not tutorial-grade.
• Presenting a design concept to a client or team and need a complete view inventory fast.
• Adding a custom music player to a creator platform, gaming site, or audiobook app that needs its own branded skin.
• Learning how streaming UI architecture is structured before implementing a real player with the Web Audio API.
• Evaluating a framework (Vue, React, SwiftUI) for a music product by generating a real-world reference component.

Example output

For platform_type: web app, features: crossfade, lyrics, collaborative playlists, library_size: 80M tracks, framework: React:

// NowPlaying.jsx — dynamic accent color from album art
const NowPlaying = ({ track }) => {
  const accent = useColorExtractor(track.artUrl); // node-vibrant
  return (
    <div style={{ background: `linear-gradient(180deg, ${accent}22, #0a0a0a)` }}>
      <AlbumArt src={track.artUrl} size={320} />
      <TrackMeta title={track.name} artist={track.artist} />
      <SeekBar duration={track.duration} />
      <Controls onPrev={prev} onPlay={toggle} onNext={next} />
      <LyricsToggle lyricsUrl={track.lyricsUrl} />
    </div>
  );
};

The full output includes all seven screens as structured component trees, with the mini player as a separate sticky component.

Pro tips

• Set platform_type to "React Native mobile" vs "web app" — it changes component choices significantly (bottom sheet vs sidebar, touch targets vs hover states).
• If your library_size is small (under 1,000 tracks), say so. The AI will simplify search ranking logic and skip recommendation engine scaffolding that does not apply.
• The [framework] slot is where precision matters most. Specify version: React 18, Vue 3 Composition API, SwiftUI iOS 17 — not just the framework name. You get idiomatic code, not ported patterns.
• Add "offline-first with service workers" to features if you are building a PWA. The template's downloaded/offline library section then gets actual implementation guidance rather than a UI placeholder.
• Pair the generated now-playing component with the Web Audio API AnalyserNode for the waveform visualizer — the template generates the visual layer, not the audio pipeline. Wire them separately.