关于 social-x-post-card
这是一项设计 Skill，可将用户提供的内容排版为拟真的 X 帖子卡片，并输出单文件 HTML。它规定了布局、主题和字体，也支持引用卡片及图片占位，适用于视频叠加和社媒分享。
主要功能
- 01X 风格帖子卡片布局
- 02浅色与深色主题
- 03可选引用卡和图片占位
- 04内联 SVG 图标
- 05输出单文件 HTML
适用场景
- 01制作视频叠加用帖子画面
- 02将金句制作为图片分享
- 03把用户提供的数据转成短帖
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/social-x-post-card确认已加载。
附带文件example.htmlexample.md
详细介绍
来自项目 README【模板: X (Twitter) 帖子卡】 【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。
【画布】1280×720 或 1080×1080, 暗背景 #0f1419 或亮背景 #ffffff (按 X 主题); 卡片居中, 阴影柔和。
【卡片结构】
- 外框: 圆角 16px, 1px border
#2f3336(dark) /#eff3f4(light), 内边距 16px。 - 顶部 row: 头像 (48×48 圆形, 用 CSS gradient 占位) + 用户名 + handle
@username+ verified 蓝勾 + 时间 (mono, 12px, 灰)。 - 正文: 17-22px, 字重 400; 链接用 X 蓝
#1d9bf0; hashtag 同色; mention 同色; 段落间空 0.6em。 - 可选: 引用卡 (小卡内嵌, 灰底, 圆角 12px)。
- 可选: 1 张图 (CSS 渐变 + 描述占位, 不能外链图片), 比例 16:9, 圆角 12px。
- 互动 row: 4 个 icon + 数字 (回复 / 转推 / 引用 / 点赞), icon 用 inline SVG (X 官方风格), 灰色, hover 时变色。
- 顶部右上 X logo 单线 SVG。
- 浏览量 row: 👁️ + 数字 (小字)。
【字体】
- 西文:
Chirp(X 的字体) → fallbackInter或Segoe UI。 - 中文:
Noto Sans SC/PingFang SC。 - 数字: 同主字体, 不用 mono。
【设计细节】
- 配色 light: bg
#fff, text#0f1419, secondary#536471, border#eff3f4, accent#1d9bf0。 - 配色 dark (推荐, 视频叠加用): bg
#000, text#e7e9ea, secondary#71767b, border#2f3336, accent#1d9bf0。 - 数字格式化: 1.2K / 4.5M (不要原始 1234)。
- 内容必须来自用户输入, 不能编造推文。
- 若用户输入是数据 → 自动总结成一句"金句"推文 (≤ 280 字符)。
- 单文件 HTML; icon 内联 SVG; 不要任何外部图片 URL。
- 可选: 卡片背后加微妙径向高光
radial-gradient(...)增加视频叠加的可读性。
评论
支持 Markdown