How to install card-twitter
npx skills add https://github.com/nexu-io/open-design --skill card-twitterFull 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.
ui-ux-pro-max
|
web-design-guidelines
|
frontend-design
|
design-brief
|
pptx-html-fidelity-audit
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
hatch-pet
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.