social-x-post-card
nexu-io/open-design
Realistic X post card with engagement metrics for video overlays and shareable images.
What is social-x-post-card?
A template that renders tweet content into a high-fidelity X post card with likes, reposts, and view counts. Use it to create video overlays, shareable image cards, or knowledge-sharing graphics that look like authentic X posts.
- Renders tweet content as a realistic X post card with verified badge, timestamps, and user info
- Displays engagement metrics (likes, reposts, replies, quotes) with formatted numbers (1.2K, 4.5M)
- Supports both dark mode (recommended for video overlays) and light mode themes
- Includes optional quoted tweet cards and image placeholders with CSS gradients
- Generates single-file HTML output with inline SVG icons—no external image URLs or dependencies
- Auto-summarizes data inputs into tweet-length content (≤280 characters)
How to install social-x-post-card
npx skills add https://github.com/nexu-io/open-design --skill social-x-post-cardHow to use social-x-post-card
- 1.Install the skill using the provided npm command
- 2.Open the template in a web browser or design tool
- 3.Input your tweet content, username, handle, and engagement metrics (likes, reposts, replies, quotes)
- 4.Choose dark or light theme based on your use case (dark recommended for video overlays)
- 5.Customize optional elements like verified badge, quoted tweets, or image placeholders
- 6.Export the rendered HTML as an image or use directly in video editing software
Use cases
- Create video overlay graphics with realistic X post cards for social media content
- Generate shareable image cards of tweets or quotes for knowledge sharing
- Build marketing materials that showcase user testimonials or brand messaging as authentic-looking posts
- Produce visual assets for presentations or reports featuring tweet-style content
- Design template-based graphics for batch content creation without manual design work
- Content creators and marketers building social media assets
- Video producers adding realistic social proof overlays to content
- Teams creating shareable quote or testimonial graphics
- Designers prototyping social media marketing campaigns
- Anyone needing template-based X post visualizations
social-x-post-card FAQ
No. The template uses CSS gradients and inline SVG only—no external image URLs are supported to keep it self-contained and fast.
You can show replies, reposts, quotes, and likes with auto-formatted numbers (e.g., 1.2K, 4.5M). View counts are also supported.
Yes. The template includes fonts for both Western text (Chirp/Inter/Segoe UI) and Chinese (Noto Sans SC/PingFang SC).
Yes. The dark theme is optimized for video overlays with subtle radial gradients for better readability over video backgrounds.
The template supports 1280×720 (landscape) or 1080×1080 (square) aspect ratios.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: social-x-post-card zh_name: "X (Twitter) 帖子卡" en_name: "X / Twitter Post Card" emoji: "𝕏" description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards." zh_description: "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享" en_description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards." category: card scenario: marketing aspect_hint: "1280×720 或 1080×1080" featured: 44 tags: ["twitter", "x", "social", "card", "overlay"] example_id: sample-social-x-post-card example_name: "X 帖子卡 · AlchainHust 金句" example_format: markdown example_tagline: "X dark mode + 互动数据" example_desc: "一条金句推文 + 12.3K likes / 1.2K reposts + 蓝勾" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · x-post" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 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(...)增加视频叠加的可读性。
Related skills
More from nexu-io/open-design and the wider catalog.
sora
Generate and manage short video clips using OpenAI's Sora API for cinematic content.
speech
Generate spoken audio from text using OpenAI's text-to-speech API with multiple voices.
stitch-design-taste
Generate premium, anti-generic DESIGN.md files for Google Stitch with strict typography, color calibration, and semantic design rules.
stitch-loop
Iterative design-to-code feedback loop for tightening visual fidelity between brief and built UI.
swiftui-design
SwiftUI design system with anti-slop rules, brand protocols, and multi-dimensional review for iOS frontends.
swiss-creative-mode-template
Premium Swiss/editorial HTML template with bold typography, interactive navigation, and theme switching.