SuperAPI AI 工具集

social-spotify-card

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:把一首歌、一段播客或一段个人介绍渲染成 Spotify 正在播放卡,适合视频叠加、个人 about page、创作者 hero。灵感来自 hyperframes spotify-card。

画布:横版视频叠加 1280×720,卡片居中或左下角浮动;紧凑横条 widget 600×200,可嵌入任意 hero。

卡片结构:外框圆角 12-16px,背景用专辑封面色提取的暗渐变(如 linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%))或 Spotify 经典 #121212,边缘 1px 细边框。左侧专辑封面用 CSS 渐变加大字 monogram 或抽象几何描绘,圆角 6px,60-200px 方形。右侧依次为 NOW PLAYING(大写、字距 0.14em、11px、绿色 #1DB954)、歌名/标题(Inter 或 Spotify Circular,22-28px,weight 700,白色)、艺人/副标(16px,weight 400,opacity 0.7)、进度条(4px 高、圆角、灰底白填充 width: 38%,两端时间戳 1:24 / 3:42,mono 11px 灰)、控制行(⏮ ⏯ ⏭ 内联 SVG 24px 白色,shuffle/repeat 较小)。右上角 Spotify logo 用内联 SVG(绿色 #1DB954 圆加三道白色波纹)。可选右下角三 bar 音波动效。

字体:主字体 Spotify Circular,回退 Inter / Inter Tight,weight 400 / 700;数字同主字体。

设计细节:Spotify 经典 dark mode,背景 #121212,强调色 #1DB954,次要文字 #b3b3b3。若输入为文本/标题,把标题当歌名、副标/作者当艺人,时长默认估算 3:42;若输入为音乐相关则直接对应。严禁外链图片,封面须用 CSS 渐变加文字 logo 或几何描绘。音波动效用 @keyframes,可被 prefers-reduced-motion 关闭。输出为单文件 HTML。

限制:资料未提供安装命令、依赖、收费与平台信息,暂未提供。