Social X Post Card
Turn real copy into a shareable X post card with likes, reposts, and views for video overlays or social images.
Overview
Social X Post Card is an agent skill for the Launch phase that renders realistic X post cards with engagement metrics for overlays and shareable images.
Install
npx skills add https://github.com/nexu-io/open-design --skill social-x-post-cardWhat is this skill?
- Realistic X dark-mode post card with engagement metrics (likes, reposts, views)
- Aspect hints for 1280×720 or 1080×1080 video overlays and square shares
- Open Design / html-anything prototype flow with HTML preview and debounced reload
- Example-driven prompt to swap lorem ipsum for real content and verified-style badges
- Tagged for twitter, x, social, card, and overlay marketing scenarios
- 1280×720 or 1080×1080 aspect hints
Adoption & trust: 661 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have strong copy but no fast way to generate on-brand X cards with believable likes, reposts, and views for video or feeds.
Who is it for?
Indie founders preparing launch threads, clip overlays, or quote graphics with real metrics styling.
Skip if: Teams that need live X API posting, scheduling, or analytics pipelines instead of static card generation.
When should I use this skill?
Use the X / Twitter Post Card template to turn content into a realistic X post card with engagement metrics for video overlays or shareable image cards.
What do I get? / Deliverables
You get a production-style X post card HTML/visual from your content, ready to export or embed in marketing assets.
- HTML-based X post card prototype
- Shareable or overlay-ready post card visual
Recommended Skills
Journey fit
Canonical shelf is Launch because the skill outputs distribution-ready social assets, not product code. Distribution fits shareable X cards and overlay graphics aimed at getting posts noticed on social channels.
How it compares
Use as a visual card template skill, not a social media management or MCP posting integration.
Common Questions / FAQ
Who is social-x-post-card for?
Solo builders and marketers who publish on X and want realistic post-card visuals for videos, landing promos, or share images without manual design each time.
When should I use social-x-post-card?
Use it during Launch distribution when turning tweets into overlays, during Grow content pushes for quote cards, or anytime you need a shareable X-styled graphic before a campaign goes live.
Is social-x-post-card safe to install?
Review the Security Audits panel on this Prism page and the upstream html-anything repo before running generated HTML in production or exposing user data in previews.
SKILL.md
READMESKILL.md - Social X Post Card
【模板: 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(...)` 增加视频叠加的可读性。