AGENT SKILL

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

feimacode
feimacode/open-design-agent-kit

youtube-clipper

YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

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".

★ 1.1k
feimacode
feimacode/open-design-agent-kit

wpds

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

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.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

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.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。

★ 1.1k