social-reddit-card

把用户提供的故事、提问或段子渲染成单文件 HTML 的拟真 Reddit 帖子卡，支持明暗模式、上下投票栏、评论数与徽章等元素，并自动补全子版块、用户名和票数；适合视频叠加或社媒故事分享。示例引用外部字体与样式资源，未提供 Reddit API 交互。

nexu-io

热度 0.00

最近更新 2026-10-19 02:44:20

分类：营销依赖：纯提示词应用场景：社交媒体 / UI 原型 / 模板

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add nexu-io/open-design/social-reddit-card

Metadata

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)。
主体区:
- 顶部 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 (上下箭头、评论气泡、奖杯)。