Social Spotify Card
- 1.6k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
social-spotify-card is an agent skill rendering Spotify Now Playing cards with album art and progress bars for overlays.
About
The social-spotify-card skill renders content as a Spotify Now Playing style card for video overlays or personal homepages. Canvas sizes include 1280 by 720 centered overlay and 600 by 200 compact widget with dark gradient or classic Spotify #121212 background. Structure covers album cover CSS gradient monogram, NOW PLAYING label in #1DB954, song title and artist, progress bar with timestamps, playback control icons, and Spotify logo SVG. Rules forbid external images, use real user content mapping title to song name, support prefers-reduced-motion for wave animation, and output single-file HTML. Use when creators need Spotify-style music cards for video overlays or about pages.
- Spotify Now Playing card with album art, progress, controls.
- Canvas 1280x720 overlay or 600x200 compact widget.
- Dark mode #121212 with #1DB954 accent and inline SVG logo.
- No external images — CSS gradient album cover monogram.
- Single-file HTML with optional audio wave @keyframes animation.
Social Spotify Card by the numbers
- 1,598 all-time installs (skills.sh)
- +123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #351 of 1,881 Marketing & SEO skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
social-spotify-card capabilities & compatibility
- Capabilities
- spotify card html generation · progress bar and control row styling · album cover gradient monogram · reduced motion animation support
- Use cases
- ui design · marketing · frontend
What social-spotify-card says it does
Spotify Now Playing-style card with album art, progress bar, and playback controls
严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
npx skills add https://github.com/nexu-io/open-design --skill social-spotify-cardAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
How do I turn my content into a Spotify Now Playing card for video overlay or homepage?
Render Spotify Now Playing cards with album art, progress bar, and playback controls for overlays.
Who is it for?
Creators making Spotify-style music or podcast cards for video overlays or personal pages.
Skip if: Skip for real Spotify API integration or streaming playback without HTML card rendering.
When should I use this skill?
User asks for Spotify now playing card, music overlay, or social spotify card template.
What you get
A single-file HTML Spotify-style card with album art gradient, progress bar, and playback controls.
- Now Playing card mockup
- Overlay layout spec
By the numbers
- Featured score: 43 in open-design catalog
- Supports 2 aspect layouts: 1280×720 and 600×200
Files
【模板: Spotify Now-Playing 卡】 【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。
【画布】两个尺寸:
- 横版视频叠加: 1280×720, 卡片居中或左下角浮动。
- 紧凑横条 widget: 600×200, 可嵌入到任何 hero。
【卡片结构】
- 外框: 圆角 12-16px; bg 用专辑封面色提取的暗渐变 (e.g.
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) 或 Spotify 经典#121212; 边缘有 1px subtle border。 - 左侧: 专辑封面 (CSS 渐变 + 大字 monogram 或抽象几何描绘, 不能外链图片), 圆角 6px, 60-200px 方形。
- 右侧:
- 顶部
NOW PLAYING(uppercase letterspace 0.14em, 11px, 绿色#1DB954)。 - 歌名 / 标题 (Inter / Spotify Circular, 22-28px, weight 700, 白色)。
- 艺人 / 副标 (16px, weight 400, opacity 0.7)。
- 进度条: 4px 高, 圆角, 灰色背景 + 白色 fill (
width: 38%); 两端时间戳1:24 / 3:42(mono, 11px, 灰)。 - 控制行: ⏮ ⏯ ⏭ icon (inline SVG, 24px, 白色 fill), shuffle / repeat icon 较小。
- 右上角: Spotify logo (内联 SVG, 绿色
#1DB954圆 + 三道白色波纹)。 - 可选: 右下角小型音波动效 (3 个 bar
@keyframes)。
【字体】
- 主:
Spotify Circular→ fallbackInter/Inter Tight, weight 400 / 700。 - 数字: 同主字体, 不用 mono 太多。
【设计细节】
- Spotify 经典 dark mode:
#121212bg,#1DB954accent,#b3b3b3secondary text。 - 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
- 若用户输入是音乐相关 → 直接对应。
- 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
- 微动效: 音波动效用
@keyframes, 可被prefers-reduced-motion关闭。 - 单文件 HTML。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Spotify Now Playing · Lo-Fi</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; background: radial-gradient(circle at 30% 30%, #1a1a1f 0%, #050507 70%); }
.cover {
background:
radial-gradient(circle at 30% 25%, #ffb1c3 0%, transparent 40%),
radial-gradient(circle at 75% 70%, #6b46c1 0%, transparent 50%),
linear-gradient(135deg, #1e1247 0%, #2c0f3f 100%);
}
.bar { background: rgba(255,255,255,0.18); }
.bar-fill { background: #fff; }
@keyframes wave { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
.wave i { display:inline-block; width:3px; margin-right:2px; background:#1DB954; transform-origin:bottom; animation: wave 1s ease-in-out infinite; }
.wave i:nth-child(2){animation-delay:.15s} .wave i:nth-child(3){animation-delay:.3s} .wave i:nth-child(4){animation-delay:.45s}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-12">
<div class="w-[640px] rounded-2xl p-6 flex gap-5 items-stretch" style="background:linear-gradient(135deg,#1e3264 0%,#0d1f3d 100%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)">
<!-- album cover -->
<div class="cover w-44 h-44 rounded-md flex flex-col justify-between p-4 shrink-0 relative overflow-hidden">
<div class="text-[10px] uppercase tracking-[0.22em] text-white/70 font-semibold">Chillhop</div>
<div class="text-white">
<div class="text-[22px] font-bold leading-tight">Lo-Fi<br/>Essentials</div>
<div class="text-[10px] opacity-70 mt-1">Spring · 2026</div>
</div>
</div>
<!-- right -->
<div class="flex-1 flex flex-col justify-between min-w-0">
<div>
<div class="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] font-semibold" style="color:#1DB954">
<svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M12 0a12 12 0 100 24 12 12 0 000-24zm5.52 17.36a.75.75 0 01-1.03.25c-2.83-1.73-6.4-2.12-10.6-1.16a.75.75 0 11-.34-1.46c4.6-1.05 8.55-.6 11.72 1.34.36.22.47.69.25 1.03zm1.47-3.27a.94.94 0 01-1.29.3c-3.24-1.99-8.17-2.57-12-1.4a.94.94 0 11-.55-1.8c4.4-1.34 9.83-.7 13.55 1.6.45.27.6.86.29 1.3zm.13-3.4c-3.88-2.3-10.3-2.51-14.01-1.4a1.13 1.13 0 11-.66-2.16c4.27-1.3 11.36-1.04 15.81 1.6a1.13 1.13 0 11-1.14 1.96z"/></svg>
<span>Now Playing</span>
<span class="wave ml-auto h-3 flex items-end"><i></i><i></i><i></i><i></i></span>
</div>
<h1 class="mt-3 text-white text-2xl font-bold leading-tight">Sunday Afternoon</h1>
<p class="text-white/70 text-base mt-1">j'san · evil needle</p>
</div>
<div class="mt-4">
<div class="flex items-center gap-3 text-[11px] font-mono text-white/60">
<span>1:24</span>
<div class="flex-1 h-[3px] rounded-full bar relative">
<div class="bar-fill h-full rounded-full" style="width:38%"></div>
<div class="absolute w-2.5 h-2.5 rounded-full bg-white" style="left:38%;top:50%;transform:translate(-50%,-50%);"></div>
</div>
<span>3:42</span>
</div>
<!-- controls -->
<div class="flex items-center justify-between mt-4 text-white">
<svg viewBox="0 0 24 24" class="w-4 h-4 opacity-60" fill="currentColor"><path d="M10 17l-5-5 5-5v3h7v4h-7v3z"/></svg>
<div class="flex items-center gap-5">
<svg viewBox="0 0 24 24" class="w-5 h-5 opacity-80" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
<button class="w-11 h-11 rounded-full bg-white flex items-center justify-center text-black">
<svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<svg viewBox="0 0 24 24" class="w-5 h-5 opacity-80" fill="currentColor"><path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/></svg>
</div>
<svg viewBox="0 0 24 24" class="w-4 h-4 opacity-60" fill="currentColor"><path d="M19 7v4l5-5-5-5v3a8 8 0 00-8 8 8 8 0 008 8v-2a6 6 0 010-12z"/></svg>
</div>
</div>
</div>
</div>
</body>
</html>
Lo-Fi Beats · Chillhop Essentials
A daily-driver mix for deep work and late-night writing. 8 hours of mellow beats, soft jazz, and rainy-day ambient — curated by Chillhop Music.
- Now playing: Sunday Afternoon — j'san · evil needle
- Progress: 1:24 / 3:42
- Album: Chillhop Essentials Spring 2026
- Listeners this week: 2.4M
Related skills
Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.167k41.1kCopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.158k41.1k
Viral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k64Viral HooksWrite and critique viral hooks for short-form video opening sequences.123k64Viral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k64Viral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k64FAQ
What sizes are supported?
1280 by 720 for video overlay or 600 by 200 compact horizontal widget.
Can I use album cover URLs?
No — covers use CSS gradients and monogram text; external image links are forbidden.
Is social-spotify-card safe to install?
Review the Security Audits panel on this page before installing in production.
Marketing & SEOdistribution