Menü
生成小红书风格封面图（1080×1440px，3:4 比例）。HTML+CSS → Playwright 截图。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | xhs-cover |
| description | 生成小红书风格封面图（1080×1440px，3:4 比例）。HTML+CSS → Playwright 截图。 |
| metadata | {"hermes":{"tags":["xiaohongshu","cover","design","screenshot","html"]}} |
输入标题文案，生成小红书风格封面图（1080×1440px，3:4 比例）。
用户要求生成小红书封面图/封面设计时加载此 skill。
pip3 install playwright && playwright install chromium| 风格 | 适用场景 | 主色 | 背景 |
|---|---|---|---|
| morandi | 知识分享、方法论 | #c45c4a（暖红） | 低饱和米色渐变 |
| academic | 论文解读、技术分析 | #2563eb（学术蓝） | 冷灰蓝渐变 |
| dark | AI/编程/开源 | #a78bfa（亮紫） | 深蓝渐变 |
| mint | 工具推荐、效率方法 | #059669（翠绿） | 薄荷绿渐变 |
| sunset | 个人感悟、里程碑 | #ea580c（橘红） | 暖橘渐变 |
| bw | 观点输出、深度思考 | #18181b（纯黑） | 灰白渐变 |
从用户文案中提取：
写入 /tmp/xhs-cover.html，模板结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 1080px; height: 1440px; overflow: hidden;
font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; }
.canvas {
width: 1080px; height: 1440px;
background: {风格背景};
display: flex; flex-direction: column; justify-content: center;
padding: 60px 70px; gap: 36px; position: relative;
}
.badge { display: inline-flex; align-items: center; gap: 10px;
background: {主色 alpha 0.12}; border: 1.5px solid {主色 alpha 0.2};
border-radius: 10px; padding: 12px 24px; font-size: 28px;
font-weight: 700; color: {主色}; letter-spacing: 3px; width: fit-content; }
.title-row { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
.title-main { font-size: 120-130px; font-weight: 900; color: {主色}; letter-spacing: -2px; }
.title-secondary { font-size: 110-120px; font-weight: 900; color: {副色}; }
.divider { width: 80px; height: 5px;
background: linear-gradient(90deg, {主色}, {副色});
border-radius: 3px; margin: 10px 0; }
.tagline { font-size: 76-82px; font-weight: 800; color: {文字色};
letter-spacing: 8px; line-height: 1.4; }
.tagline .accent { color: {主色 或副色 淡化}; }
.chip { background: {标签背景}; border-radius: 14px; padding: 18px 32px;
font-size: 34px; font-weight: 700; letter-spacing: 2px; }
.footer { font-size: 30px; color: {文字色 淡化}; font-weight: 600; letter-spacing: 2px; }
</style>
</head>
<body>
<div class="canvas">
<div class="badge">{角标}</div>
<div class="title-row">
<span class="title-main">{主标题}</span>
<span class="title-secondary">{副标题}</span>
</div>
<div class="divider"></div>
<div class="tagline">{副标题/核心洞察}</div>
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
<span class="chip">{标签1}</span>
<span class="chip">{标签2}</span>
<span class="chip">{标签3}</span>
</div>
<div class="footer">{关键词1} · {关键词2} · {关键词3}</div>
</div>
</body>
</html>
根据选定风格替换颜色变量：
{主色} → 风格主色{副色} → 主色的互补色或淡化版{文字色} → 深色背景用白色，浅色背景用深灰{风格背景} → 风格对应的渐变背景{标签背景} → 主色 alpha 0.08-0.15from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1080, "height": 1440})
page.goto("file:///tmp/xhs-cover.html")
page.wait_for_timeout(500)
page.screenshot(path="/Users/ylanlll/Desktop/cover.png", full_page=False)
browser.close()
展示图片给用户，询问是否调整（颜色、字号、布局、文案）。
| 场景 | 处理方式 |
|---|---|
| Playwright 未安装 | 提示 pip3 install playwright && playwright install chromium |
| 标题过长溢出 | 自动缩小字号或截断 |
| 截图失败 | 报错并提示检查 Playwright chromium 安装 |