{"id":"bd6eded5-adf6-4754-9c40-9a5b42cb3200","shortId":"86tFYE","kind":"skill","title":"social-x-post-card","tagline":"拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享","description":"【模板: X (Twitter) 帖子卡】\n【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。\n\n【画布】1280×720 或 1080×1080, 暗背景 `#0f1419` 或亮背景 `#ffffff` (按 X 主题); 卡片居中, 阴影柔和。\n\n【卡片结构】\n- 外框: 圆角 16px, 1px border `#2f3336` (dark) / `#eff3f4` (light), 内边距 16px。\n- 顶部 row: 头像 (48×48 圆形, 用 CSS gradient 占位) + 用户名 + handle `@username` + verified 蓝勾 + 时间 (mono, 12px, 灰)。\n- 正文: 17-22px, 字重 400; 链接用 X 蓝 `#1d9bf0`; hashtag 同色; mention 同色; 段落间空 0.6em。\n- 可选: 引用卡 (小卡内嵌, 灰底, 圆角 12px)。\n- 可选: 1 张图 (CSS 渐变 + 描述占位, 不能外链图片), 比例 16:9, 圆角 12px。\n- 互动 row: 4 个 icon + 数字 (回复 / 转推 / 引用 / 点赞), icon 用 inline SVG (X 官方风格), 灰色, hover 时变色。\n- 顶部右上 X logo 单线 SVG。\n- 浏览量 row: 👁️ + 数字 (小字)。\n\n【字体】\n- 西文: `Chirp` (X 的字体) → fallback `Inter` 或 `Segoe UI`。\n- 中文: `Noto Sans SC` / `PingFang SC`。\n- 数字: 同主字体, 不用 mono。\n\n【设计细节】\n- 配色 light: bg `#fff`, text `#0f1419`, secondary `#536471`, border `#eff3f4`, accent `#1d9bf0`。\n- 配色 dark (推荐, 视频叠加用): bg `#000`, text `#e7e9ea`, secondary `#71767b`, border `#2f3336`, accent `#1d9bf0`。\n- 数字格式化: 1.2K / 4.5M (不要原始 1234)。\n- 内容必须来自用户输入, 不能编造推文。\n- 若用户输入是数据 → 自动总结成一句\"金句\"推文 (≤ 280 字符)。\n- 单文件 HTML; icon 内联 SVG; 不要任何外部图片 URL。\n- 可选: 卡片背后加微妙径向高光 `radial-gradient(...)` 增加视频叠加的可读性。","tags":["social","post","card","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-social-x-post-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-x-post-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,194 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.391Z","embedding":null,"createdAt":"2026-05-15T12:50:34.917Z","updatedAt":"2026-05-18T18:50:18.391Z","lastSeenAt":"2026-05-18T18:50:18.391Z","tsv":"'-22':79 '0.6':92 '000':178 '0f1419':38,166 '1':101 '1.2':188 '1080':35,36 '1234':193 '1280':32 '12px':75,99,111 '16':108 '16px':49,57 '17':78 '1d9bf0':86,172,186 '1px':50 '280':200 '2f3336':52,184 '4':114 '4.5':190 '400':82 '48':61,62 '536471':168 '71767b':182 '720':33 '9':109 'accent':171,185 'bg':163,177 'border':51,169,183 'card':5 'chirp':142 'css':65,103 'dark':53,174 'e7e9ea':180 'eff3f4':54,170 'em':93 'fallback':145 'fff':164 'ffffff':40 'gradient':66,213 'handl':69 'hashtag':87 'hover':129 'html':203 'hyperfram':27 'icon':116,122,204 'inlin':124 'inspir':25 'inter':146 'k':189 'light':55,162 'likes/reposts/views':10 'logo':133 'm':191 'mention':89 'mono':74,159 'noto':151 'pingfang':154 'post':4,30 'px':80 'radial':212 'radial-gradi':211 'row':59,113,137 'san':152 'sc':153,155 'secondari':167,181 'sego':148 'skill' 'skill-social-x-post-card' 'social':2 'social-x-post-card':1 'source-nexu-io' 'svg':125,135,206 'text':165,179 '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' 'twitter':14 'ui':149 'url':208 'usernam':70 'verifi':71 'x':3,7,13,20,29,42,84,126,132,143 'x-post':28 '不用':158 '不能外链图片':106 '不能编造推文':195 '不要任何外部图片':207 '不要原始':192 '个':115 '中文':150 '主题':43 '互动':112 '互动数据':9 '内容必须来自用户输入':194 '内联':205 '内边距':56 '单文件':202 '单线':134 '占位':67 '卡片居中':44 '卡片结构':46 '卡片背后加微妙径向高光':210 '可选':94,100,209 '同主字体':157 '同色':88,90 '回复':118 '圆形':63 '圆角':48,98,110 '增加视频叠加的可读性':214 '外框':47 '头像':60 '字体':140 '字符':201 '字重':81 '官方风格':127 '小卡内嵌':96 '小字':139 '帖子卡':15 '帖子卡片':21 '引用':120 '引用卡':95 '张图':102 '意图':16 '或':34,147 '或亮背景':39 '或用户的金句':18 '把一段推文内容':17 '拟真':6 '按':41 '推文':199 '推文卡片':8 '推特发图':23 '推荐':175 '描述占位':105 '数字':117,138,156 '数字格式化':187 '时变色':130 '时间':73 '暗背景':37 '模板':12 '正文':77 '段落间空':91 '比例':107 '浏览量':136 '渐变':104 '渲染成一张拟真度极高的':19 '灰':76 '灰底':97 '灰色':128 '点赞':121 '用':64,123 '用于视频叠加':22 '用户名':68 '画布':31 '的字体':144 '知识沉淀':24 '自动总结成一句':197 '若用户输入是数据':196 '蓝':85 '蓝勾':72 '西文':141 '视频叠加用':176 '设计细节':160 '转推':119 '适配视频叠加或图卡分享':11 '配色':161,173 '金句':198 '链接用':83 '阴影柔和':45 '顶部':58 '顶部右上':131","prices":[{"id":"f673992e-c1e1-416a-bf81-e3cbefae09b7","listingId":"bd6eded5-adf6-4754-9c40-9a5b42cb3200","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.917Z"}],"sources":[{"listingId":"bd6eded5-adf6-4754-9c40-9a5b42cb3200","source":"github","sourceId":"nexu-io/open-design/social-x-post-card","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/social-x-post-card","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:34.917Z","lastSeenAt":"2026-05-18T18:50:18.391Z"}],"details":{"listingId":"bd6eded5-adf6-4754-9c40-9a5b42cb3200","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"social-x-post-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":"855d4db874217a81a0b46e36874063ff427cd7b0","skill_md_path":"skills/social-x-post-card/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/social-x-post-card"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"social-x-post-card","description":"拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/social-x-post-card"},"updatedAt":"2026-05-18T18:50:18.391Z"}}