免费在 GitHub 公开中文介绍

social-spotify-card

将歌曲、播客或个人介绍制作成Spotify风格卡片，配有封面、进度条和播放操作样式图标，输出适合视频叠加或个人网站的HTML。

原文查看原文说明

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

实测评分未实测

适用场景

将歌曲、播客或个人介绍整理成类似Spotify正在播放界面的卡片。组合封面、标题、创作者姓名或副标题、进度条、时间显示和播放操作样式图标，输出为单个HTML文件。整体采用深色背景和绿色点缀，也可添加小型声波动画。

适合叠加在视频上的音乐介绍，或放在个人网站中的小型介绍卡片。非音乐文本也能采用这种形式：将主标题作为曲名，将副标题或作者作为艺人姓名。提供1280×720横向画布，以及可嵌入页面显眼位置的600×200紧凑横条。

封面不加载外部图片，而是用CSS渐变、文字和几何图形绘制。资料未说明Spotify API集成或实际音乐播放功能。非音乐输入的时间显示可能采用默认值。声波动画支持通过prefers-reduced-motion停止。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果（实测对比）。

不计入评分。由 AI（OpenAI Codex）于 2026年10月20日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

安装前可以查看交给 AI 代理的指令内容。

【模板: Spotify Now-Playing 卡】【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。

【画布】两个尺寸:

【卡片结构】

外框: 圆角 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)。

【字体】

【设计细节】

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。