# Rednote UI Wanyouyinli > 「Rednote UI · 万有引力」图文卡片排版 skill——把一段文稿/主题渲染成小红书（Rednote）/公众号科技风的竖版卡片 PNG。 固定一套思源黑体（封面重黑 / 章节粗黑 / 正文细黑）+ 等宽代码，纯白底、黑标题、灰正文、 亮蓝着重的克制版式，自动拆卡 → 生成 HTML → 渲染成一张张等高的 1080 宽竖版卡片。字体已内嵌，云端渲染无需联网。 当用户说「用万有引力排版」「万有引力风格」「用万有引力出图」「把这篇/这段做成卡片」「排成图文卡片」 「做成小红书卡片」「用那套排版出图」「文档做成卡片图」「这段内容排个版出图」「生成轮播图」， 或给一段文稿/主题要产出可发小红书公众号的竖版卡片图时，使用本 skill。 哪怕没明说「卡片」，只要场景是「拿一段中文文稿 → 产出这套字体风格的竖版图文」，就触发本 skill。 不覆盖：纯文字文档（docx/md）、PPT、单张海报（用 canvas-design）、视频分镜。 - Skill: `b-bzy/rednote-ui-wanyouyinli` (Agent Skill, multi-file: 10 files) - Install (CLI): `npx skillmds@latest add b-bzy/rednote-ui-wanyouyinli` - Raw SKILL.md: https://api.skillmd.com/api/skills/b-bzy/rednote-ui-wanyouyinli/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: b-bzy (https://skillmd.com/u/b-bzy) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/b-bzy/rednote-ui-wanyouyinli --- # Rednote UI · 万有引力 · 图文卡片排版 > 视觉风格致敬小红书（Rednote）博主「万有引力」，本 skill 复刻其卡片 UI 与版式用于自己的内容排版。 把中文文稿排成一套固定视觉语言的竖版卡片图。视觉规范是从真实卡片里像素采样提取的， 核心气质一句话：**纯白底、黑标题、灰正文、亮蓝着重，靠留白和克制的强调建立层级。** ## 什么时候用 用户给一段文稿、笔记、口播稿、技术拆解，或只给一个主题，希望产出「一张张能发小红书/公众号的竖版卡片图」时。 输出是 **1080 宽的 PNG（每卡一张，可轮播）**。 ## 三套字体（已内嵌，勿改） | 用途 | 字体 | CSS 变量 | 说明 | |---|---|---|---| | 封面 H1 大标题 | 思源黑 Black（重黑体） | `--f-h1` | 厚重、方正、纯黑 `#000` | | 章节 H2 标题 | **思源黑体 Bold（粗黑）** | `--f-h2` | **关键**：原版章节标题是**无衬线粗黑体**（不是楷体/毛笔字），和正文同一套黑体、只靠字重区分。 | | 正文 / 列表 / 表格 | 思源黑体 Regular（细黑） | `--f-body` | 无衬线、干净利落；灰 `#5C5C5C` | | 代码 / 文件名 / 字段 | 等宽 mono | `--f-mono` | 技术名词从中文里"跳"出来 | **配色纪律（重要）**：全帖**只用 黑 / 灰 / 蓝**。标题黑 `#000000`、正文灰 `#5C5C5C`、着重蓝 `#1568DC`、 表头/底/框 `#F2F4F5`、边框 `#E6E8EB`、分隔线 `#DCDEE2`。**示意图一律不上色**（去绿/红），K/V 等用"蓝 vs 深墨 vs 浅灰"区分；**表格里不要 ✅❌ 彩色 emoji**，用纯文字。代码字符串那点绿只在代码块内部允许。 ## 排版规则（生成内容时遵守） - **分卡**：按**长文连续流**切片——一张卡讲一个主题**或它的续页**（长主题可跨 2–3 张，续页不给标题、正文接着讲，见「排版体例」）。封面卡（cover）→ 内容卡 → 结尾卡（金句 +「完」）。别为了自足硬把内容塞成一张。 - **标题命名**：名词短语，忌口语。高频句式「第X层：XXX」「主体+的+对象」，用全角冒号 `：`。 - **正文分段**：每段 2–4 行就断，段间留空。行内不必太松，透气感来自段落间距。 - **标蓝着重（`.em`）**：只给①核心结论/金句 ②被定义的概念名 ③关键取舍。**一段最多 1–2 处**，别整段标蓝。 - **分点罗列（`.list`）**：只在并列可枚举时用（几层、几个选择、几种操作）。结构＝蓝编号 + 蓝标签（``）+ 灰描述。 - **表格**：三列以内的结构化对比才用。 - **代码块**：展示配置/调用/清单，带行号，字符串标绿。 ## 纯净模式（默认，1:1 对齐原版） 原版卡片顶部**只有标题**，没有眉标、没有页码、没有每页署名、没有底部"↓ 承接句"。所以**默认纯净模式**： - **不要** `kicker` 眉标、`pageno` 页码、`bridge` 衔接句、每页 `brand` 署名。 - **署名只放两处**：封面 + 最后一张结尾卡。 - **卡间连贯靠"好文笔 + 顺序标题"**，不靠 UI 箭头。上一张的结尾自然引出下一张的主题即可。 - 眉标/页码/衔接句这些**降级为可选开关**——只有用户明确要"连载进度感"时才加。 ## 张数与密度（整篇压成 ≤ 18 张一帖，且每张要"填满"） 小红书单帖最多 18 张。**默认把整篇压成一帖 ≤18 张**；压不进或用户要分篇才拆多帖（各 ≤18、各带封面、按 `帖子N/` 分目录并告知）。 > **⛔ 硬性：每张 PNG 必须完全等尺寸。** 小红书轮播以首图定比例，尺寸不一的会被裁切/加白边。`card.css` 已把 `.card` 设成**固定 `height`（默认 1600px）+ `overflow:hidden`**，所以：① **各卡内容要均衡**——太满的精简（合并/删表/缩句），太空的补料（加分析/系列导航/示例），让每张都接近填满同一高度；② 渲染后**必须逐张自检底部**：既不许留大片空白，也不许被 `overflow` 裁掉金句/末行。高度按最满的卡定，别让任何一张溢出。 **每张要填满，别留半屏白**（原版每张都撑满）。一张 = 一个完整小主题，结构： > 标题 ＋ 1–2 句引入 ＋ 一个有血肉的主体块（两层列表 / 3 列表格 / 代码 / 示意图）＋ 若干分析段 ＋ **一句蓝色金句收尾** - **一卡可放 2 个知识点**：别死守"一卡一个点"。相邻同题（如 概念 + 它的成本、解法 + 为什么成立）并成一卡「标题 → 点1 → 点2 → 金句」，比摊成两张半空卡更省张、更连贯。 - **列表用两层结构 `list2`**（对齐原版）：蓝标签独占一行，下面跟**灰色 1–2 行描述**（别塌成一行）。见组件速查。 - **能图代文就别写大段字**，但图/表后面**要接分析**，不要放完就停。 - 渲染后**自检底部留白**：若某张下半屏大片空白，就补内容、并列项、或与相邻卡合并——**空卡比密卡更掉价**。 ## 内容与文风（决定"读不读得下去"） 原版是"人写的短文"，不是提纲。生成正文时： - **优先成段叙述**，像一个人在讲；**bullet 克制**——一张卡最多一组列表，且每条都展开成"标签 + 描述"。 - **保留原文的语气、比喻、"我认为"**，不要抽成干巴巴的关键词。 - **金句只在每章末来一句**（`punch`，见「排版体例」）：有观点、标蓝、独立成行；中间卡不必强上。 - **标题短促**：尽量 ≤ 8 字、名词短语，忌把标题写成一整句（解释放正文）。例：`核心架构`、`重复的代价`，不是 `Token 是模型的最小处理单元`。 ## 结构脊梁（长帖必做，对齐原版） 原版靠"**地图 + 编号脊梁 + 回炉收束**"撑起结构，不是一堆散卡。长帖照做： 1. **封面之后加一张「路线图卡」**（`roadmap`）：用编号把全篇拆成 **3 部**（如 概念 → 原理 → 工程），让读者一上来就有全局地图。 2. **章号内联进标题**（如「基础篇 · 先说 Token」）：**不单开分部页**（`.card.part` / `.parttag` 停用）；结构感靠"篇/章号 + 顺序标题"撑，读者顺着读就知道走到第几块。 3. **正文卡归到各部之下**：标题可保留 punchy 钩子，但**成串主题统一句式/并题**（如"代价·1/2/3"），别让配对卡各换全新标题、互不相认。 4. **结尾金句必须扣本文主题**——用本文自己的题眼收口，**严禁照搬别篇的模板金句**（例：讲 KV Cache 就别用"记忆"的金句）。收尾前先把全篇路径回炉一遍，再上金句 + 「完」。 ## 排版体例（一套到底 · 对齐原版长文） **统一按原版「万有引力」的长文体例来，不分平台、不做两套。** 六条规矩： 1. **标题描述性 + 内联章号**：形如「基础篇 · 先说 Token」「第X层：XXX」，章号写进标题，**不单开分部页**（`.card.part` / `.parttag` 停用）。别用"核心一招""不是免费的"这种纯钩子短标题。 2. **允许跨页续卡**：长主题可连续跨 2–3 张；**续页不给标题**（那张 `
` 里不放 `.h2`，正文直接接着上一张讲）。整篇当"一篇长文切成片"，不是"一张张自足卡"。 3. **金句克制**：`punch` 只在**每章结尾**来一句，中间卡可以没有——别每卡都强上一句。 4. **第一人称**：多用"我 / 我们"带出观点与路径（"我把它拆成四步""我给 Agent 写 prompt 用英文"），像作者当面讲。 5. **图表克制**：优先级 **表格 > 代码 > 示意图**；能用表格/代码讲清的就别画 chips/箭头，示意图只在"流向/流程"必要时用。 6. **等高照旧 + 靠叙述填满**：每张仍撑满同一高度，但靠连续成段叙述 + 表格/代码填，不靠"每卡金句"凑高度。 > 读起来要像"一篇文章一路读下来"。参考成品：KV Cache 长文版 16 张。 ## 封面配图（做到「同一种风格」） 封面配图有两条路，**优先用①**（用户自己的图最贴题、最省事）： ### ① 用户放自己的图（默认 · 推荐）——`assets/cover-template.html` 直接把 `assets/cover-template.html` 复制进工作目录当封面卡用。它已排好版：厚黑大标题 → **配图框** → 手写小标题 → 导语 → 署名，中间留一个 660px 高的配图框。用户放图只需一步： - **把图片命名为 `cover.png`（或 `cover.jpg`）放到 `cover-template.html` 同目录**，重新渲染即可——图会被 `object-fit:cover` 自动居中裁切、填满整框，**任意比例都不变形**。 - 找不到图时自动显示灰蓝占位框（`onerror` 兜底，不会报错、不会空白），方便先出样、后补图。 - 用户若把图发给我（截图/照片/自绘图，只要有使用权），我直接存成 `cover.png` 放进目录、重渲一版终稿即可。 > ⚠️ 不嵌入真实品牌 logo、真实人物照片，或对真实公众人物的合成/篡改图（含带水印的网图）。用户提供的、自己有使用权的图不在此限。 ### ② 现做一张原创插画（用户没图时的兜底） 原版博主的封面/配图气质：**亮蓝底（`#EAF3FF→#CFE3F8`）＋ 一个人物/吉祥物 或 一群图标 ＋ 把本文概念可视化 ＋ 顶上压一行厚黑大标题**。要复刻这种风格，用下面这套**原创插画**做法（纯代码渲染，离线可复现）： **做法**：另写一个 `cover.html`（`` 或 HTML 拼），只用蓝色系调色板画一张 **1080×~660 的插画**，再用同一个 `render_cards.py` 渲染成 `cover.png`，放进 ① 的同目录即可自动填入。素材库（挑 1–2 类，别堆满）： - **吉祥物/人物**：圆角机器人、动物 IP、抽象小人——给它一个和主题相关的「道具」（如抱着 `K·V` 徽章、举着放大镜）。这是"人物"路线。 - **通用图标群**：芯片、数据库柱、闪电、对话气泡、终端符 `>_`、齿轮、层叠卡片——圆角方块 app-tile 排成一簇。这是"图标"路线。 - **概念可视化**：把本文题眼画成图（KV Cache＝一摞 `K₁/V₁/K₂ … + new append` 的货架；注意力＝下三角热力格；token＝一串药丸）。 - **手绘箭头/虚线/圆点底纹**：让画面"活"起来，别太规整。 ## 工作流程（五步：评估选材 → 分镜 → 正确性核查 → 渲染 → 差异复盘） **第 1 步：评估长度 + 选材（必做）。** 先掂量文稿体量，定这一帖的张数与主体： - **定张数**：长文（原文数千字 / 几十个知识点，如 KV Cache 原文）→ 顶到 **18 张**（小红书单帖上限）；中等 → 12–15；短 → ≤10。 - **选主体**：长文**别硬塞全部**。锁定一条主线（如「KV Cache 是什么 → 为什么 → 代价 → 工程」），**砍掉支线与过深的点**（例：原文的 Logits/masking、"Prefill 为何要算所有 Q"、算术强度这类可留给后续篇或直接略过）。 - 产出一份**「入选 / 砍掉」清单**，让取舍透明，避免长文糊成一锅。 **第 2 步：出分镜 md（必做）。** 把选材落到每一张卡：产出 `storyboard.md`，逐卡列清 **卡号 / 类型（封面·路线图·分部·内容·结尾）/ 标题 / 正文要点 / 图表设计 / 内容点数 / 预估高度**。默认用 SendUserFile 发给用户审改；用户若已授权"直接出图"，评估选材 + 分镜后可连续渲染。 **第 3 步：内容正确性核查（强制拦截 · 必做）。** 出图前，把稿子里**可核查的硬事实**（数字、定义、机制、指标、公司/技术名）逐条拿去和**权威资料**比对（`WebSearch` / 官方文档 / 论文）。产出一张核查表：`说法 | 权威资料怎么说 | 判定（✓准确 / ⚠️近似·示意 / ✗错误）| 来源`。 > **⛔ 出现 ✗ 事实性硬伤 → 强制停下**：把问题清单发给用户，**禁止渲染**，改对了再走。⚠️ 近似/示意值不拦截，但建议卡面加"约 / 示意"字样。 **第 4 步：渲染成 PNG。** 1. **准备工作目录**（把样式和字体复制出来，保持相对路径）： ```bash mkdir -p work && cp -r "/assets/card.css" "/assets/fonts" work/ ``` 2. **把文稿拆成卡片，写 `work/cards.html`**：以 `assets/template.html` 为结构范本， `` 里 ``，`` 里每张卡是一个 `
…
`。 组件类见下方速查表。封面卡加 `class="card cover"`。 3. **渲染成 PNG**： ```bash python3 "/scripts/render_cards.py" work/cards.html work/out ``` 输出 `work/out/card-01.png`、`card-02.png` …（1080 宽，2× 高清，**每张等高**＝`.card` 的固定 `height`）。 4. **交付**：用 SendUserFile 把每张 PNG 发给用户（按顺序）。如需保存到用户电脑再用 device_commit_files。 **第 5 步：终稿 vs 权威资料差异复盘。** 出图后，把**权威资料 ↔ 终稿卡片**再比一遍，列出"哪里不一样 + 为什么"：精度取舍（范围→整数）、砍掉的前提（如"数十 GB"省了 GQA 前提）、加的比喻、删的支线。让用户看清每处简化的代价，自己决定要不要补回。 ## 组件速查（写 cards.html 用这些 class） ```html
大标题
可换行
在此放入你的配图
把图片命名为 cover.png 放到同目录 · 任意比例自动裁切填满
手写体小标题（引出话题）
1–2 段导语，带 蓝色着重。
@YourBrand
章节标题
一句话点题。
输入→ KV →缓存
图注：一句话说明这张示意图
短标题（≤8字）
1–2 句引入，像讲话一样把这张的主题带出来。
  1. 1.蓝色标签（含括号补充）：
    下面跟一段灰色描述，1–2 行，把这条真正讲清楚，而不是补一句凑数。
  2. 2.第二个标签：
    同样带描述。技术词用 mono 标注。
