本文へ移動
cccskills
無料GitHub で公開

social-reddit-card

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

nexu-io/html-anything
インストール方法を見る

含まれるファイル（3）

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

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

article-magazine

無料

Substack / Medium 高级感长文排版, 适合公众号、博客发布

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

article-sketchnote-editorial

無料

把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

blog-post

無料

杂志感长文, 含 masthead、hero、figures、pull quote、作者署名

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

card-twitter

無料

推特金句 / 数据卡, 适合配推文

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

card-xiaohongshu

無料

小红书风格知识卡片, 多张联排可滑动浏览

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

competitive-teardown

無料

定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/html-anything9,0962026年9月15日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する