social-x-post-card
Produces a realistic X (formerly Twitter) post card. It includes engagement metrics like likes and views, being useful for videos or shareable images.
What it does
This tool creates an image of an X (formerly Twitter) post, complete with likes, shares, and views. It's great for video overlays or shareable image cards.
When to use it
- ✓When you want to turn a cool quote into a shareable image.
- ✓To create an X post look for a video.
- ✓To save an important idea as an easy-to-view image.
Example of what to ask your AI
“Create an X post with the text 'Learning to code opens many doors!' and 10K likes.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You tell me the text you want in the post, a username, and some metrics like likes and views. I'll generate an image that looks like a real X post.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill social-x-post-cardOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/social-x-post-card/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
【模板: 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(...)增加视频叠加的可读性。
FAQ
Can I choose the post's colors?
Yes, you can choose between a light or dark theme, mimicking X's own color schemes.
Will the image have the X logo?
Yes, the image will include the X logo and other details like the username and verified checkmark.
Can I add a photo to the post?
Yes, you can include an image placeholder in the post, but it won't be a real image you upload.
Details
Original description by the author
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #585
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
ios-icon-gen
Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.
affaan-m/ECC
algorithmic-art
Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.
anthropics/skills
canvas-design
Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.
anthropics/skills