social-reddit-card

Original：🇨🇳 Chinese

Translated

Realistic Reddit Post Card + Upvote/Downvote + Comment Count, Suitable for Video Overlay / Story Sharing

3installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design social-reddit-card

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: Reddit Post Card】【Purpose】Render a story / question / joke into a Reddit post card for video overlay and social media story sharing. Inspired by hyperframes reddit-post.

【Canvas】1280×720 (for video overlay) or 800×600 (for single card sharing); background transparent or dark

#0b1416

.

【Card Structure】

Outer frame: 16px rounded corners, bg white
```
#ffffff
```
(light) or
```
#1a1a1b
```
(dark, recommended for video overlay), border 1px
```
#edeff1
```
/
```
#343536
```
.
Left vote rail (40-56px wide):
- Up arrow ▲ (16px,
```
#878a8c
```
  , turns orange
```
#ff4500
```
  on hover).
- Vote count (Inter, 17px, weight 700, centered, color: gray for 0 / orange for positive / blue for negative); use
```
12.3k
```
  format for large numbers.
- Down arrow ▼ (turns blue
```
#7193ff
```
  on hover).
Main section:
- Top meta row: Subreddit icon (CSS circle + letter) +
```
r/subreddit
```
  (bold) +
```
· Posted by u/username · 3h
```
  (small gray text).
- Title (Inter / IBM Plex Sans, 22-28px, weight 500, dark text).
- Content: 16px body text or quote block or 1 image (CSS gradient placeholder).
- Bottom action row: 💬
```
1.2k Comments
```
  · 🏆 Awards · ⤴️ Share · ⋯ icon.
Top-right corner Reddit Snoo logo (inline SVG, orange
```
#ff4500
```
).

【Fonts】

Primary:
```
IBM Plex Sans
```
→ fallback
```
Inter
```
, weight 400/500/700.
Numbers: Same as primary font.
Chinese:
```
Noto Sans SC
```
.

【Design Details】

Light mode: bg
```
#fff
```
, text
```
#1c1c1c
```
, secondary
```
#7c7c7c
```
.
Dark mode (recommended): bg
```
#1a1a1b
```
, text
```
#d7dadc
```
, secondary
```
#818384
```
, border
```
#343536
```
.
Vote count color: Positive =
```
#ff4500
```
, Negative =
```
#7193ff
```
, Zero =
```
#878a8c
```
.
Add subtle background hover effect to title click area.
Strictly no external linked images; use CSS gradient + description for image placeholders.
Must use user-provided content; automatically generate reasonable subreddit / username / vote count.
Single-file HTML; icons as inline SVG (up/down arrows, comment bubble, trophy).

social-reddit-card

NPX Install

Tags

SKILL.md Content (Chinese)