example.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Twitter 分享卡 · 金句</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Noto+Serif+SC:wght@500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; min-height:100vh; display:grid; place-items:center; padding:24px; }
.card { width:1600px; max-width:96vw; aspect-ratio:16/9; border-radius:24px; overflow:hidden; position:relative;
background:#15140f; color:#fafaf7; padding:80px; display:flex; flex-direction:column; justify-content:space-between;
box-shadow:0 40px 100px -20px rgba(0,0,0,0.7);
}
.grid-pattern { position:absolute; inset:0; opacity:0.06; background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px); background-size:48px 48px; }
.glow { position:absolute; width:680px; height:680px; border-radius:50%; filter:blur(140px); opacity:0.55; }
.g1 { background:#c96442; top:-180px; left:-180px; }
.g2 { background:#e9b94a; bottom:-260px; right:-200px; }
.header { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.tag { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(233,185,74,0.14); color:#e9b94a; font-size:13px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; border:1px solid rgba(233,185,74,0.25); }
.quote { font-family:'Noto Serif SC',serif; font-size:96px; line-height:1.18; font-weight:700; letter-spacing:-0.02em; max-width:24ch; position:relative; z-index:2; margin-top:auto; margin-bottom:auto; }
.quote .em { font-style:italic; color:#e9b94a; }
.quote::before { content:"" "" "; font-family:Georgia,serif; font-size:140px; color:#e9b94a; position:absolute; top:-60px; left:-60px; opacity:0.3; line-height:1; }
.footer { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.author { display:flex; align-items:center; gap:16px; }
.avatar { width:56px; height:56px; border-radius:999px; background:linear-gradient(135deg,#c96442,#e9b94a); display:grid; place-items:center; font-family:Georgia,serif; font-style:italic; font-size:28px; font-weight:700; color:#fff; }
.brand { display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:13px; opacity:0.55; }
.brand .glyph { width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,0.4); display:grid; place-items:center; font-family:Georgia,serif; font-style:italic; font-size:13px; font-weight:600; }
</style>
</head>
<body>
<div class="card">
<div class="grid-pattern"></div>
<div class="glow g1"></div>
<div class="glow g2"></div>
<div class="header">
<div class="tag">✦ Quote</div>
<div class="brand"><div class="glyph">H</div>html-anything</div>
</div>
<div class="quote">
Markdown 是给<span class="em">作者</span>爽的,<br/>
HTML 是给<span class="em">读者</span>爽的。
</div>
<div class="footer">
<div class="author">
<div class="avatar">T</div>
<div>
<div style="font-size:18px; font-weight:600">Tom Pan</div>
<div style="font-size:14px; opacity:0.55">@tompan · 一个把所有内部文档换成 HTML 的工程师</div>
</div>
</div>
<div style="font-size:13px; opacity:0.45; font-family:'JetBrains Mono',monospace">2026.05</div>
</div>
</div>
</body>
</html>SKILL.md
---
name: card-twitter
zh_name: "Twitter 分享卡"
en_name: "Twitter Share Card"
emoji: "🐦"
description: "Twitter quote or data card designed to pair with a post."
zh_description: "推特金句 / 数据卡, 适合配推文"
en_description: "Twitter quote or data card designed to pair with a post."
category: card
scenario: marketing
aspect_hint: "1600×900 (16:9)"
tags: ["twitter", "x", "quote", "金句"]
example_id: sample-twitter-quote
example_name: "推特卡 · 金句"
example_format: text
example_tagline: "16:9 暗色金句卡, 截图直接配推文"
example_desc: "高对比金句模板, 含 grid 网格 + 渐变光晕背景"
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 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 和占位图片。"
---
【模板: Twitter 分享卡】
- 容器 `w-[1600px] h-[900px]`, 暗色 / 亮色二选一根据内容情绪。
- 中央一句 hero 金句 (text-6xl, font-semibold, 限 2-3 行)。
- 下方作者署名 + 头像占位 + handle。
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
- 右下角品牌水印。
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
- 截图后可直接配推文发出, 视觉简洁有力。