跳到正文
cccskills
免费在 GitHub 公开

social-reddit-card

Turn a supplied story, question, or joke into a Reddit-style post card for video overlays or social sharing. The single HTML file includes voting arrows, comment counts, post details, and a choice of light or dark styling.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享

集成工具Reddit
查看安装方法

适用场景

  • Adding a story card over a video
  • Sharing a question as a Reddit-style card
  • Presenting a joke in a social post format
  • Creating light and dark versions of a post card

包含的文件(3)

  • SKILL.md2.4 KB
  • example.html3.8 KB
  • example.md456 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

【模板: 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 (上下箭头、评论气泡、奖杯)。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

中文简介正在准备中。当前显示英语简介。

  • Formatting a long blog article
  • Preparing an essay or newsletter for publication
  • Laying out articles with quotations and code examples
nexu-io/html-anything92222026年10月13日 更新

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

中文简介正在准备中。当前显示英语简介。

  • Illustrating how a concept emerged
  • Creating visual learning materials about failed attempts
  • Presenting a concept’s history as a magazine feature
nexu-io/html-anything92222026年10月13日 更新

blog-post

免费

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

中文简介正在准备中。当前显示英语简介。

  • Designing a long-form blog page
  • Presenting an essay with magazine-style typography
  • Laying out a case study with figures and quotations
nexu-io/html-anything92222026年10月13日 更新

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

中文简介正在准备中。当前显示英语简介。

  • Sharing a quote with author attribution on X
  • Highlighting a data point in a social post
  • Creating branded cards for short insights
nexu-io/html-anything92222026年10月13日 更新

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

中文简介正在准备中。当前显示英语简介。

  • Turn practical tips into a series of social media cards
  • Explain one key idea per card for mobile readers
  • Prepare card layouts for social post screenshots
nexu-io/html-anything92222026年10月13日 更新

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

中文简介正在准备中。当前显示英语简介。

  • Comparing competitors to guide product decisions
  • Reviewing pricing and plan differences
  • Turning research notes into a strategy report
nexu-io/html-anything92222026年10月13日 更新

查看 nexu-io 的全部技能

报告此技能的问题