| 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）
四、强调与标记
| 元素 | 样式 |
|---|
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;
}
十二、工作流程
- 接收用户提供的文章内容（可能是纯文本、Markdown 或结构化描述）
- 分析内容结构：标题、正文、代码块、列表、引用、标签、图片位置
- 按照上述规范生成完整的 HTML 文件（包含
<!DOCTYPE html>、<head>、<body> 全部内容）
- 将 HTML 文件写入用户指定的路径（如未指定，写入当前工作目录）
- 告知用户文件路径，提示可在浏览器中打开预览
生成时注意：
- 所有 CSS 内联在
<style> 标签中，不依赖外部样式文件，确保单文件即可打开
<html lang="zh-CN">，<meta charset="UTF-8">- Google Fonts 通过
<link> 引入（需联网）
- 内容语义化：合理使用 h1-h4、p、ul/ol、pre/code、blockquote、mark、em、strong 等标签
