무료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.

nexu-io/open-design

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

영상 위에 재생 중 카드 표시
개인 사이트에서 좋아하는 곡 소개
팟캐스트 제목과 제작자 소개
음악 플레이어 스타일로 자기소개 제작

한국어 소개

할 수 있는 일

곡, 팟캐스트, 자기소개를 Spotify의 재생 중 화면을 떠올리게 하는 카드로 만듭니다. 표지, 제목, 제작자 이름이나 부제, 진행 막대, 시간 표시, 재생 조작 모양의 아이콘을 조합해 단일 HTML로 출력합니다. 어두운 배경에 초록색을 강조색으로 쓰며 작은 음파 애니메이션도 선택해 넣을 수 있습니다.

이럴 때 유용합니다

영상 위에 겹쳐 표시하는 음악 소개나 개인 사이트의 작은 소개 카드에 적합합니다. 음악과 무관한 글도 제목을 곡명으로, 부제나 작성자를 아티스트 이름으로 표현할 수 있습니다. 1280×720 가로 화면과 페이지의 눈에 띄는 위치에 넣을 수 있는 600×200의 작은 가로형 카드가 제공됩니다.

사용 예시

“이 곡명과 아티스트 이름으로 영상 왼쪽 아래에 놓을 재생 중 카드를 만들어 주세요.”
“자기소개 제목과 직함을 사용해 600×200 가로형 카드로 만들어 주세요.”

주의 사항

표지는 외부 이미지를 불러오지 않고 CSS 그라데이션, 글자, 도형으로 그립니다. 자료에는 Spotify API 연동이나 실제 음악 재생 기능이 설명되어 있지 않습니다. 음악 이외의 입력은 시간 표시에 기본값을 쓸 수 있습니다. 음파 움직임은 prefers-reduced-motion으로 멈출 수 있습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호곡, 팟캐스트, 자기소개를 재생 중 카드로 만드는 용도와 구성 요소가 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호두 가지 크기, 색상값, 글자 크기, 입력 대응 방식, 단일 HTML 출력을 지정합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호외부 이미지를 금지하고 표지는 CSS로 그리며 음파 애니메이션은 동작 줄이기 설정을 지원합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호단일 HTML 파일, CSS, 인라인 SVG로 구성하며 대체 글꼴도 제시합니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(3)

SKILL.md3.8 KB
example.html4.4 KB
example.md342 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

【模板: 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 → fallback Inter / Inter Tight, weight 400 / 700。
数字: 同主字体, 不用 mono 太多。

【设计细节】

Spotify 经典 dark mode: #121212 bg, #1DB954 accent, #b3b3b3 secondary text。
若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
若用户输入是音乐相关 → 直接对应。
严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
微动效: 音波动效用 @keyframes, 可被 prefers-reduced-motion 关闭。
单文件 HTML。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