social-reddit-card
nexu-io/open-design
Realistic Reddit post card with vote rail for video overlays and social sharing.
What is social-reddit-card?
A template that renders stories, questions, or content as authentic-looking Reddit post cards with voting mechanics and comment counts. Use it to create video overlays, social media story graphics, or standalone shareable cards in light or dark mode.
- Renders content as a Reddit post card with subreddit, username, and timestamp metadata
- Displays interactive vote rail with up/down arrows and formatted vote counts (e.g., 12.3k)
- Shows comment count and action buttons (Awards, Share, More) at the bottom
- Supports light mode (white background) and dark mode (dark gray, recommended for video)
- Includes Reddit Snoo logo and customizable subreddit icon with CSS styling
- Accepts custom content, subreddit names, usernames, and vote/comment numbers without lorem ipsum
How to install social-reddit-card
npx skills add https://github.com/nexu-io/open-design --skill social-reddit-cardHow to use social-reddit-card
- 1.Install the skill using the provided npm command
- 2.Open the template in a web editor (HTML entry point)
- 3.Replace placeholder content with your story, question, or text
- 4.Set the subreddit name, username, and timestamp in the metadata section
- 5.Adjust vote count and comment count to reflect your desired numbers
- 6.Choose light or dark mode by toggling the background color (`#ffffff` or `#1a1a1b`)
- 7.Export or embed the card as a PNG/video overlay or standalone HTML graphic
Use cases
- Create Reddit-style post cards as overlays for video content or TikTok/Instagram stories
- Generate shareable social media graphics that mimic Reddit's visual design and interaction patterns
- Build marketing materials or meme templates with realistic Reddit aesthetics
- Design story-sharing interfaces that leverage Reddit's familiar post structure and voting UI
- Video creators and content marketers using Reddit-style graphics in overlays
- Social media managers creating shareable story content
- Designers building interfaces that mimic Reddit's visual language
- Teams producing meme or viral-content templates
social-reddit-card FAQ
1280×720 pixels for video overlays or 800×600 pixels for standalone card sharing. Both support transparent or dark backgrounds.
No, external images are not supported. Use CSS gradient placeholders with descriptions instead, or embed a single image as a CSS gradient background.
Vote counts automatically color based on value: positive votes are orange (#ff4500), negative votes are blue (#7193ff), and zero votes are gray (#878a8c).
Primary font is IBM Plex Sans (fallback to Inter) for English; Noto Sans SC for Chinese. Weights include 400, 500, and 700.
Yes, dark mode (#1a1a1b background) is recommended for video overlays and provides better visual contrast for social media graphics.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: social-reddit-card zh_name: "Reddit 帖子卡" en_name: "Reddit Post Card" emoji: "🔺" description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing." zh_description: "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享" en_description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing." category: card scenario: marketing aspect_hint: "1280×720 或 800×600" featured: 42 tags: ["reddit", "social", "card", "overlay", "story"] example_id: sample-social-reddit-card example_name: "Reddit 帖子 · r/programming" example_format: markdown example_tagline: "Reddit dark mode + vote rail" example_desc: "一条 AITA 风格故事 + 12.3k upvotes + 1.2k comments" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · reddit-post" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 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 (上下箭头、评论气泡、奖杯)。
Related skills
More from nexu-io/open-design and the wider catalog.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls for overlays and homepages.
social-x-post-card
Realistic X post card with engagement metrics for video overlays and shareable images.
sora
Generate and manage short video clips using OpenAI's Sora API for cinematic content.
speech
Generate spoken audio from text using OpenAI's text-to-speech API with multiple voices.
stitch-design-taste
Generate premium, anti-generic DESIGN.md files for Google Stitch with strict typography, color calibration, and semantic design rules.
stitch-loop
Iterative design-to-code feedback loop for tightening visual fidelity between brief and built UI.