xhs-cover

Name: xhs-cover
Author: chenxiachan

50installs34forks

How to install xhs-cover?

chenxiachan/xhs-claude-skills/xhs-cover

$npx -y skills add chenxiachan/xhs-claude-skills --skill xhs-cover

Installs into the current project.

Summary

生成小红书封面图（HTML+CSS → Playwright 截图）

Files · 1

View on GitHub

SKILL.md

1	为用户生成一张小红书风格封面图。
2
3	## 输入
4	用户提供的内容: $ARGUMENTS
5
6	解析输入：
7	- 标题文案（必须）：从输入中提取核心文案，不超过 30 字
8	- 风格（可选）：`--style 风格名`，默认自动选择
9
10	## 可用风格
11
12	### 1. morandi（莫兰迪）
13	温柔高级，低饱和度，适合知识分享、方法论、生活方式
14	```
15	背景: linear-gradient(155deg, #f0e6d8, #e8dcd0, #d6cfc8)
16	主色: #c45c4a（暖红）
17	副色: #5b5080（灰紫）
18	辅助: #4a7a6a（灰绿）
19	文字: #3d3328（深棕）
20	标签背景: rgba(255,255,255,0.55)
21	```
22
23	### 2. academic（学术蓝）
24	冷静专业，适合论文解读、科研分享、技术分析
25	```
26	背景: linear-gradient(155deg, #e4eaf2, #d8e2ee, #cdd8e8)
27	主色: #2563eb（学术蓝）
28	副色: #7c3aed（紫）
29	辅助: #0891b2（青）
30	文字: #1e293b（深蓝灰）
31	标签背景: rgba(255,255,255,0.6)
32	```
33
34	### 3. dark（暗夜科技）
35	硬核科技感，适合 AI/编程/开源项目、技术深度内容
36	```
37	背景: linear-gradient(155deg, #1a1a2e, #16213e, #0f3460)
38	主色: #a78bfa（亮紫）
39	副色: #38bdf8（天蓝）
40	辅助: #34d399（绿）
41	文字: #f1f5f9（近白）
42	标签背景: rgba(255,255,255,0.08), border: rgba(255,255,255,0.2)
43	```
44
45	### 4. mint（薄荷清新）
46	清爽自然，适合工具推荐、效率方法、学习笔记
47	```
48	背景: linear-gradient(155deg, #ecfdf5, #e0f7ed, #d1f0e4)
49	主色: #059669（翠绿）
50	副色: #7c3aed（紫）
51	辅助: #d97706（琥珀）
52	文字: #1a3a2a（深绿灰）
53	标签背景: rgba(255,255,255,0.6)
54	```
55
56	### 5. sunset（日落暖橘）
57	温暖有活力，适合个人感悟、项目发布、里程碑分享
58	```
59	背景: linear-gradient(155deg, #fef3e2, #fde8d0, #fcdcc4)
60	主色: #ea580c（橘红）
61	副色: #7c3aed（紫）
62	辅助: #0891b2（青）
63	文字: #431407（深棕）
64	标签背景: rgba(255,255,255,0.55)
65	```
66
67	### 6. bw（极简黑白）
68	高级克制，适合观点输出、争议话题、深度思考
69	```
70	背景: linear-gradient(155deg, #f5f5f5, #ebebeb, #e0e0e0)
71	主色: #18181b（纯黑）
72	副色: #52525b（灰）
73	辅助: #a1a1aa（浅灰）
74	文字: #18181b（纯黑）
75	标签背景: rgba(255,255,255,0.7), border: #d4d4d8
76	```
77
78	## 生成流程
79
80	### 步骤 1：设计文案
81	从用户输入提取：
82	- 主标题（最大字，1 行，核心概念/产品名/关键词）
83	- 副标题（次大字，1-2 行，核心洞察或 tagline）
84	- 标签（3 个功能/关键词标签，每个 2-4 字）
85	- 角标（左上小字，身份标签如 OPEN SOURCE / 论文解读 / 工具推荐）
86	- 底部（小字，3 个关键词用 · 分隔）
87
88	### 步骤 2：选择风格
89	- 如果用户指定了 `--style`，使用对应风格
90	- 否则根据内容自动选择：
91	- 论文/科研 → academic
92	- AI/编程/开源 → dark 或 morandi
93	- 工具/效率 → mint
94	- 个人感悟/发布 → sunset
95	- 观点/思考 → bw
96
97	### 步骤 3：生成 HTML
98	写入 `/tmp/xhs-cover.html`，遵循以下模板结构：
99
100	```html
101	<!DOCTYPE html>
102	<html>
103	<head>
104	<meta charset="utf-8">
105	<style>
106	* { margin: 0; padding: 0; box-sizing: border-box; }
107	body { width: 1080px; height: 1440px; overflow: hidden;
108	font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; }
109	.canvas {
110	width: 1080px; height: 1440px;
111	background: {风格背景};
112	display: flex; flex-direction: column; justify-content: center;
113	padding: 60px 70px; gap: 36px; position: relative;
114	}
115	/* 角标 */
116	.badge { display: inline-flex; align-items: center; gap: 10px;
117	background: {主色 alpha 0.12}; border: 1.5px solid {主色 alpha 0.2};
118	border-radius: 10px; padding: 12px 24px; font-size: 28px;
119	font-weight: 700; color: {主色}; letter-spacing: 3px; width: fit-content; }
120	/* 主标题行 */
121	.title-row { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
122	.title-main { font-size: 120-130px; font-weight: 900; color: {主色}; letter-spacing: -2px; }
123	.title-secondary { font-size: 110-120px; font-weight: 900; color: {副色}; }
124	/* 分隔线 */
125	.divider { width: 80px; height: 5px;
126	background: linear-gradient(90deg, {主色}, {副色});
127	border-radius: 3px; margin: 10px 0; }
128	/* 副标题 */
129	.tagline { font-size: 76-82px; font-weight: 800; color: {文字色};
130	letter-spacing: 8px; line-height: 1.4; }
131	.tagline .accent { color: {主色或副色淡化}; }
132	/* 标签 */
133	.chip { background: {标签背景}; border-radius: 14px; padding: 18px 32px;
134	font-size: 34px; font-weight: 700; letter-spacing: 2px; }
135	/* 底部 */
136	.footer { font-size: 30px; color: {文字色淡化}; font-weight: 600; letter-spacing: 2px; }
137	</style>
138	</head>
139	<body>
140	<!-- 按上面的结构填充内容 -->
141	</body>
142	</html>
143	```
144
145	关键设计约束：
146	- 3:4 比例（1080×1440px）
147	- 文字占画面 70% 以上
148	- 主标题尽量一行放下（必要时缩小字号或拆行）
149	- 2-3 级文字层级：主标题 > 副标题 > 标签/底部
150	- 所有中文用 font-weight: 700-900
151	- 颜色最多用 3 种（主+副+辅助），不杂乱
152
153	### 步骤 4：截图
154	用 Playwright 截图保存：
155
156	```python
157	from playwright.sync_api import sync_playwright
158	with sync_playwright() as p:
159	browser = p.chromium.launch()
160	page = browser.new_page(viewport={"width": 1080, "height": 1440})
161	page.goto("file:///tmp/xhs-cover.html")
162	page.wait_for_timeout(500)
163	page.screenshot(path="<输出路径>", full_page=False)
164	browser.close()
165	```
166
167	默认保存到 `~/Documents/Obsidian Vault/xhs/img/cover-{简短标识}.png`。
168
169	### 步骤 5：展示
170	用 Read 工具展示生成的图片给用户，询问是否需要调整。

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

