Copia este prompt y pégalo en ChatGPT o Claude
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). Cómo usar este prompt
- 1 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de Blog
Personal Finance Blog Homepage
A clean personal finance blog homepage with featured articles, budget calculator widget, category pillars, and email signup for money tips
Finance Blog Homepage
Author Page
Author profile with bio and post list
Author Profile
Blog Post Page
Article page with content, author info, and related posts
Article Post
Acerca de este Prompt de Blog
Este prompt Podcast Show Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de blog usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.
Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear podcast show page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.
Herramientas de IA Compatibles
- ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
- Claude 3 - Excelente para diseños web complejos y matizados
- v0 de Vercel - Perfecto para componentes React y Next.js
- Cursor - Ideal para codificación potenciada por IA en tu IDE
- Bolt.new - Prototipado rápido y apps full-stack
- Lovable - Constructor de sitios web IA fácil de usar
Etiquetas
Podcast Audio Episodes Blog Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar