복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.
- 픽셀 스타일의 소개 영상을 만들 때
- 세 장면 영상의 내용을 교체할 때
- HTML에서 장면 전환을 확인할 때
nexu-io/open-design10.4만2026년 10월 23일 업데이트
무료GitHub에 공개한국어 소개
social-reddit-card
제공한 이야기, 질문, 짧은 농담을 투표란과 댓글 수가 있는 Reddit 스타일 카드로 구성합니다. 영상에 겹쳐 넣거나 소셜 미디어에서 공유할 단일 HTML을 만듭니다.
원문원문 설명 보기
Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
연동 도구Reddit
실행 점수 미검증
설치 방법 보기이럴 때 유용합니다
- 영상에 넣을 Reddit 스타일 카드를 만듭니다
- 소셜 미디어에서 이야기 카드를 공유합니다
- 질문이나 농담을 게시물처럼 표시합니다
- 배경에 맞춰 밝은 모드와 어두운 모드를 고릅니다
한국어 소개
할 수 있는 일
제공한 이야기, 질문, 짧은 농담을 Reddit 게시물과 비슷한 카드로 구성합니다. 왼쪽의 찬성 및 반대 투표란, 투표 수, 커뮤니티 이름, 작성자, 제목, 본문과 댓글 수 등을 배치해 단일 HTML로 만듭니다. 밝은 모드와 어두운 모드를 선택할 수 있으며, 아이콘은 HTML에 삽입한 SVG로 그립니다.
이럴 때 유용합니다
영상 위에 게시물 형태의 카드를 겹쳐 넣거나 소셜 미디어에서 이야기를 카드 형식으로 공유할 때 적합합니다. 영상용은 1280×720, 단독 공유용은 800×600 크기가 제시되어 있습니다. 배경은 투명하거나 어둡게 설정할 수 있습니다.
사용 예시
- “이 체험담을 영상에 넣을 어두운 모드의 Reddit 스타일 카드로 만들어 주세요.”
- “이 질문을 투표란과 댓글 수가 있는 공유용 카드로 만들어 주세요.”
주의 사항
본문에는 사용자가 제공한 내용을 사용합니다. 커뮤니티 이름, 사용자 이름과 투표 수는 생성하므로 실제 게시물 정보로 사용할 때는 확인이 필요합니다. 외부 이미지 링크는 사용하지 않으며, 이미지 자리에는 CSS 그라데이션과 설명을 사용합니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
문서 점검
AI가 SKILL.md의 내용에서 주의가 필요한 작업과 도입 전제를 확인했습니다. 점수는 실제로 실행한 결과(실행 검증)만으로 매깁니다.
- 안전성전송·삭제·명령 실행 등을 명시하고 있는가
- B일부 부족사용자 이름과 투표 수를 자동 생성하지만 가상 정보임을 표시하는 방법은 없습니다.
- 도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
- A양호단일 HTML과 삽입형 SVG를 지정하며 별도 인증 키나 전용 도구 요구 사항은 없습니다.
점수에는 넣지 않았습니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
평가가 다르다고 생각되면 재검토를 요청하기
포함된 파일(3)
- SKILL.md3.5 KB
- example.html3.8 KB
- example.md456 B
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
【模板: Reddit 帖子卡】 【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。
【画布】1280×720 (视频叠加) 或 800×600 (单卡分享); 背景透明或暗色 #0b1416。
【卡片结构】
- 外框: 圆角 16px, bg 白
#ffffff(light) 或#1a1a1b(dark, 推荐 video overlay), border 1px#edeff1/#343536。 - 左侧 vote rail (40-56px 宽):
- 上箭头 ▲ (16px,
#878a8c, hover 变橙#ff4500)。 - 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用
12.3k格式。 - 下箭头 ▼ (hover 变蓝
#7193ff)。
- 上箭头 ▲ (16px,
- 主体区:
- 顶部 meta row: 子版块图标 (CSS 圆形 + 字母) +
r/subreddit(粗) +· Posted by u/username · 3h(小字灰)。 - 标题 (Inter / IBM Plex Sans, 22-28px, weight 500, dark text)。
- 内容: 16px body 或 引用块或 1 张图 (CSS 渐变占位)。
- 底部 action row: 💬
1.2k Comments· 🏆 Awards · ⤴️ Share · ⋯ icon。
- 顶部 meta row: 子版块图标 (CSS 圆形 + 字母) +
- 顶部右上角 Reddit Snoo logo (内联 SVG, 橙色
#ff4500)。
【字体】
- 主:
IBM Plex Sans→ fallbackInter, weight 400/500/700。 - 数字: 同主字体。
- 中文:
Noto Sans SC。
【设计细节】
- Light mode: bg
#fff, text#1c1c1c, secondary#7c7c7c。 - Dark mode (推荐): bg
#1a1a1b, text#d7dadc, secondary#818384, border#343536。 - 票数颜色: 正 =
#ff4500, 负 =#7193ff, 0 =#878a8c。 - 标题点击区可加微妙背景 hover。
- 严禁外链图片; 图片占位用 CSS 渐变 + 描述。
- 必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。
- 单文件 HTML; icon 内联 SVG (上下箭头、评论气泡、奖杯)。
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
소셜 미디어 광고와 검색 광고의 제목, 설명, 본문을 작성하고 표현을 반복해서 수정합니다. 광고 문구 후보를 준비하고 개선안을 검토할 때 활용합니다.
- 소셜 미디어 광고 제목을 작성합니다
- 검색 광고 설명을 준비합니다
- 광고 본문 표현을 검토합니다
nexu-io/open-design10.4만2026년 10월 23일 업데이트
어두운 배경과 세리프 글꼴로 패션 잡지 같은 세 페이지 동적 연출을 만듭니다. 글자 단계 표시와 장면 전환을 포함한 단일 HTML 파일로 출력합니다.
- 패션 잡지 분위기의 움직이는 소개 제작
- 짧은 이야기를 세 페이지로 표현
- 기존 브랜드 표현을 어두운 지면에 적용
nexu-io/open-design10.4만2026년 10월 23일 업데이트
브라우저에서 페이지를 살펴보고 클릭, 입력, 화면 캡처, 정보 추출을 수행합니다. OpenDesign의 로컬 미리보기를 중심으로 웹 앱의 동작과 품질을 확인합니다.
- OpenDesign 미리보기를 확인합니다
- 웹 앱의 클릭과 입력을 테스트합니다
- 페이지나 요소의 화면을 캡처합니다
nexu-io/open-design10.4만2026년 10월 23일 업데이트
AI 음악 앨범의 콘셉트 구상부터 가사 초안, 곡 순서 검토, 내보내기까지 다룹니다. 독립 제작 실험과 브랜드 음악 기획에 활용합니다.
- 독립 제작 앨범 기획
- 앨범 주제에 맞는 가사 초안 작성
- 수록곡 순서 검토
nexu-io/open-design10.4만2026년 10월 23일 업데이트
p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.
- 규칙을 바탕으로 포스터를 제작합니다
- 움직임이 느껴지는 정지 이미지를 만듭니다
- 예술 작품의 구도를 시험합니다
nexu-io/open-design10.4만2026년 10월 23일 업데이트