[Template: X (Twitter) Post Card] [Intent] Render a piece of tweet content (or the user's standout quote) into a highly realistic X post card, for video overlays, Twitter image posts, knowledge archiving. Inspired by hyperframes x-post.
[Canvas] 1280×720 or 1080×1080, dark background #0f1419 or light background #ffffff (according to X theme); card centered, soft shadow.
[Card Structure]
- Outer frame: 16px border radius, 1px border
#2f3336(dark) /#eff3f4(light), 16px padding. - Top row: avatar (48×48 circle, using CSS gradient placeholder) + username + handle
@username+ verified blue check + time (mono, 12px, gray). - Body: 17-22px, font weight 400; links in X blue
#1d9bf0; hashtags same color; mentions same color; 0.6em spacing between paragraphs. - Optional: quote card (small embedded card, gray background, 12px border radius).
- Optional: 1 image (CSS gradient + description placeholder, no external image links allowed), 16:9 ratio, 12px border radius.
- Engagement row: 4 icons + numbers (reply / repost / quote / like), icons using inline SVG (X official style), gray, change color on hover.
- Single-line SVG X logo at top right.
- Views row: 👁️ + number (small text).
[Fonts]
- Latin:
Chirp(X's font) → fallbackInterorSegoe UI。 - Chinese:
Noto Sans SC/PingFang SC。 - Numbers: same as main font, no mono.
[Design Details]
- Light color scheme: bg
#fff, text#0f1419, secondary#536471, border#eff3f4, accent#1d9bf0。 - Dark color scheme (recommended, for video overlays): bg
#000, text#e7e9ea, secondary#71767b, border#2f3336, accent#1d9bf0。 - Number formatting: 1.2K / 4.5M (not raw 1234).
- Content must come from user input; do not fabricate tweets.
- If user input is data → automatically summarize into a single "standout quote" tweet (≤ 280 characters).
- Single-file HTML; inline SVG icons; no external image URLs.
- Optional: add a subtle radial highlight behind the card
radial-gradient(...)to improve readability for video overlays.