Name: social-spotify-card
Author: nexu-io

About

Imported from nexu-io/open-design (skills/social-spotify-card/SKILL.md) via skills.sh. Install upstream with npx skills add nexu-io/open-design --skill social-spotify-card. Copyright stays with the author.

【模板: 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。

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/nexu-io-open-design-social-spotify-card/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

nexu-io-open-design-social-spotify-card.ocm.jsonjson

{
  "ocm": "1",
  "id": "nexu-io-open-design-social-spotify-card",
  "kind": "skill",
  "name": "social-spotify-card",
  "description": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
  "publisher": "nexu-io",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "spotify",
      "music",
      "now-playing",
      "card",
      "overlay",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/nexu-io/open-design",
      "path": "skills/social-spotify-card/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/nexu-io/open-design/social-spotify-card",
      "key": "nexu-io/open-design/skills/social-spotify-card/SKILL.md"
    }
  },
  "instructions": "【模板: Spotify Now-Playing 卡】\n【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。\n\n【画布】两个尺寸:\n- 横版视频叠加: 1280×720, 卡片居中或左下角浮动。\n- 紧凑横条 widget: 600×200, 可嵌入到任何 hero。\n\n【卡片结构】\n- 外框: 圆角 12-16px; bg 用专辑封面色提取的暗渐变 (e.g. `linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)`) 或 Spotify 经典 `#121212`; 边缘有 1px subtle border。\n- 左侧: **专辑封面** (CSS 渐变 + 大字 monogram 或抽象几何描绘, 不能外链图片), 圆角 6px, 60-200px 方形。\n- 右侧:\n  - 顶部 `NOW PLAYING` (uppercase letterspace 0.14em, 11px, 绿色 `#1DB954`)。\n  - **歌名 / 标题** (Inter / Spotify Circular, 22-28px, weight 700, 白色)",
  "cost": {
    "context_tokens": 323
  }
}

Fetch it by URL: GET /api/v1/registry/nexu-io-open-design-social-spotify-card/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.