[Template: X (Twitter) Post Card] [Intent] Render a piece of tweet content (or the user's memorable quote) into a highly realistic X post card, for video overlays, Twitter image posting, and 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 rounded corners, 1px border
#2f3336(dark) /#eff3f4(light), 16px padding. - Top row: avatar (48×48 circle, use CSS gradient placeholder) + username + handle
@username+ verified blue checkmark + time (mono, 12px, gray). - Body: 17-22px, font weight 400; links in X blue
#1d9bf0; hashtags same color; mentions same color; 0.6em space between paragraphs. - Optional: quote card (small embedded card, gray background, 12px rounded corners).
- Optional: 1 image (CSS gradient + description placeholder, no external image links), 16:9 ratio, 12px rounded corners.
- Interaction row: 4 icons + numbers (reply / retweet / quote / like), icons use inline SVG (official X style), gray, change color on hover.
- Top-right X logo single-line SVG.
- Views row: 👁️ + number (small text).
[Fonts]
- Western:
Chirp(X's font) → fallbackInterorSegoe UI。 - Chinese:
Noto Sans SC/PingFang SC。 - Numbers: same as main font, do not use 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 (do not use raw 1234).
- Content must come from user input; do not fabricate tweets.
- If the user input is data → automatically summarize it into a one-sentence "memorable quote" tweet (≤ 280 characters).
- Single-file HTML; icons inline SVG; do not use any external image URLs.
- Optional: add a subtle radial highlight behind the card
radial-gradient(...)to increase readability for video overlays.