Card Twitter

Name: Card Twitter
Author: nexu-io

nexu-io/open-design

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

card-twitter is an agent skill that renders Twitter quote or data share cards at 1600x900 using the open-design card template.

About

The card-twitter skill from open-design builds Twitter quote and data cards sized 1600 by 900 pixels for pairing with posts. It uses a marketing card template with a central hero quote limited to two or three lines at text-6xl weight, author signature with avatar placeholder and handle, a top-left type tag such as Insight or Data, and a bottom-right brand watermark. Visual treatment includes subtle grid, noise, or dot texture on dark or light backgrounds chosen by content mood. The open-design metadata defines prototype web desktop marketing scenario with HTML preview entry index.html and example prompts in English and zh-CN. Agents preserve the template visual signature, use real content and data, and avoid lorem ipsum or placeholder images. Use when developers need shareable X or Twitter visual cards from existing copy or metrics.

Fixed 1600x900 16:9 card layout optimized for Twitter and X screenshots.
Hero quote, author block, type tag, brand watermark, and textured background pattern.
Example prompts enforce real content and forbid lorem ipsum or placeholder images.
Supports dark or light theme selection based on content mood.
Open-design preview uses HTML index.html with debounce reload.

Card Twitter by the numbers

1,623 all-time installs (skills.sh)
+123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #343 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

card-twitter capabilities & compatibility

Capabilities: 1600x900 twitter card layout · dark or light theme selection · hero quote and author signature block · grid or noise texture backgrounds · real content example prompt enforcement
Use cases: marketing · copywriting · image generation

From the docs

What card-twitter says it does

Twitter quote or data card designed to pair with a post.

SKILL.md

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

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/card-twitter.svg)](https://skillselion.com/skills/nexu-io/open-design/card-twitter)

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 turn my quote or metric into a polished Twitter card image ready to post?

Turn content into a 1600x900 Twitter quote or data card with dark or light styling ready to screenshot for posts.

Who is it for?

Developers and marketers creating X or Twitter visual cards from real quotes or data points.

Skip if: Skip for long-form blog layouts or non-Twitter social formats without the card template.

When should I use this skill?

User asks for a Twitter share card, X quote card, or 16:9 social card from content.

What you get

A styled 16:9 card with hero quote, author block, tags, watermark, and screenshot-ready layout.

HTML share card
16:9 quote or data layout

By the numbers

Targets 1600×900 (16:9) Twitter/X card dimensions

Files

SKILL.mdMarkdownGitHub ↗

【模板: Twitter 分享卡】

容器 w-[1600px] h-[900px], 暗色 / 亮色二选一根据内容情绪。
中央一句 hero 金句 (text-6xl, font-semibold, 限 2-3 行)。
下方作者署名 + 头像占位 + handle。
左上角小标签 (类型: "Insight" / "Data" / "Quote")。
右下角品牌水印。
整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
截图后可直接配推文发出, 视觉简洁有力。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Twitter 分享卡 · 金句</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Noto+Serif+SC:wght@500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; min-height:100vh; display:grid; place-items:center; padding:24px; }
  .card { width:1600px; max-width:96vw; aspect-ratio:16/9; border-radius:24px; overflow:hidden; position:relative;
    background:#15140f; color:#fafaf7; padding:80px; display:flex; flex-direction:column; justify-content:space-between;
    box-shadow:0 40px 100px -20px rgba(0,0,0,0.7);
  }
  .grid-pattern { position:absolute; inset:0; opacity:0.06; background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px); background-size:48px 48px; }
  .glow { position:absolute; width:680px; height:680px; border-radius:50%; filter:blur(140px); opacity:0.55; }
  .g1 { background:#c96442; top:-180px; left:-180px; }
  .g2 { background:#e9b94a; bottom:-260px; right:-200px; }
  .header { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
  .tag { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(233,185,74,0.14); color:#e9b94a; font-size:13px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; border:1px solid rgba(233,185,74,0.25); }
  .quote { font-family:'Noto Serif SC',serif; font-size:96px; line-height:1.18; font-weight:700; letter-spacing:-0.02em; max-width:24ch; position:relative; z-index:2; margin-top:auto; margin-bottom:auto; }
  .quote .em { font-style:italic; color:#e9b94a; }
  .quote::before { content:"" "" "; font-family:Georgia,serif; font-size:140px; color:#e9b94a; position:absolute; top:-60px; left:-60px; opacity:0.3; line-height:1; }
  .footer { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
  .author { display:flex; align-items:center; gap:16px; }
  .avatar { width:56px; height:56px; border-radius:999px; background:linear-gradient(135deg,#c96442,#e9b94a); display:grid; place-items:center; font-family:Georgia,serif; font-style:italic; font-size:28px; font-weight:700; color:#fff; }
  .brand { display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:13px; opacity:0.55; }
  .brand .glyph { width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,0.4); display:grid; place-items:center; font-family:Georgia,serif; font-style:italic; font-size:13px; font-weight:600; }
</style>
</head>
<body>
<div class="card">
  <div class="grid-pattern"></div>
  <div class="glow g1"></div>
  <div class="glow g2"></div>

  <div class="header">
    <div class="tag">✦ Quote</div>
    <div class="brand"><div class="glyph">H</div>html-anything</div>
  </div>

  <div class="quote">
    Markdown 是给<span class="em">作者</span>爽的,<br/>
    HTML 是给<span class="em">读者</span>爽的。
  </div>

  <div class="footer">
    <div class="author">
      <div class="avatar">T</div>
      <div>
        <div style="font-size:18px; font-weight:600">Tom Pan</div>
        <div style="font-size:14px; opacity:0.55">@tompan · 一个把所有内部文档换成 HTML 的工程师</div>
      </div>
    </div>
    <div style="font-size:13px; opacity:0.45; font-family:'JetBrains Mono',monospace">2026.05</div>
  </div>
</div>
</body>
</html>