{"id":"70582498-f9a0-4474-a134-0d46916dce45","shortId":"HQUMM9","kind":"skill","title":"social-reddit-card","tagline":"拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享","description":"【模板: Reddit 帖子卡】\n【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。\n\n【画布】1280×720 (视频叠加) 或 800×600 (单卡分享); 背景透明或暗色 `#0b1416`。\n\n【卡片结构】\n- 外框: 圆角 16px, bg 白 `#ffffff` (light) 或 `#1a1a1b` (dark, 推荐 video overlay), border 1px `#edeff1` / `#343536`。\n- 左侧 **vote rail** (40-56px 宽):\n  - 上箭头 ▲ (16px, `#878a8c`, hover 变橙 `#ff4500`)。\n  - 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用 `12.3k` 格式。\n  - 下箭头 ▼ (hover 变蓝 `#7193ff`)。\n- 主体区:\n  - 顶部 meta row: 子版块图标 (CSS 圆形 + 字母) + `r/subreddit` (粗) + `· Posted by u/username · 3h` (小字灰)。\n  - **标题** (Inter / IBM Plex Sans, 22-28px, weight 500, dark text)。\n  - 内容: 16px body 或 引用块或 1 张图 (CSS 渐变占位)。\n  - 底部 action row: 💬 `1.2k Comments` · 🏆 Awards · ⤴️ Share · ⋯ icon。\n- 顶部右上角 Reddit Snoo logo (内联 SVG, 橙色 `#ff4500`)。\n\n【字体】\n- 主: `IBM Plex Sans` → fallback `Inter`, weight 400/500/700。\n- 数字: 同主字体。\n- 中文: `Noto Sans SC`。\n\n【设计细节】\n- Light mode: bg `#fff`, text `#1c1c1c`, secondary `#7c7c7c`。\n- Dark mode (推荐): bg `#1a1a1b`, text `#d7dadc`, secondary `#818384`, border `#343536`。\n- 票数颜色: 正 = `#ff4500`, 负 = `#7193ff`, 0 = `#878a8c`。\n- 标题点击区可加微妙背景 hover。\n- 严禁外链图片; 图片占位用 CSS 渐变 + 描述。\n- 必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。\n- 单文件 HTML; icon 内联 SVG (上下箭头、评论气泡、奖杯)。","tags":["social","reddit","card","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-social-reddit-card","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/social-reddit-card","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,251 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:18.205Z","embedding":null,"createdAt":"2026-05-15T12:50:34.719Z","updatedAt":"2026-05-18T18:50:18.205Z","lastSeenAt":"2026-05-18T18:50:18.205Z","tsv":"'-28':111 '-56':62 '0':78,183 '0b1416':39 '1':122 '1.2':129 '12.3':83 '1280':31 '16px':43,66,118 '17px':73 '1a1a1b':49,171 '1c1c1c':164 '1px':55 '22':110 '343536':57,177 '3h':103 '40':61 '400/500/700':151 '500':114 '600':36 '700':75 '7193ff':89,182 '720':32 '7c7c7c':166 '800':35 '818384':175 '878a8c':67,184 'action':127 'award':132 'bg':44,161,170 'bodi':119 'border':54,176 'card':4 'comment':131 'css':95,124,189 'd7dadc':173 'dark':50,115,167 'edeff1':56 'fallback':148 'ff4500':70,142,180 'fff':162 'ffffff':46 'hover':68,87,186 'html':198 'hyperfram':26 'ibm':107,145 'icon':134,199 'inspir':24 'inter':72,106,149 'k':84,130 'light':47,159 'logo':138 'meta':92 'mode':160,168 'noto':155 'overlay':53 'plex':108,146 'post':29,100 'px':63,112 'r/subreddit':98 'rail':60 'reddit':3,6,13,20,28,136 'reddit-post':27 'row':93,128 'san':109,147,156 'sc':157 'secondari':165,174 'share':133 'skill' 'skill-social-reddit-card' 'snoo':137 'social':2 'social-reddit-card':1 'source-nexu-io' 'subreddit':194 'svg':140,201 'text':116,163,172 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'u/username':102 'usernam':195 'video':52 'vote':59 'weight':74,113,150 '上下投票':8 '上下箭头':202 '上箭头':65 '下箭头':86 '严禁外链图片':187 '中文':154 '主':144 '主体区':90 '内容':117 '内联':139,200 '单卡分享':37 '单文件':197 '卡片结构':40 '变橙':69 '变蓝':88 '同主字体':153 '图片占位用':188 '圆形':96 '圆角':42 '外框':41 '大数字用':82 '奖杯':204 '子版块图标':94 '字体':143 '字母':97 '宽':64 '小字灰':104 '居中':76 '左侧':58 '帖子卡':7,14 '帖子卡片':21 '底部':126 '引用块或':121 '张图':123 '必须用用户提供的内容':192 '意图':15 '或':34,48,120 '把一段故事':16 '拟真':5 '推荐':51,169 '描述':191 '提问':17 '故事分享':11 '数字':152 '标题':105 '标题点击区可加微妙背景':185 '格式':85 '模板':12 '橙色':141 '正':179 '正橙':80 '段子':18 '渐变':190 '渐变占位':125 '渲染成':19 '灰':79 '用于视频叠加':22 '画布':30 '白':45 '社媒故事分享':23 '票数':71,196 '票数颜色':178 '粗':99 '背景透明或暗色':38 '自动生成合理的':193 '视频叠加':33 '设计细节':158 '评论数':9 '评论气泡':203 '负':181 '负蓝':81 '适合视频叠加':10 '顶部':91 '顶部右上角':135 '颜色':77","prices":[{"id":"4647e96a-36fc-4f37-9cda-1b4d0c51f18b","listingId":"70582498-f9a0-4474-a134-0d46916dce45","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:34.719Z"}],"sources":[{"listingId":"70582498-f9a0-4474-a134-0d46916dce45","source":"github","sourceId":"nexu-io/open-design/social-reddit-card","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/social-reddit-card","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:34.719Z","lastSeenAt":"2026-05-18T18:50:18.205Z"}],"details":{"listingId":"70582498-f9a0-4474-a134-0d46916dce45","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"social-reddit-card","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"5d5e3895ae6a7b4ee200039d89a1bf9328c1ec79","skill_md_path":"skills/social-reddit-card/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/social-reddit-card"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"social-reddit-card","description":"拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/social-reddit-card"},"updatedAt":"2026-05-18T18:50:18.205Z"}}