Social Reddit Card
Turn real copy into a dark-mode Reddit-style post card with votes and comment counts for video overlays or social story shares.
Overview
Social Reddit Card is an agent skill for the Launch phase that formats your real copy into a realistic Reddit post card with vote rail and comment count for overlays and story sharing.
Install
npx skills add https://github.com/nexu-io/open-design --skill social-reddit-cardWhat is this skill?
- Realistic Reddit post card with upvote/downvote rail and comment count
- 1280×720 or 800×600 aspect presets for video overlay and story formats
- HTML prototype surface with debounced reload for live preview while editing
- Marketing scenario template tied to open-design / html-anything catalog workflow
- Example prompt enforces real content—no lorem ipsum or placeholder images
- Default aspect hints: 1280×720 or 800×600
- Example metrics: 12.3k upvotes and 1.2k comments in catalog sample
Adoption & trust: 658 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a strong story or launch angle but no quick way to make it look like a native Reddit post for video or social without hand-building UI chrome.
Who is it for?
Indie creators repurposing testimonials, AMA threads, or dev-community narratives into visual hooks for Shorts, reels, or landing-page social proof.
Skip if: Builders who need live Reddit API posting, moderation tooling, or production in-app feed components—this is a static marketing template only.
When should I use this skill?
Use the Reddit Post Card template to turn finalized content into a realistic Reddit post card with vote rail and comment count for video overlay or story share, preserving the template visual signature and real data.
What do I get? / Deliverables
You get a previewable HTML Reddit post card sized for overlay or share, ready to capture or embed in launch distribution assets.
- index.html Reddit post card matching the open-design template
- Previewable marketing asset sized for overlay or static share
Recommended Skills
Journey fit
Launch is where solo builders package narratives for channels; this skill outputs share-ready social visuals rather than in-app UI. Distribution covers platform-native story formats and promo assets you post or embed outside the product.
How it compares
A branded HTML card template, not a Reddit API integration or analytics MCP server.
Common Questions / FAQ
Who is social-reddit-card for?
Solo and indie builders doing launch and growth content who want Reddit-native-looking cards without designing vote UI from scratch.
When should I use social-reddit-card?
Use it at Launch when preparing distribution creatives (video overlays, story frames) or at Grow when turning community-style stories into shareable visuals—after your copy and metrics are real, not placeholder.
Is social-reddit-card safe to install?
Review the Security Audits panel on this Prism page and inspect the upstream open-design repo before running generated HTML in untrusted environments.
SKILL.md
READMESKILL.md - Social Reddit Card
【模板: 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`。 【设计细节】 - 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 (上下箭头、评论气泡、奖杯)。