social-x-post-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: X (Twitter) 帖子卡】【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。

【画布】1280×720 或 1080×1080, 暗背景

#0f1419

或亮背景

#ffffff

(按 X 主题); 卡片居中, 阴影柔和。

【卡片结构】

外框: 圆角 16px, 1px border
```
#2f3336
```
(dark) /
```
#eff3f4
```
(light), 内边距 16px。
顶部 row: 头像 (48×48 圆形, 用 CSS gradient 占位) + 用户名 + handle
```
@username
```
+ verified 蓝勾 + 时间 (mono, 12px, 灰)。
正文: 17-22px, 字重 400; 链接用 X 蓝
```
#1d9bf0
```
; hashtag 同色; mention 同色; 段落间空 0.6em。
可选: 引用卡 (小卡内嵌, 灰底, 圆角 12px)。
可选: 1 张图 (CSS 渐变 + 描述占位, 不能外链图片), 比例 16:9, 圆角 12px。
互动 row: 4 个 icon + 数字 (回复 / 转推 / 引用 / 点赞), icon 用 inline SVG (X 官方风格), 灰色, hover 时变色。
顶部右上 X logo 单线 SVG。
浏览量 row: 👁️ + 数字 (小字)。

【字体】

西文:
```
Chirp
```
(X 的字体) → fallback
```
Inter
```
或
```
Segoe UI
```
。
中文:
```
Noto Sans SC
```
/
```
PingFang SC
```
。
数字: 同主字体, 不用 mono。

【设计细节】

配色 light: bg
```
#fff
```
, text
```
#0f1419
```
, secondary
```
#536471
```
, border
```
#eff3f4
```
, accent
```
#1d9bf0
```
。
配色 dark (推荐, 视频叠加用): bg
```
#000
```
, text
```
#e7e9ea
```
, secondary
```
#71767b
```
, border
```
#2f3336
```
, accent
```
#1d9bf0
```
。
数字格式化: 1.2K / 4.5M (不要原始 1234)。
内容必须来自用户输入, 不能编造推文。
若用户输入是数据 → 自动总结成一句"金句"推文 (≤ 280 字符)。
单文件 HTML; icon 内联 SVG; 不要任何外部图片 URL。
可选: 卡片背后加微妙径向高光
```
radial-gradient(...)
```
增加视频叠加的可读性。

【Template: X (Twitter) Post Card】【Purpose】Render a piece of tweet content (or a user's golden quote) into a highly realistic X post card, which can be used for video overlay, Twitter image posting, and knowledge accumulation. Inspired by hyperframes x-post.

【Canvas】1280×720 or 1080×1080, dark background

#0f1419

or light background

#ffffff

(following X's theme); card centered with soft shadow.

【Card Structure】

Outer Frame: 16px rounded corners, 1px border
```
#2f3336
```
(dark) /
```
#eff3f4
```
(light), 16px padding.
Top Row: Avatar (48×48 circle, placeholder with CSS gradient) + Username + handle
```
@username
```
+ verified blue checkmark + time (mono, 12px, gray).
Main Text: 17-22px, font weight 400; links in X blue
```
#1d9bf0
```
; hashtags in the same color; mentions in the same color; 0.6em spacing between paragraphs.
Optional: Quote Card (small embedded card, gray background, 12px rounded corners).
Optional: 1 image (CSS gradient + description placeholder, no external image links allowed), 16:9 aspect ratio, 12px rounded corners.
Interaction Row: 4 icons + numbers (Reply / Repost / Quote / Like), icons using inline SVG (X official style), gray, change color on hover.
Top-right X logo single-line SVG.
Views Row: 👁️ + number (small font).

【Fonts】

Western:
```
Chirp
```
(X's font) → fallback
```
Inter
```
or
```
Segoe 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 overlay): bg
```
#000
```
, text
```
#e7e9ea
```
, secondary
```
#71767b
```
, border
```
#2f3336
```
, accent
```
#1d9bf0
```
.
Number Formatting: 1.2K / 4.5M (do not use raw numbers like 1234).
Content must come from user input, do not fabricate tweets.
If user input is data → automatically summarize into a "golden quote" tweet (≤ 280 characters).
Single-file HTML; icons as inline SVG; no external image URLs allowed.
Optional: Add a subtle radial highlight
```
radial-gradient(...)
```
behind the card to improve readability for video overlay.