Claude MarketplacesSubmit
nexu-io avatar

Social Reddit Card

nexu-io/open-design

This generates a pixel-perfect Reddit post card with the full vote rail, comment count, and subreddit chrome. The template ships with both light and dark modes, though dark is recommended for video overlays. It handles the small details: vote arrows that change color on hover, proper number formatting (12.3k style), and the metadata row with subreddit icon, username, and timestamp. Everything is inline SVG and single-file HTML, so no external dependencies. Built for video editors who need to drop a realistic Reddit screenshot into a YouTube essay or Instagram story without screencapping the actual site. Inspired by the hyperframes reddit-post component.

skills.sh installs
2.7K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill social-reddit-card --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 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)。
  • 主体区:
    • 顶部 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。
  • 顶部右上角 Reddit Snoo logo (内联 SVG, 橙色 #ff4500)。

【字体】

  • 主: IBM Plex Sans → fallback Inter, weight 400/500/700。
  • 数字: 同主字体。
  • 中文: Noto Sans SC。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Category
Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1freshtechbro avatarreact-spring-physicsfreshtechbro/claudedesignskillsPhysics-based animation library combining React Spring (spring dynamics, gesture integration, 60fps animations) and Popmotion (low-level composable animation ut2.6Kskills.sh installs
2freshtechbro avatarscroll-reveal-librariesfreshtechbro/claudedesignskillsSimple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites req2.6Kskills.sh installs
3k-dense-ai avatarscientific-visualizationk-dense-ai/scientific-agent-skillsCreate and audit truthful, accessible, publication-ready scientific figures with Matplotlib, Seaborn, or Plotly. Use for figure design, multi-panel layouts, unc2.6Kskills.sh installs
4cursor avatarcontrol-uicursor/pluginsBuild or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots,2.5Kskills.sh installs
5WordPress avatarwp-patternsWordPress/agent-skillsGenerate technically correct, design-distinctive WordPress block patterns. Use when creating block patterns, starter page patterns, template patterns, template 2.5Kskills.sh installs
6rendercv avatarrendercvrendercv/rendercv-skillCreate professional CVs and resumes with perfect typography using RenderCV (v2.8). Users write content in YAML, and RenderCV produces publication-quality PDFs v2.5Kskills.sh installs