Xhs Cover Skill for Claude
生成小红书封面图（HTML+CSS → Playwright 截图）
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/chenxiachan/xhs-claude-skills --skill xhs-coverThe instruction itself
11 sections, as written by the author为用户生成一张小红书风格封面图。
输入
用户提供的内容: $ARGUMENTS
解析输入：
- 标题文案（必须）：从输入中提取核心文案，不超过 30 字
- 风格（可选）：
--style 风格名，默认自动选择
可用风格
1. morandi（莫兰迪）
温柔高级，低饱和度，适合知识分享、方法论、生活方式
背景: linear-gradient(155deg, #f0e6d8, #e8dcd0, #d6cfc8)
主色: #c45c4a（暖红）
副色: #5b5080（灰紫）
辅助: #4a7a6a（灰绿）
文字: #3d3328（深棕）
标签背景: rgba(255,255,255,0.55)
2. academic（学术蓝）
冷静专业，适合论文解读、科研分享、技术分析
背景: linear-gradient(155deg, #e4eaf2, #d8e2ee, #cdd8e8)
主色: #2563eb（学术蓝）
副色: #7c3aed（紫）
辅助: #0891b2（青）
文字: #1e293b（深蓝灰）
标签背景: rgba(255,255,255,0.6)
3. dark（暗夜科技）
硬核科技感，适合 AI/编程/开源项目、技术深度内容
背景: linear-gradient(155deg, #1a1a2e, #16213e, #0f3460)
主色: #a78bfa（亮紫）
副色: #38bdf8（天蓝）
辅助: #34d399（绿）
文字: #f1f5f9（近白）
标签背景: rgba(255,255,255,0.08), border: rgba(255,255,255,0.2)
4. mint（薄荷清新）
清爽自然，适合工具推荐、效率方法、学习笔记
背景: linear-gradient(155deg, #ecfdf5, #e0f7ed, #d1f0e4)
主色: #059669（翠绿）
副色: #7c3aed（紫）
辅助: #d97706（琥珀）
文字: #1a3a2a（深绿灰）
标签背景: rgba(255,255,255,0.6)
5. sunset（日落暖橘）
温暖有活力，适合个人感悟、项目发布、里程碑分享
背景: linear-gradient(155deg, #fef3e2, #fde8d0, #fcdcc4)
主色: #ea580c（橘红）
副色: #7c3aed（紫）
辅助: #0891b2（青）
文字: #431407（深棕）
标签背景: rgba(255,255,255,0.55)
6. bw（极简黑白）
高级克制，适合观点输出、争议话题、深度思考
背景: linear-gradient(155deg, #f5f5f5, #ebebeb, #e0e0e0)
主色: #18181b（纯黑）
副色: #52525b（灰）
辅助: #a1a1aa（浅灰）
文字: #18181b（纯黑）
标签背景: rgba(255,255,255,0.7), border: #d4d4d8
生成流程
步骤 1：设计文案
从用户输入提取：
- 主标题（最大字，1 行，核心概念/产品名/关键词）
- 副标题（次大字，1-2 行，核心洞察或 tagline）
- 标签（3 个功能/关键词标签，每个 2-4 字）
- 角标（左上小字，身份标签如 OPEN SOURCE / 论文解读 / 工具推荐）
- 底部（小字，3 个关键词用 · 分隔）
步骤 2：选择风格
- 如果用户指定了
--style，使用对应风格 - 否则根据内容自动选择：
- 论文/科研 → academic
- AI/编程/开源 → dark 或 morandi
- 工具/效率 → mint
- 个人感悟/发布 → sunset
- 观点/思考 → bw
步骤 3：生成 HTML
写入 /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>
<!-- 按上面的结构填充内容 -->
</body>
</html>
关键设计约束：
- 3:4 比例（1080×1440px）
- 文字占画面 70% 以上
- 主标题尽量一行放下（必要时缩小字号或拆行）
- 2-3 级文字层级：主标题 > 副标题 > 标签/底部
- 所有中文用 font-weight: 700-900
- 颜色最多用 3 种（主+副+辅助），不杂乱
步骤 4：截图
用 Playwright 截图保存：
from 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="<输出路径>", full_page=False)
browser.close()
默认保存到 ~/Documents/Obsidian Vault/xhs/img/cover-{简短标识}.png。
步骤 5：展示
用 Read 工具展示生成的图片给用户，询问是否需要调整。
Other skills for the same job
different authors, same section of the catalogue
Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.
| Shared workflow for browser-based review of user-visible frontend changes in Langfuse. Use when a change affects UI behavior, layout, styling, navigation, or browser-visible regressions and should be checked with the Playwright MCP server before signoff.
Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "my site is slow", "Core Web Vitals", "HTTP/2 or HTTP/3", "resource hints", "network latency", "render blocking", "TCP/TLS optimization", "service worker", "Cache-Control or caching strategy", or "critical rendering path". Also trigger when diagnosing slow page loads, optimizing time to first byte, choosing between WebSocket and SSE, or reducing bundle sizes. For UI visual performance, see refactoring-ui. For font loading, see web-typography.
| 将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。 支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、 社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。 当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。
> Adds automated accessibility (a11y) testing to test suites on TestMu AI cloud by enabling WCAG scans through driver capabilities. Framework-agnostic, works with Selenium, Playwright, and Cypress. Use when user mentions "accessibility", "accessibility testing", "a11y scan", "WCAG compliance", "accessibility audit LambdaTest", "is my page accessible".
Accessibility testing toolkit using Selenium WebDriver 4+ with Java 21+ and axe-core engine. Use when asked to validate WCAG 2.2 AA compliance, scan pages or components for a11y violations, test keyboard navigation, audit color contrast, check ARIA semantics, generate accessibility reports, filter axe rules, debug screen reader issues, or implement POUR principles (perceivable, operable, understandable, robust).
Run browser inspection for websites and apps. Use after building or changing frontend work to open the rendered site, inspect console and network errors, verify layout and interactions, test links/forms/media, capture screenshots, check responsive behavior, and perform the second visual polish pass before final delivery.
Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "page load speed", "Core Web Vitals", "HTTP/2", "resource hints", "network latency", or "render blocking". Covers TCP/TLS optimization, caching strategies, WebSocket/SSE, and protocol selection. For UI visual performance, see refactoring-ui. For font loading, see web-typography.
How to use it
Take chenxiachan/xhs-cover from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.