Back to browse

nexu-io/open-design

social-spotify-card

Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.

50Collecting
See source evidenceView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "skills/social-spotify-card"
Source profileGeneral workflowCatalog only

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Limited to facts supported by the pinned source

What the pinned source establishes about social-spotify-card

Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.

npx skills add https://github.com/nexu-io/open-design --skill "skills/social-spotify-card"
Check the pinned source

The pinned source contains about 109 English words and 0 usable sections. That evidence supports a source profile, not a complete guide.

109 source words · 0 usable sections

FAQ

How do I install social-spotify-card?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "skills/social-spotify-card". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
50/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

50/100
Documentation8/30
Specificity10/25
Maintenance20/20
Trust signals12/25
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

【模板: 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。
Skill path
skills/social-spotify-card/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected