social-spotify-card
Cria um cartão no estilo 'Spotify Now Playing'. Ele mostra a arte do álbum, barra de progresso e controles de reprodução, sendo ótimo para vídeos ou páginas pessoais.
O que ela faz
Cria um cartão visual que se parece com o que você vê quando uma música está tocando no Spotify. Ele mostra a capa do álbum, o tempo da música e botões de controle.
Quando usar
- ✓Para colocar em um vídeo como uma sobreposição.
- ✓Para usar na página principal de um site pessoal.
- ✓Para mostrar o que você está ouvindo ou assistindo.
Exemplo do que pedir para a IA
“Crie um cartão do Spotify para a música 'Bohemian Rhapsody' do Queen, com a capa do álbum e uma barra de progresso de 1 minuto e 30 segundos de 3 minutos e 42 segundos totais.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA pega as informações que você dá (como nome da música e artista) e cria uma imagem de cartão. Ela usa cores e fontes parecidas com as do Spotify, e pode até criar uma arte simples se não houver capa.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill social-spotify-cardOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/social-spotify-card/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
【Modelo: Cartão Spotify Now-Playing】 【Intenção】Renderizar uma música, um episódio de podcast ou uma introdução pessoal como um cartão "Tocando Agora" do Spotify, ideal para sobreposição de vídeo / página "Sobre Mim" / herói do criador. Inspirado no hyperframes spotify-card.
【Tela】Dois tamanhos:
- Sobreposição de vídeo horizontal: 1280×720, o cartão centralizado ou flutuando no canto inferior esquerdo.
- Widget de barra horizontal compacto: 600×200, pode ser incorporado em qualquer herói.
【Estrutura do Cartão】
- Moldura externa: Cantos arredondados de 12-16px; fundo com gradiente escuro extraído da cor da capa do álbum (por exemplo,
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) ou o clássico#121212do Spotify; borda sutil de 1px nas bordas. - Lado esquerdo: Capa do álbum (gradiente CSS + monograma grande ou representação geométrica abstrata, sem imagens externas), cantos arredondados de 6px, quadrado de 60-200px.
- Lado direito:
- Topo
NOW PLAYING(letras maiúsculas com espaçamento de 0.14em, 11px, verde#1DB954). - Nome da música / Título (Inter / Spotify Circular, 22-28px, peso 700, branco).
- Artista / Subtítulo (16px, peso 400, opacidade 0.7).
- Barra de progresso: 4px de altura, cantos arredondados, fundo cinza + preenchimento branco (
width: 38%); timestamps em ambas as extremidades1:24 / 3:42(mono, 11px, cinza). - Linha de controle: ícones ⏮ ⏯ ⏭ (SVG inline, 24px, preenchimento branco), ícones de shuffle / repeat menores.
- Topo
- Canto superior direito: Logo do Spotify (SVG inline,
#1DB954verde + três ondas brancas). - Opcional: Pequena animação de onda sonora no canto inferior direito (3 barras
@keyframes).
【Fontes】
- Principal:
Spotify Circular→ fallbackInter/Inter Tight, peso 400 / 700. - Numérico: Mesma fonte principal, não usar mono em excesso.
【Detalhes de Design】
- Modo escuro clássico do Spotify: fundo
#121212, acento#1DB954, texto secundário#b3b3b3. - Se a entrada do usuário for texto/título → trate "título" como nome da música, "subtítulo/autor" como artista, estime "duração" 3:42 como padrão.
- Se a entrada do usuário for relacionada à música → corresponda diretamente.
- Proibido imagens externas; use gradiente CSS + logo de texto / representação geométrica para a capa.
- Micro animações: animação de onda sonora usa
@keyframes, pode ser desativada porprefers-reduced-motion. - HTML de arquivo único.
Perguntas frequentes
Posso usar minhas próprias imagens?
Não, a IA não permite usar imagens externas. Ela cria a arte do cartão usando cores e formas.
O que acontece se eu der apenas um texto?
Se você der um título e um autor, a IA vai usar isso como se fosse uma música e criar o cartão, inventando um tempo para ela.
Posso desativar as animações?
Sim, se você preferir menos movimento, as animações podem ser desativadas.
Detalhes
Descrição original do autor
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #584
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
ios-icon-gen
Faz seu agente gerar ícones para aplicativos iOS. Ele usa símbolos da Apple ou ícones de outras fontes para criar os arquivos corretos.
affaan-m/ECC
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills