Social Spotify Card
Generate a Spotify Now Playing-style overlay card with album art, progress bar, and controls for streams, reels, or a personal site.
Overview
social-spotify-card is an agent skill for the Build phase that renders a Spotify Now Playing-style card with album art, progress bar, and controls for overlays or homepages.
Install
npx skills add https://github.com/nexu-io/open-design --skill social-spotify-cardWhat is this skill?
- Spotify dark Now Playing layout: cover art, track metadata, scrubber, and control row
- Targets 1280×720 or 600×200 surfaces for video overlays and personal homepages
- Open-design prototype mode with debounced HTML preview reload
- Example-driven template (Lo-Fi Beats sample) with real content—no lorem ipsum
- Upstream html-anything workflow for turning content into the card
- Aspect hints: 1280×720 or 600×200
Adoption & trust: 654 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a credible Spotify-style now-playing card for video or your site but lack time to match layout, spacing, and dark-theme details by hand.
Who is it for?
Indie streamers, musicians, and solo builders who need a polished music overlay or homepage widget fast.
Skip if: Products that need live Spotify API OAuth, real playback, or app-store music integrations—this is a visual template only.
When should I use this skill?
User wants a Spotify Now Playing-style card with album art, progress bar, and controls for video overlay or personal homepage.
What do I get? / Deliverables
You get an HTML prototype card filled with your real track data and aspect-safe dimensions ready to embed or record.
- index.html Spotify-style card prototype
- Debounced live preview configuration
Recommended Skills
Journey fit
Canonical shelf is Build → frontend because the deliverable is a visual HTML card prototype, not distribution or analytics. Frontend subphase matches HTML preview, fixed aspect hints (1280×720 or 600×200), and video-overlay UX.
How it compares
Use as a design template skill, not a Spotify SDK integration or backend streaming service.
Common Questions / FAQ
Who is social-spotify-card for?
Solo builders and creators using agent coding tools who want Spotify-styled UI for streams, social clips, or personal sites without custom CSS from zero.
When should I use social-spotify-card?
During Build frontend work when designing overlay assets, homepage hero cards, or demo visuals before Ship launch prep.
Is social-spotify-card safe to install?
It is primarily static HTML/CSS template content; review the Security Audits panel on this Prism page before pulling from third-party preview URLs.
SKILL.md
READMESKILL.md - Social Spotify Card
【模板: 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` → fallback `Inter` / `Inter Tight`, weight 400 / 700。 - 数字: 同主字体, 不用 mono 太多。 【设计细节】 - Spotify 经典 dark mode: `#121212` bg, `#1DB954` accent, `#b3b3b3` secondary text。 - 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。 - 若用户输入是音乐相关 → 直接对应。 - 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。 - 微动效: 音波动效用 `@keyframes`, 可被 `prefers-reduced-motion` 关闭。 - 单文件 HTML。