OpenDesign is an open-source, local-first desktop app that lets coding agents create prototypes, dashboards, slide decks, images, video, and design systems as exportable files. It is used by people working with agent runtimes such as Claude Code, Codex, Cursor, and DeepSeek Harness. The catalogue add-ons extend the OpenDesign workflow with skills, instructions, commands, and plugins.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nexu-io/open-design --skill social-spotify-cardgit clone --depth 1 https://github.com/nexu-io/open-designWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nexu-io/open-design/social-spotify-card)<a href="https://agentmods.dev/skills/nexu-io/open-design/social-spotify-card"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/social-spotify-card/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nexu-io/open-design/social-spotify-card"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/social-spotify-card.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00030 | $0.01161 |
| Opus 5 | $0.00015 | $0.00580 |
| Sonnet 5 | $0.00006 | $0.00232 |
| Haiku 4.5 | $0.00003 | $0.00116 |
Grade A, and why
social-spotify-card scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
Copies of this mod
1 near-identical copy found in the catalogue:
- social-spotify-card — 100% identical, 0 lines differ
What it actually says
【模板: 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→ fallbackInter/Inter Tight, weight 400 / 700。 - 数字: 同主字体, 不用 mono 太多。
【设计细节】
- Spotify 经典 dark mode:
#121212bg,#1DB954accent,#b3b3b3secondary text。 - 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
- 若用户输入是音乐相关 → 直接对应。
- 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
- 微动效: 音波动效用
@keyframes, 可被prefers-reduced-motion关闭。 - 单文件 HTML。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 68 lines · 30 tokens per session scan A c498ee445a38
social-spotify-card is a skill published in the GitHub repository nexu-io/open-design (95,309 stars, last pushed yesterday), licensed Apache-2.0. It adds 30 tokens to every session and 1,161 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
social-spotify-card
A Spotify-style now-playing card that shows cover art, a title, artist or subtitle, playback progress, and music controls. It can be sized for video overlays or a website hero section.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
frame-macos-notification
A template for realistic macOS Big Sur-style notification banners, with an app icon, title, message, and optional action button.
social-reddit-card
A realistic Reddit post card with a community name, author details, title, content, vote controls, comment count, awards, and sharing actions. Reddit is a discussion platform organized into topic-based communities called subreddits.
social-x-post-card
A realistic X post card that displays a profile, handle, post text, optional quoted content or image area, and engagement figures such as likes, reposts, replies, and views. X is the social platform formerly known as Twitter.