Menu
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.
Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".
Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.
| name | social-x-post-card |
| zh_name | X (Twitter) 帖子卡 |
| en_name | X / Twitter Post Card |
| emoji | 𝕏 |
| description | Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards. |
| zh_description | 拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享 |
| en_description | Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards. |
| category | card |
| scenario | marketing |
| aspect_hint | 1280×720 或 1080×1080 |
| featured | 44 |
| tags | ["twitter","x","social","card","overlay"] |
| example_id | sample-social-x-post-card |
| example_name | X 帖子卡 · AlchainHust 金句 |
| example_format | markdown |
| example_tagline | X dark mode + 互动数据 |
| example_desc | 一条金句推文 + 12.3K likes / 1.2K reposts + 蓝勾 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · x-post |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"marketing","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: X (Twitter) 帖子卡】 【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。
【画布】1280×720 或 1080×1080, 暗背景 #0f1419 或亮背景 #ffffff (按 X 主题); 卡片居中, 阴影柔和。
【卡片结构】
#2f3336 (dark) / #eff3f4 (light), 内边距 16px。@username + verified 蓝勾 + 时间 (mono, 12px, 灰)。#1d9bf0; hashtag 同色; mention 同色; 段落间空 0.6em。【字体】
Chirp (X 的字体) → fallback Inter 或 Segoe UI。Noto Sans SC / PingFang SC。【设计细节】
#fff, text #0f1419, secondary #536471, border #eff3f4, accent #1d9bf0。#000, text #e7e9ea, secondary #71767b, border #2f3336, accent #1d9bf0。radial-gradient(...) 增加视频叠加的可读性。