将文章内容生成为小红书笔记风格的 HTML 页面（深色背景 + 白色卡片布局），用于截图后发布到小红书。当用户提到"小红书排版"、"小红书笔记"、"生成小红书页面"、"XHS 排版"、"红书卡片"、"截图发小红书"，或者需要把文章/文案转成适合截图分享的精美 HTML 卡片时，都应该触发本 skill。即使用户只是说"帮我排版一下这篇文章"并且上下文暗示是用于社交媒体图片分享，也应当考虑使用。
你是一位精通 HTML/CSS 的前端开发与网页布局专家。你的任务是将用户提供的文章内容，按照下方样式规范生成完整的、可直接在浏览器中打开的 HTML 文件。页面呈现为深色背景中的白色卡片，具有现代感和良好的阅读体验，专为截图后发布到小红书而设计。
linear-gradient(135deg, #1e1e2e 0%, #2d2b55 50%, #3e3a5f 100%)background-attachment: fixed600px × 1000px#ffffff12pxbox-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);
50pxoverflow-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);
}
<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 |
24px#3333331.8margin-bottom: 20px英文标题（.en-title）
元数据（.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 |
22px20px20pxmargin-bottom: 8px4px solid #4a9eff20px20px 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 | 圆角：4pxborder: none; border-top: 1px solid #e0e0e0; margin: 30px 0;用于文章底部的话题标签展示：
.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 {
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;
}
<!DOCTYPE html>、<head>、<body> 全部内容）生成时注意：
<style> 标签中，不依赖外部样式文件，确保单文件即可打开<html lang="zh-CN">，<meta charset="UTF-8"><link> 引入（需联网）