{"id":"407ac849-c77b-4910-8e5e-d4fc98fb6710","shortId":"FtnqMS","kind":"skill","title":"social-spotify-card","tagline":"Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页","description":"【模板: 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, 白色)。\n  - **艺人 / 副标** (16px, weight 400, opacity 0.7)。\n  - 进度条: 4px 高, 圆角, 灰色背景 + 白色 fill (`width: 38%`); 两端时间戳 `1:24 / 3:42` (mono, 11px, 灰)。\n  - 控制行: ⏮ ⏯ ⏭ icon (inline SVG, 24px, 白色 fill), shuffle / repeat icon 较小。\n- 右上角: Spotify logo (内联 SVG, 绿色 `#1DB954` 圆 + 三道白色波纹)。\n- 可选: 右下角小型音波动效 (3 个 bar `@keyframes`)。\n\n【字体】\n- 主: `Spotify Circular` → fallback `Inter` / `Inter Tight`, weight 400 / 700。\n- 数字: 同主字体, 不用 mono 太多。\n\n【设计细节】\n- Spotify 经典 dark mode: `#121212` bg, `#1DB954` accent, `#b3b3b3` secondary text。\n- 若用户输入是文本/标题 → 把 \"标题\" 当歌名, \"副标/作者\" 当艺人, 估算\"时长\" 3:42 默认。\n- 若用户输入是音乐相关 → 直接对应。\n- 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。\n- 微动效: 音波动效用 `@keyframes`, 可被 `prefers-reduced-motion` 关闭。\n- 单文件 HTML。","tags":["social","spotify","card","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-social-spotify-card","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/social-spotify-card","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,294 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:18.276Z","embedding":null,"createdAt":"2026-05-15T12:50:34.817Z","updatedAt":"2026-05-18T18:50:18.276Z","lastSeenAt":"2026-05-18T18:50:18.276Z","tsv":"'-16':56 '-200':88 '-28':108 '0':66 '0.14':97 '0.7':119 '0d1f3d':67 '1':130 '100':68 '11px':99,135 '12':55 '121212':72,184 '1280':43 '135deg':64 '16px':115 '1db954':101,154,186 '1e3264':65 '1px':74 '200':49 '22':107 '24':131 '24px':141 '3':132,159,201 '38':128 '400':117,172 '42':133,202 '4px':121 '60':87 '600':48 '6px':86 '700':111,173 '720':44 'accent':187 'b3b3b3':188 'bar':161 'bg':58,185 'border':76 'card':4,39 'circular':106,166 'css':79,208 'dark':182 'e.g':60 'em':98 'fallback':167 'fill':126,143 'gradient':63 'hero':33,51 'html':223 'hyperfram':36 'icon':138,146 'inlin':139 'inspir':34 'inter':104,168,169 'keyfram':162,215 'letterspac':96 'linear':62 'linear-gradi':61 'logo':150,211 'mode':183 'mono':134,177 'monogram':82 'motion':220 'now-play':16 'opac':118 'overlay':28 'page':31 'play':7,18,94 'prefer':218 'prefers-reduced-mot':217 'px':57,89,109 'reduc':219 'repeat':145 'secondari':189 'shuffl':144 'skill' 'skill-social-spotify-card' 'social':2 'social-spotify-card':1 'source-nexu-io' 'spotifi':3,5,15,24,38,70,105,149,165,180 'spotify-card':37 'subtl':75 'svg':140,152 'text':190 'tight':170 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'uppercas':95 'video':27 'weight':110,116,171 'widget':47 'width':127 '一段播客':22 '三道白色波纹':156 '不用':176 '不能外链图片':84 '专辑封面':9,78 '两个尺寸':41 '两端时间戳':129 '严禁外链图片':206 '个':160 '个人':29 '个人主页':13 '主':164 '估算':199 '作者':197 '关闭':221 '内联':151 '几何描绘':212 '创作者':32 '副标':114,196 '单文件':222 '卡':19 '卡片居中或左下角浮动':45 '卡片结构':52 '可嵌入到任何':50 '可被':216 '可选':157 '右上角':148 '右下角小型音波动效':158 '右侧':91 '同主字体':175 '圆':155 '圆角':54,85,123 '外框':53 '大字':81 '太多':178 '字体':163 '封面用':207 '左侧':77 '当歌名':195 '当艺人':198 '微动效':213 '意图':20 '或':69 '或一段个人介绍渲染成':23 '或抽象几何描绘':83 '把':193 '把一首歌':21 '控制行':137 '播放控制':11 '数字':174 '文字':210 '方形':90 '时长':200 '标题':103,192,194 '模板':14 '横版视频叠加':42 '歌名':102 '正在播放卡':25 '渐变':80,209 '灰':136 '灰色背景':124 '用专辑封面色提取的暗渐变':59 '画布':40 '白色':112,125,142 '直接对应':205 '紧凑横条':46 '经典':71,181 '绿色':100,153 '艺人':113 '若用户输入是文本':191 '若用户输入是音乐相关':204 '设计细节':179 '较小':147 '边缘有':73 '进度条':10,120 '适合':26 '适配视频叠加':12 '音波动效用':214 '顶部':92 '风格卡':8 '高':122 '默认':203","prices":[{"id":"0b568019-9bfc-4175-a103-4b84c502ef26","listingId":"407ac849-c77b-4910-8e5e-d4fc98fb6710","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:34.817Z"}],"sources":[{"listingId":"407ac849-c77b-4910-8e5e-d4fc98fb6710","source":"github","sourceId":"nexu-io/open-design/social-spotify-card","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/social-spotify-card","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:34.817Z","lastSeenAt":"2026-05-18T18:50:18.276Z"}],"details":{"listingId":"407ac849-c77b-4910-8e5e-d4fc98fb6710","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"social-spotify-card","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"1d36fb5ecf0c68ddbfe5cc7a061dd19f108aa25d","skill_md_path":"skills/social-spotify-card/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/social-spotify-card"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"social-spotify-card","description":"Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/social-spotify-card"},"updatedAt":"2026-05-18T18:50:18.276Z"}}