mcpField
S
social-x-post-card

social-x-post-card

github.com/nexu-io创意与媒体9.3k40 次安装2 周前更新
代码仓库

关于 social-x-post-card

social-x-post-card 是用于将用户提供的推文或金句制作成 X 帖子卡片的设计技能，适合视频叠加、社交媒体配图和内容整理。它提供明暗主题、互动信息与可选引用卡或图片占位。

主要功能

  1. 01生成拟真的 X 帖子卡片
  2. 02支持明暗主题与两种画布尺寸
  3. 03呈现作者资料、互动数和浏览量
  4. 04可选引用卡与渐变图片占位
  5. 05输出单文件 HTML 和内联 SVG

适用场景

  1. 01制作视频叠加用的推文卡片
  2. 02将金句整理为社交媒体配图
  3. 03把用户提供的数据概括为短推文
  4. 04将推文内容保存为视觉素材

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/html-anything --skill social-x-post-card

安装后在 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 的字体) → fallback Inter 或 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