Social X Post Card

Name: Social X Post Card
Author: nexu-io

nexu-io/open-design

1.6k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

social-x-post-card is an open-design skill for X or Twitter post card marketing visuals.

About

The social-x-post-card skill from open-design renders X and Twitter post card marketing visuals with bilingual zh and en naming and emoji metadata. It follows open-design prototype web desktop marketing patterns with HTML preview entries and real-content example prompts avoiding lorem ipsum. Agents preserve template visual signatures while filling post copy, handles, and engagement elements suited for screenshot sharing on X. Use when developers need styled social post card mockups from the open-design library.

X Twitter post card open-design template with bilingual metadata.
Marketing prototype web desktop scenario and HTML preview.
Real content example prompts forbid lorem ipsum placeholders.
Screenshot-ready social post visual layout.
Part of nexu-io open-design social card collection.

Social X Post Card by the numbers

1,607 all-time installs (skills.sh)
+123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #346 of 1,881 Marketing & SEO skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

social-x-post-card capabilities & compatibility

Capabilities: x post card template rendering · bilingual template metadata · real content enforcement · html preview marketing prototype integration
Use cases: marketing · copywriting

From the docs

What social-x-post-card says it does

X / Twitter Post Card

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill social-x-post-card

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/social-x-post-card.svg)](https://skillselion.com/skills/nexu-io/open-design/social-x-post-card)

Installs	1.6k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

How do I create an X post card visual with open-design template styling?

Create X or Twitter post card visuals using open-design template specs for social marketing.

Who is it for?

Marketers creating X or Twitter post mockups using open-design templates.

Skip if: Skip for posting APIs or scheduling tools without visual card generation.

When should I use this skill?

User requests X post card, Twitter post visual, or open-design social post template.

What you get

Styled X post card with real copy following open-design visual signatures ready to screenshot.

X/Twitter post card images with engagement metrics

By the numbers

Supports 1280×720 and 1080×1080 output aspect ratios

Files

SKILL.mdMarkdownGitHub ↗

【模板: 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(...) 增加视频叠加的可读性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>X Post Card · Markdown is Dead</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  body { font-family: 'Inter','Noto Sans SC',system-ui,sans-serif; background: radial-gradient(circle at 50% 30%, #1a1f2e 0%, #050507 70%); color: #e7e9ea; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-12">
  <article class="w-[640px] rounded-2xl p-5" style="background:#000;border:1px solid #2f3336;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)">
    <!-- header -->
    <header class="flex items-start gap-3">
      <div class="w-12 h-12 rounded-full shrink-0" style="background:linear-gradient(135deg,#ff7e5f 0%,#feb47b 100%)"></div>
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-1 flex-wrap">
          <span class="font-bold">AlchainHust</span>
          <svg viewBox="0 0 24 24" class="w-4 h-4" fill="#1d9bf0"><path d="M22.5 12.5c0-1.6-.9-3-2.2-3.8.4-.2.7-.5 1-.8.4-.6.6-1.3.6-2 0-1.7-1.4-3-3-3-.5 0-1 .1-1.4.3-.4-1.3-1.6-2.2-3-2.2-1.7 0-3 1.3-3 3 0 .3 0 .5.1.8C9.1.7 7.7 0 6 0 4 0 2.5 1.5 2.5 3.5c0 .9.3 1.7.9 2.3-.5.2-1 .5-1.4.9C.5 7.5 0 8.7 0 10c0 1.6.9 3 2.2 3.7-.7.7-1.2 1.7-1.2 2.8 0 2 1.5 3.5 3.5 3.5.8 0 1.6-.3 2.2-.7.5 1.4 1.7 2.4 3.3 2.4 1.4 0 2.6-.9 3-2.1.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3 0-.5-.1-.9-.3-1.3 1.6-.2 2.8-1.6 2.8-3.3 0-1.1-.5-2-1.3-2.6.8-.6 1.3-1.6 1.3-2.7zm-12.6 4.8l-3.6-3.6 1.6-1.6 2 2 4.6-4.6 1.6 1.6-6.2 6.2z"/></svg>
          <span class="text-[#71767b] text-[14px]">@AlchainHust</span>
          <span class="text-[#71767b]">·</span>
          <span class="text-[#71767b] text-[14px]">14h</span>
          <div class="ml-auto text-[#71767b]"><svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></div>
        </div>
        <p class="mt-2 text-[17px] leading-snug">Claude Code 团队不再用 markdown 写文档了, <span style="color:#1d9bf0">全部用 HTML</span>。</p>
        <p class="mt-3 text-[17px] leading-snug">理由很简单 —— markdown 是给作者爽的, HTML 是给读者爽的。<span style="color:#1d9bf0">最终形态是 HTML</span>, markdown 只是写作中的中间过程。</p>
        <p class="mt-3 text-[15px] text-[#71767b]">2026/05/11 · X for Web</p>
      </div>
    </header>
    <!-- engagement -->
    <div class="mt-4 flex items-center justify-between text-[#71767b] text-[13px] max-w-[440px]">
      <button class="flex items-center gap-1.5 hover:text-[#1d9bf0]">
        <svg viewBox="0 0 24 24" class="w-[18px] h-[18px]" fill="currentColor"><path d="M1.75 4c-.97 0-1.75.78-1.75 1.75v12.5c0 .97.78 1.75 1.75 1.75h13.5c.97 0 1.75-.78 1.75-1.75V14h-1.5v4.25H1.5V5.75h17V8h1.5V5.75c0-.97-.78-1.75-1.75-1.75H1.75z"/><path d="M11.6 9.4l1.7 2.3-1.7 2.3h2.7l1.7-2.3-1.7-2.3z"/></svg>
        <span>482</span>
      </button>
      <button class="flex items-center gap-1.5 hover:text-[#00ba7c]">
        <svg viewBox="0 0 24 24" class="w-[18px] h-[18px]" fill="currentColor"><path d="M4.5 3.88l4.4 4.4H5v8.83H1V19h6v-2.5H8V8.28zm15 8.13h-1V21H10v-2.5h7V12h1l-4 .5-4-4.5zm-9 6.5h-1V8H6V6h6v12.51z"/></svg>
        <span>1.2K</span>
      </button>
      <button class="flex items-center gap-1.5 hover:text-[#f91880]">
        <svg viewBox="0 0 24 24" class="w-[18px] h-[18px]" fill="currentColor"><path d="M16.7 5c-2 0-3.5 1.6-4.7 3-1.2-1.4-2.7-3-4.7-3C4.4 5 2 7.4 2 10.4c0 2.3 1 4.6 4 7.4 1.8 1.7 4 3.4 4.7 3.9.4.3.9.3 1.3 0 .8-.5 3-2.3 4.7-3.9 3-2.8 4-5 4-7.4 0-3-2.4-5.4-4-5.4z"/></svg>
        <span style="color:#f91880">12.3K</span>
      </button>
      <button class="flex items-center gap-1.5 hover:text-[#1d9bf0]">
        <svg viewBox="0 0 24 24" class="w-[18px] h-[18px]" fill="currentColor"><path d="M8 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
        <span>2.1M</span>
      </button>
      <button class="hover:text-[#1d9bf0]"><svg viewBox="0 0 24 24" class="w-[18px] h-[18px]" fill="currentColor"><path d="M12 2.5l-4 4h3v7h2v-7h3l-4-4z"/><path d="M3 14v6h18v-6h-2v4H5v-4z"/></svg></button>
    </div>
  </article>
</body>
</html>