最后用一句蓝色金句收尾——有观点、能被记住、好转发。
01基础概念Token · 词表
先说 Token
……（该部第一个主题正文）
章节标题（手写体）
正文。技术词用 MEMORY.md， 结论用 标蓝着重。
  1. 1.蓝标签：灰描述。
列头列头
单元格单元格
1func("字符串")
完
02
``` 行内小工具：`.mono`（等宽技术词）、`.em`（着重蓝）、`.icode`（行内代码底）、`.h1.small`（小一号封面标题）、`.mt-l/.mt-s/.mt0`（间距微调）。 ## 注意 - 字体全部内嵌在 `assets/fonts/`，`card.css` 用相对路径引用；**渲染前务必把 card.css 和 fonts/ 放在同一目录**（照第 1 步 cp 即可），否则字体会回退。 - `render_cards.py` 用云端预装 chromium；首次会自动 `pip install playwright`。 - **卡片默认等高**（`.card{height:1600px;overflow:hidden}`）——这是小红书轮播的硬性要求。想改高度就调这个 `height`，但**所有卡共用一个值**；改完务必重渲逐张自检：无溢出裁切、无大片空白。内容太满就精简、太空就补料，向同一高度看齐。 - 别改字体家族——**全篇同一套思源黑体**（H1 Black / H2 Bold / 正文 Regular），只靠字重拉层级，这是对齐原版的关键（原版就是纯无衬线黑体，非楷体）。