card-twitter
nexu-io/open-design
16:9 dark quote card template for Twitter posts with grid texture and gradient backgrounds.
What is card-twitter?
A Twitter share card skill for creating visually striking quote or data cards sized 1600×900 (16:9) that pair directly with posts. Use it to turn content into branded, screenshot-ready cards with high contrast and professional styling.
- Generate dark or light quote cards with hero text (2–3 lines, large semibold font)
- Add author attribution with avatar placeholder and handle at the bottom
- Include type labels (Insight, Data, or Quote) in the top-left corner
- Apply subtle textures (grid, noise, or dot patterns) across the card
- Add brand watermark in the bottom-right corner
- Export as screenshot-ready 1600×900 images for direct Twitter posting
How to install card-twitter
npx skills add https://github.com/nexu-io/open-design --skill card-twitterHow to use card-twitter
- 1.Install the skill using the provided npm command
- 2.Open the template in a web editor (HTML-based prototype)
- 3.Edit the hero quote text (limit to 2–3 lines)
- 4.Add author name, handle, and avatar placeholder
- 5.Select card type (Insight, Data, or Quote) from the label options
- 6.Choose dark or light theme based on content mood
- 7.Customize brand watermark if needed
- 8.Take a screenshot of the 1600×900 canvas
Use cases
- Create branded quote cards from customer testimonials or industry insights
- Design data visualization cards to accompany statistical posts
- Turn key takeaways from articles or reports into shareable social cards
- Build consistent visual identity for recurring quote or insight posts
- Generate high-contrast cards optimized for mobile and desktop Twitter feeds
- Marketing and social media teams
- Content creators and thought leaders
- Product or brand managers sharing insights
- Data analysts presenting findings on social media
- Anyone building a consistent visual presence on Twitter/X
card-twitter FAQ
The card is fixed at 1600×900 pixels (16:9 aspect ratio), optimized for Twitter and screenshot sharing.
Yes, you can choose between dark and light themes based on your content's mood and brand guidelines.
Keep it to 2–3 lines of impactful text (quote, insight, or key data point) in large, semibold font.
The template includes a watermark area in the bottom-right corner where you can place your logo or brand name.
The 16:9 aspect ratio works well for Twitter/X; for other platforms, you may need to adjust dimensions.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: card-twitter zh_name: "Twitter 分享卡" en_name: "Twitter Share Card" emoji: "🐦" description: "Twitter quote or data card designed to pair with a post." zh_description: "推特金句 / 数据卡, 适合配推文" en_description: "Twitter quote or data card designed to pair with a post." category: card scenario: marketing aspect_hint: "1600×900 (16:9)" tags: ["twitter", "x", "quote", "金句"] example_id: sample-twitter-quote example_name: "推特卡 · 金句" example_format: text example_tagline: "16:9 暗色金句卡, 截图直接配推文" example_desc: "高对比金句模板, 含 grid 网格 + 渐变光晕背景" 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 Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: Twitter 分享卡】
- 容器
w-[1600px] h-[900px], 暗色 / 亮色二选一根据内容情绪。 - 中央一句 hero 金句 (text-6xl, font-semibold, 限 2-3 行)。
- 下方作者署名 + 头像占位 + handle。
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
- 右下角品牌水印。
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
- 截图后可直接配推文发出, 视觉简洁有力。
Related skills
More from nexu-io/open-design and the wider catalog.
card-xiaohongshu
Create swipeable Xiaohongshu-style knowledge card carousels for social sharing.
color-expert
286K-word color science reference covering OKLCH/OKLAB, palettes, accessibility, and pigment theory.
competitive-ads-extractor
Extract and analyze competitors' ads from ad libraries to understand messaging and creative strategies.
copywriting
Write and rewrite marketing copy for landing pages, homepages, and ads.
creative-director
AI creative director with 20+ methodologies and Cannes-calibrated evaluation for campaign concepts and design direction.
d3-visualization
Teach agents to build D3.js charts and interactive data visualizations.