xhs-cover

50installs34forks

View on GitHub

How to install xhs-cover?

chenxiachan/xhs-claude-skills/xhs-cover

$npx -y skills add chenxiachan/xhs-claude-skills --skill xhs-cover

Installs into the current project.

Summary

生成小红书封面图（HTML+CSS → Playwright 截图）

Files · 1

View on GitHub

SKILL.md

1	为用户生成一张小红书风格封面图。
2
3	## 输入
4	用户提供的内容: $ARGUMENTS
5
6	解析输入：
7	- 标题文案（必须）：从输入中提取核心文案，不超过 30 字
8	- 风格（可选）：`--style 风格名`，默认自动选择
9
10	## 可用风格
11
12	### 1. morandi（莫兰迪）
13	温柔高级，低饱和度，适合知识分享、方法论、生活方式
14	```
15	背景: linear-gradient(155deg, #f0e6d8, #e8dcd0, #d6cfc8)
16	主色: #c45c4a（暖红）
17	副色: #5b5080（灰紫）
18	辅助: #4a7a6a（灰绿）
19	文字: #3d3328（深棕）
20	标签背景: rgba(255,255,255,0.55)
21	```
22
23	### 2. academic（学术蓝）
24	冷静专业，适合论文解读、科研分享、技术分析
25	```
26	背景: linear-gradient(155deg, #e4eaf2, #d8e2ee, #cdd8e8)
27	主色: #2563eb（学术蓝）
28	副色: #7c3aed（紫）
29	辅助: #0891b2（青）
30	文字: #1e293b（深蓝灰）
31	标签背景: rgba(255,255,255,0.6)
32	```
33
34	### 3. dark（暗夜科技）
35	硬核科技感，适合 AI/编程/开源项目、技术深度内容
36	```
37	背景: linear-gradient(155deg, #1a1a2e, #16213e, #0f3460)
38	主色: #a78bfa（亮紫）
39	副色: #38bdf8（天蓝）
40	辅助: #34d399（绿）
41	文字: #f1f5f9（近白）
42	标签背景: rgba(255,255,255,0.08), border: rgba(255,255,255,0.2)
43	```
44
45	### 4. mint（薄荷清新）
46	清爽自然，适合工具推荐、效率方法、学习笔记
47	```
48	背景: linear-gradient(155deg, #ecfdf5, #e0f7ed, #d1f0e4)
49	主色: #059669（翠绿）
50	副色: #7c3aed（紫）
51	辅助: #d97706（琥珀）
52	文字: #1a3a2a（深绿灰）
53	标签背景: rgba(255,255,255,0.6)
54	```
55
56	### 5. sunset（日落暖橘）
57	温暖有活力，适合个人感悟、项目发布、里程碑分享
58	```
59	背景: linear-gradient(155deg, #fef3e2, #fde8d0, #fcdcc4)
60	主色: #ea580c（橘红）
61	副色: #7c3aed（紫）
62	辅助: #0891b2（青）
63	文字: #431407（深棕）
64	标签背景: rgba(255,255,255,0.55)
65	```
66
67	### 6. bw（极简黑白）
68	高级克制，适合观点输出、争议话题、深度思考
69	```
70	背景: linear-gradient(155deg, #f5f5f5, #ebebeb, #e0e0e0)
71	主色: #18181b（纯黑）
72	副色: #52525b（灰）
73	辅助: #a1a1aa（浅灰）
74	文字: #18181b（纯黑）
75	标签背景: rgba(255,255,255,0.7), border: #d4d4d8
76	```
77
78	## 生成流程
79
80	### 步骤 1：设计文案
81	从用户输入提取：
82	- 主标题（最大字，1 行，核心概念/产品名/关键词）
83	- 副标题（次大字，1-2 行，核心洞察或 tagline）
84	- 标签（3 个功能/关键词标签，每个 2-4 字）
85	- 角标（左上小字，身份标签如 OPEN SOURCE / 论文解读 / 工具推荐）
86	- 底部（小字，3 个关键词用 · 分隔）
87
88	### 步骤 2：选择风格
89	- 如果用户指定了 `--style`，使用对应风格
90	- 否则根据内容自动选择：
91	- 论文/科研 → academic
92	- AI/编程/开源 → dark 或 morandi
93	- 工具/效率 → mint
94	- 个人感悟/发布 → sunset
95	- 观点/思考 → bw
96
97	### 步骤 3：生成 HTML
98	写入 `/tmp/xhs-cover.html`，遵循以下模板结构：
99
100	```html
101	<!DOCTYPE html>
102	<html>
103	<head>
104	<meta charset="utf-8">
105	<style>
106	* { margin: 0; padding: 0; box-sizing: border-box; }
107	body { width: 1080px; height: 1440px; overflow: hidden;
108	font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; }
109	.canvas {
110	width: 1080px; height: 1440px;
111	background: {风格背景};
112	display: flex; flex-direction: column; justify-content: center;
113	padding: 60px 70px; gap: 36px; position: relative;
114	}
115	/* 角标 */
116	.badge { display: inline-flex; align-items: center; gap: 10px;
117	background: {主色 alpha 0.12}; border: 1.5px solid {主色 alpha 0.2};
118	border-radius: 10px; padding: 12px 24px; font-size: 28px;
119	font-weight: 700; color: {主色}; letter-spacing: 3px; width: fit-content; }
120	/* 主标题行 */
121	.title-row { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
122	.title-main { font-size: 120-130px; font-weight: 900; color: {主色}; letter-spacing: -2px; }
123	.title-secondary { font-size: 110-120px; font-weight: 900; color: {副色}; }
124	/* 分隔线 */
125	.divider { width: 80px; height: 5px;
126	background: linear-gradient(90deg, {主色}, {副色});
127	border-radius: 3px; margin: 10px 0; }
128	/* 副标题 */
129	.tagline { font-size: 76-82px; font-weight: 800; color: {文字色};
130	letter-spacing: 8px; line-height: 1.4; }
131	.tagline .accent { color: {主色或副色淡化}; }
132	/* 标签 */
133	.chip { background: {标签背景}; border-radius: 14px; padding: 18px 32px;
134	font-size: 34px; font-weight: 700; letter-spacing: 2px; }
135	/* 底部 */
136	.footer { font-size: 30px; color: {文字色淡化}; font-weight: 600; letter-spacing: 2px; }
137	</style>
138	</head>
139	<body>
140	<!-- 按上面的结构填充内容 -->
141	</body>
142	</html>
143	```
144
145	关键设计约束：
146	- 3:4 比例（1080×1440px）
147	- 文字占画面 70% 以上
148	- 主标题尽量一行放下（必要时缩小字号或拆行）
149	- 2-3 级文字层级：主标题 > 副标题 > 标签/底部
150	- 所有中文用 font-weight: 700-900
151	- 颜色最多用 3 种（主+副+辅助），不杂乱
152
153	### 步骤 4：截图
154	用 Playwright 截图保存：
155
156	```python
157	from playwright.sync_api import sync_playwright
158	with sync_playwright() as p:
159	browser = p.chromium.launch()
160	page = browser.new_page(viewport={"width": 1080, "height": 1440})
161	page.goto("file:///tmp/xhs-cover.html")
162	page.wait_for_timeout(500)
163	page.screenshot(path="<输出路径>", full_page=False)
164	browser.close()
165	```
166
167	默认保存到 `~/Documents/Obsidian Vault/xhs/img/cover-{简短标识}.png`。
168
169	### 步骤 5：展示
170	用 Read 工具展示生成的图片给用户，询问是否需要调整。

People who liked this also viewed

6 picks

Type