Menu
Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
推特金句 / 数据卡, 适合配推文
小红书风格知识卡片, 多张联排可滑动浏览
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
| name | social-spotify-card |
| zh_name | Spotify 正在播放卡 |
| en_name | Spotify Now-Playing Card |
| emoji | 🎵 |
| description | Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页 |
| category | card |
| scenario | personal |
| aspect_hint | 1280×720 或 600×200 |
| featured | 43 |
| tags | ["spotify","music","now-playing","card","overlay"] |
| example_id | sample-social-spotify-card |
| example_name | Spotify Now Playing · Lo-Fi |
| example_format | markdown |
| example_tagline | Spotify 经典 dark 卡 |
| example_desc | Lo-Fi Beats · Chillhop 进度条 1:24 / 3:42 + 控制行 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · spotify-card |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"personal","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: Spotify Now-Playing 卡】 【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。
【画布】两个尺寸:
【卡片结构】
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) 或 Spotify 经典 #121212; 边缘有 1px subtle border。NOW PLAYING (uppercase letterspace 0.14em, 11px, 绿色 #1DB954)。width: 38%); 两端时间戳 1:24 / 3:42 (mono, 11px, 灰)。#1DB954 圆 + 三道白色波纹)。@keyframes)。【字体】
Spotify Circular → fallback Inter / Inter Tight, weight 400 / 700。【设计细节】
#121212 bg, #1DB954 accent, #b3b3b3 secondary text。@keyframes, 可被 prefers-reduced-motion 关闭。