O que você recebe
- Um site HTML offline, ou rotas reais em React, Next.js, Vue, Svelte ou Astro
- Arquivo de episódios com busca e filtros, e páginas de episódio com capítulos e notas
- Um player acoplado com capítulos, fila, velocidade e uma folha de tocando agora nos celulares
- Um validador de rotas, acessibilidade, do player e de restos de exemplo
- Limpeza opcional de fotos, série de capas, tema de abertura e trailer com o PopNow, após cotação
Ideal para
- Podcasts de entrevista e programas com coapresentadores
- Podcasts de marcas ou empresas que precisam de uma casa caprichada
- Séries narrativas organizadas por temporada
Não é para
- Programas em que o vídeo é o principal
- Feeds de assinatura com paywall
- Redes que listam muitos programas diferentes
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Modelo de site para podcast” (podcast-website-template) para isto: Monte o site do Long Lunch, um programa semanal de entrevistas com donos de restaurantes. Os episódios e os links de áudio estão no nosso feed RSS em feeds/longlunch.xml.
Em um agente de programação
/popnow-podcast-website-template Monte o site do Long Lunch, um programa semanal de entrevistas com donos de restaurantes. Os episódios e os links de áudio estão no nosso feed RSS em feeds/longlunch.xml.
Depois tente
Cote um tema de abertura instrumental de 30 segundos e um trailer falado a partir da descrição do programa.
Seis episódios são solo. Faça uma série de capas para eles que combine com o visual duotone.
O que ter em mãos
- Nome do programa, apresentadores, agenda e a URL do feed RSS
- A lista de episódios com datas, durações, resumos e capítulos
- Links de áudio do seu host de podcast e fotos que você pode usar
- Opcional: uma chave de API do PopNow para capas, tema de abertura e trailer
Skills parecidas
Ver todas →- Web
Criador de avatar 3D
+25Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
- Web
Calendário heatmap
+25Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
- Web
Landing page de SaaS com IA
+25Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
- Web
Seção hero animada
+25Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
- Web
Modelo de site de marca de bebidas
+25Site alegre de marca de bebidas ou snacks, com loja, montador de caixa, mapa de revendedores e checkout de demonstração, num arquivo.
- Web
Site de agência com hero em shader
+25Hero de shader laranja ao vivo atrás de uma frase fixada, navegação em pílula e uma grade de cases.
- Web
Landing page SaaS escura
+25Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
- Web
Site de portfólio de designer
+25Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
- Web
Site de portfólio para desenvolvedor
+25Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
- Web
Site editorial de SaaS
+25Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
- Web
Site para designer freelancer
+25Site de estúdio de uma pessoa, com pacotes de preço fixo, páginas de plano, estudos de caso e formulário de briefing.
- Web
Modelo de site glassmorphism
+25Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
- Web
Site de produto de hardware
+25Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
- Web
Diagrama de arquitetura interativo
+25Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
- Web
Hero interativo com grade
+25Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
- Web
Explorador de grafo de conhecimento
+25Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
- Web
Modelo de dashboard de KPIs
+25Quatro cartões de KPI com variação, um gráfico de linha, detalhamento e barras de meta em papel quente.
- Web
Landing page a partir de mockups com IA
+25Veja três páginas completas antes, escolha uma, e o seu agente a constrói como código limpo e responsivo.
- Web
Template de site de revista
+25Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
- Web
Hero com animação de partículas
+25Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
- Web
Site de marca pessoal
+25Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
- Web
Modelo de site de loja de pets
+25Uma loja de pets que funciona: catálogo, variações, sacola, planejador de reposição e checkout de demonstração, num arquivo HTML.
WebSeção de preços desenhada à mão
+25Uma tabela de preços em estilo de caderno, com cartões de tinta levemente inclinados, chave anual e modo escuro, num arquivo offline.
- Web
Página de lançamento de produto cinematográfica
+25Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
- Web
Site de artigo científico
+25Uma página de projeto para o seu artigo, com uma Figura 1 interativa, resultados, limitações e citação em um clique.
- Web
Template de painel administrativo
+25Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
- Web
Template de landing page SaaS
+25Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
- Web
Site de portfólio estilo scrapbook
+25Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
- Web
Template de site de loja de tênis
+25Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
- Web
Modelo de site de clube esportivo
+25Um site de clube, academia ou estúdio com grade de horários, páginas de treinadores, planos, mapa de quadras e agendamento num arquivo.
- Web
Seção de parede de depoimentos
+25Uma parede de citações de clientes em alvenaria ou em deriva lenta, que só publica citações autorizadas.
- Web
Modelo de site de agência de viagens
+25Um site com foco em fotos para passeios, guias ou pousadas, com busca de viagens, pedidos de reserva e um quiz para escolher a viagem.
- Web
Landing page de automação de fluxos
+25Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Perguntas
O player toca os nossos episódios de verdade?
Sim. Dê a cada episódio a URL de áudio do seu host de podcast, e o player usa um elemento de áudio real com busca, capítulos, velocidade e retomada. Sem uma URL, ele roda um relógio de demonstração silencioso para que o layout possa ser revisado.
As fotos dos convidados são todas diferentes. As capas vão parecer consistentes?
Um duotone em CSS transforma qualquer foto quadrada na mesma capa azul-marinho e azul-claro. Para fotos muito desencontradas, o PopNow pode recortar fundos movimentados, ampliar imagens pequenas e uniformizar a luz sem alterar a pessoa.
O PopNow pode fazer a nossa música de abertura?
Pode, se quiser: um tema instrumental de 20 a 40 segundos e um trailer falado lido por uma voz sintética, cada um cotado antes de rodar. A skill inclui um comando de ffmpeg para mixar os dois.
Funciona para um programa solo ou narrativo?
Funciona. Os convidados viram temas ou segmentos, as temporadas podem virar o filtro principal, e episódios sem foto de convidado recebem a arte do programa ou uma série de capas geradas.
Em que isso é diferente da página que o meu host de podcast oferece?
As páginas do host são uma lista de episódios. Este design de site de podcast acrescenta um hero que toca, páginas de convidados, notas do programa com marcas de tempo e um player que continua tocando enquanto as pessoas navegam, e serve como página de lançamento de podcast.