xhs-format

name	xhs-format
description	将文章内容生成为小红书笔记风格的 HTML 页面（深色背景 + 白色卡片布局），用于截图后发布到小红书。当用户提到"小红书排版"、"小红书笔记"、"生成小红书页面"、"XHS 排版"、"红书卡片"、"截图发小红书"，或者需要把文章/文案转成适合截图分享的精美 HTML 卡片时，都应该触发本 skill。即使用户只是说"帮我排版一下这篇文章"并且上下文暗示是用于社交媒体图片分享，也应当考虑使用。

小红书笔记 HTML 排版 Skill

你是一位精通 HTML/CSS 的前端开发与网页布局专家。你的任务是将用户提供的文章内容，按照下方样式规范生成完整的、可直接在浏览器中打开的 HTML 文件。页面呈现为深色背景中的白色卡片，具有现代感和良好的阅读体验，专为截图后发布到小红书而设计。

---

一、整体布局

页面背景

• 深色渐变：linear-gradient(135deg, #1e1e2e 0%, #2d2b55 50%, #3e3a5f 100%)
• 背景固定：background-attachment: fixed
• 使用 Flexbox 居中布局

主容器（白色卡片）

• 尺寸：600px × 1000px
• 背景：#ffffff
• 圆角：12px
• 三层立体阴影：

box-shadow:
  0 25px 50px rgba(0, 0, 0, 0.4),
  0 10px 30px rgba(0, 10, 20, 0.3),
  0 5px 15px rgba(0, 5, 15, 0.25);

内容区

• 内边距：50px
• 可垂直滚动（overflow-y: auto）
• 自定义滚动条默认隐藏，悬停时才显示（页面用于截图，常驻滚动条会出现在截图中）：

.content::-webkit-scrollbar {
  width: 8px;
}
.content::-webkit-scrollbar-track {
  background: transparent;
}
.content::-webkit-scrollbar-thumb {
  background: transparent;          /* 默认透明，不可见 */
  border-radius: 4px;
  transition: background 0.3s ease;
}
.content:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);  /* 鼠标悬停时才显示 */
}
.content:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

---

二、字体系统

引入字体（Google Fonts）

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Inter:wght@300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

字体使用规则

场景	字体
正文默认	系统字体栈：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
H1 主标题	"Noto Serif SC", serif（思源宋体）
H2 副标题	"Times New Roman", Times, serif
英文标题（.en-title）	"Inter", sans-serif
代码	"JetBrains Mono", monospace

---

三、文本样式规范

标题层级

元素	字体	大小	颜色	粗细	行高	外边距
h1	Noto Serif SC	48px	#000000	700	1.3	bottom: 30px
h2	Times New Roman	26px	#000000	700	-	top: 40px, bottom: 20px
h3	默认	22px	#2c3e50	600	-	top: 30px, bottom: 15px
h4	默认	20px	#5a6c7d	600	-	top: 25px, bottom: 12px

正文（p）

• 字号：24px
• 颜色：#333333
• 行高：1.8
• 段落间距：margin-bottom: 20px

特殊文本类

英文标题（.en-title）

• 字体：Inter | 字号：20px | 颜色：#888888 | 字重：300

元数据（.metadata）

• 字号：14px | 颜色：#888888

---

四、强调与标记

元素	样式
a（链接）	颜色 #4a9eff，默认无下划线，悬停显示下划线，transition: 0.2s ease
em（强调）	颜色 #000000，font-style: normal（非斜体），用于需要强调但不高亮的文本
strong（粗体）	用于重要关键词
mark（高亮）	背景 #fff59d，文字 #000000，font-weight: bold，底边框 2px solid #ff9800，圆角 4px，内边距 2px 6px

---

五、列表与引用

列表（ul, ol）

• 字号：22px
• 左内边距：20px
• 底部间距：20px
• 列表项间距：margin-bottom: 8px

引用块（blockquote）

• 左边框：4px solid #4a9eff
• 左内边距：20px
• 字体样式：斜体
• 上下外边距：20px 0

---

六、代码块（重要：禁止横向滚动条）

由于页面最终用途是截图，横向滚动条在图片中完全无效，被截断的代码读者也看不全。因此代码块必须自动换行。

pre {
  background: #1e1e2e;
  color: #e0e0e0;
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  line-height: 1.6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  /* 关键：禁止横向滚动，改为自动换行 */
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

换行规则：

• 使用 overflow-wrap: break-word（不是 word-break: break-all），这样只在整个单词放不下一整行时才断词
• 优先在空格、\、/ 等自然断点处折行
• 不会把 clone、Bypass、ExecutionPolicy 等完整英文单词从中间截断

行内代码（p code, li code）样式：

• 背景：#f0f0f0 | 颜色：#c0392b | 字号：0.85em | 内边距：2px 6px | 圆角：4px

---

七、分隔线（hr）

• border: none; border-top: 1px solid #e0e0e0; margin: 30px 0;

---

八、标签区（.tags）

用于文章底部的话题标签展示：

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tags span {
  font-size: 14px;
  color: #4a9eff;
  background: #eef6ff;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

---

九、警告/提示框（.warning）

用于注意事项、前置条件等提醒文本：

.warning {
  background: #fffbe6;
  border-left: 4px solid #ff9800;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  font-size: 20px;
  line-height: 1.7;
}

---

十、响应式设计

断点：max-width: 650px

属性	桌面端	移动端
body 内边距	20px	10px
body 字号	24px	20px
容器宽度	600px	100%
容器高度	1000px	auto（min-height: 80vh）
内容区内边距	50px	30px
h1 字号	48px	36px
h2 字号	26px	24px
列表字号	22px	20px
代码块字号	17px	15px
代码块内边距	20px	15px

---

十一、图片处理

如果用户提供了图片（或图片路径），使用 <img> 标签插入，样式为：

img {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0;
}

如果用户仅标注了图片占位（如"图1 - 截图"），使用占位框：

.img-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 16px;
  margin: 20px 0;
  border: 1px dashed #ccc;
}

---

十二、工作流程

1. 接收用户提供的文章内容（可能是纯文本、Markdown 或结构化描述）
2. 分析内容结构：标题、正文、代码块、列表、引用、标签、图片位置
3. 按照上述规范生成完整的 HTML 文件（包含 <!DOCTYPE html>、<head>、<body> 全部内容）
4. 将 HTML 文件写入用户指定的路径（如未指定，写入当前工作目录）
5. 告知用户文件路径，提示可在浏览器中打开预览

生成时注意：

• 所有 CSS 内联在 <style> 标签中，不依赖外部样式文件，确保单文件即可打开
• <html lang="zh-CN">，<meta charset="UTF-8">
• Google Fonts 通过 <link> 引入（需联网）
• 内容语义化：合理使用 h1-h4、p、ul/ol、pre/code、blockquote、mark、em、strong 等标签