card-twitter
Twitter quote or data card designed to pair with a post.
- License 许可
- MIT
- 最近更新
- 2026-11-14
- Stars
- ★ 1.1k
- Forks
- 104
01 前言 Front Matter
- od
- { "mode": "prototype", "preview": { "type": "html", "entry": "index.html", "reload": "debounce-100" }, "surface": "web", "platform": "desktop", "scenario": "marketing", "upstream": "https://github.com/nexu-io/html-anything", "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 和占位图片。" } }
- name
- card-twitter
- tags
- [ "twitter", "x", "quote", "金句" ]
- emoji
- 🐦
- en_name
- Twitter Share Card
- zh_name
- Twitter 分享卡
- category
- card
- scenario
- marketing
- example_id
- sample-twitter-quote
- aspect_hint
- 1600×900 (16:9)
- description
- Twitter quote or data card designed to pair with a post.
- example_desc
- 高对比金句模板, 含 grid 网格 + 渐变光晕背景
- example_name
- 推特卡 · 金句
- en_description
- Twitter quote or data card designed to pair with a post.
- example_format
- text
- zh_description
- 推特金句 / 数据卡, 适合配推文
- example_tagline
- 16:9 暗色金句卡, 截图直接配推文
03 SKILL.md 正文
【模板: Twitter 分享卡】
- 容器
w-[1600px] h-[900px], 暗色 / 亮色二选一根据内容情绪。 - 中央一句 hero 金句 (text-6xl, font-semibold, 限 2-3 行)。
- 下方作者署名 + 头像占位 + handle。
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
- 右下角品牌水印。
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
- 截图后可直接配推文发出, 视觉简洁有力。
04 同仓库更多 Skills
youtube-clipper
YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.
writing-guidelines
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".
wpds
WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
weread-year-in-review-video-template
WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。