Rednote UI Wanyouyinli

Rednote UI · 万有引力 · 图文卡片排版

视觉风格致敬小红书（Rednote）博主「万有引力」，本 skill 复刻其卡片 UI 与版式用于自己的内容排版。

把中文文稿排成一套固定视觉语言的竖版卡片图。视觉规范是从真实卡片里像素采样提取的， 核心气质一句话：纯白底、黑标题、灰正文、亮蓝着重，靠留白和克制的强调建立层级。

什么时候用

用户给一段文稿、笔记、口播稿、技术拆解，或只给一个主题，希望产出「一张张能发小红书/公众号的竖版卡片图」时。 输出是 1080 宽的 PNG（每卡一张，可轮播）。

三套字体（已内嵌，勿改）

配色纪律（重要）：全帖只用 黑 / 灰 / 蓝。标题黑 #000000、正文灰 #5C5C5C、着重蓝 #1568DC、 表头/底/框 #F2F4F5、边框 #E6E8EB、分隔线 #DCDEE2。示意图一律不上色（去绿/红），K/V 等用"蓝 vs 深墨 vs 浅灰"区分；表格里不要 ✅❌ 彩色 emoji，用纯文字。代码字符串那点绿只在代码块内部允许。

排版规则（生成内容时遵守）

• 分卡：按长文连续流切片——一张卡讲一个主题或它的续页（长主题可跨 2–3 张，续页不给标题、正文接着讲，见「排版体例」）。封面卡（cover）→ 内容卡 → 结尾卡（金句 +「完」）。别为了自足硬把内容塞成一张。
• 标题命名：名词短语，忌口语。高频句式「第X层：XXX」「主体+的+对象」，用全角冒号 ：。
• 正文分段：每段 2–4 行就断，段间留空。行内不必太松，透气感来自段落间距。
• 标蓝着重（.em）：只给①核心结论/金句 ②被定义的概念名 ③关键取舍。一段最多 1–2 处，别整段标蓝。
• 分点罗列（.list）：只在并列可枚举时用（几层、几个选择、几种操作）。结构＝蓝编号 + 蓝标签（<b>）+ 灰描述。
• 表格：三列以内的结构化对比才用。
• 代码块：展示配置/调用/清单，带行号，字符串标绿。

纯净模式（默认，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 张；续页不给标题（那张 <section class="card"> 里不放 .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（<svg> 或 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. 准备工作目录（把样式和字体复制出来，保持相对路径）：

   mkdir -p work && cp -r "<SKILL_DIR>/assets/card.css" "<SKILL_DIR>/assets/fonts" work/
   

2. 把文稿拆成卡片，写 work/cards.html：以 assets/template.html 为结构范本， <head> 里 <link rel="stylesheet" href="card.css">，<body> 里每张卡是一个 <section class="card">…</section>。 组件类见下方速查表。封面卡加 class="card cover"。

3. 渲染成 PNG：

   python3 "<SKILL_DIR>/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）

<section class="card cover">           <!-- 封面卡：大标题 + 配图 + 手写小标题 + 导语（顶部无眉标） -->
  <div class="h1">大标题<br>可换行</div>

  <!-- 配图：优先直接用 assets/cover-template.html（已内置「放 cover.png 自动填入 + 找不到显示占位框」，见「封面配图 ①」）。
       下面这行是其核心：任意比例图自动裁切填满，缺图不报错。想接近原版就上真实图或现做一张插画 PNG，别只放 CSS 文字块。 -->
  <div class="cover-figure">
    <img src="cover.png" alt=""
        
    <div class="slot-inner"><div class="ico"></div><div class="t1">在此放入你的配图</div>
      <div class="t2">把图片命名为 cover.png 放到同目录 · 任意比例自动裁切填满</div></div>
  </div>
  <!-- 无真实图时的精致备选（深色主视觉，别用小方块 chip）：
  <div class="cover-figure"><div class="hero">
    <div class="big">KV<br>Cache</div>
    <div class="cap">LLM 推理的底层机制</div>
    <div class="tags"><span>Token</span><span>Attention</span><span>Prefill / Decode</span></div>
  </div></div> -->

  <div class="lead-h2">手写体小标题（引出话题）</div>
  <div class="body">1–2 段导语，带 <span class="em">蓝色着重</span>。</div>
  <div class="brand">@YourBrand</div>       <!-- 署名：仅封面 + 结尾卡 -->
</section>

<!-- 示意图卡 / 图代文（用图形代替大段文字，减少张数、提升可读性） -->
<section class="card">
  <div class="h2">章节标题</div>
  <div class="body">一句话点题。</div>
  <div class="figbox">
    <div class="figrow">
      <span class="chip">输入</span><span class="arrow">→</span>
      <span class="chip k">K</span><span class="chip v">V</span>
      <span class="arrow">→</span><span class="chip dim">缓存</span>
    </div>
    <div class="figcap">图注：一句话说明这张示意图</div>
  </div>
</section>
<!-- chip 变体：.k 蓝框 / .v 墨框（深墨，非绿）/ .dim 灰底；.fig>img 放真实示意图 -->

<!-- ★ 纯净正文卡（推荐形态）：短标题 + 引入 + 两层列表 + 分析 + 金句。顶部干净，无眉标/页码/衔接句 -->
<section class="card">
  <div class="h2">短标题（≤8字）</div>
  <div class="body">1–2 句引入，像讲话一样把这张的主题带出来。</div>
  <ol class="list2">
    <li>
      <div class="lab"><span class="n">1.</span>蓝色标签（含括号补充）：</div>
      <div class="desc">下面跟一段灰色描述，1–2 行，把这条真正讲清楚，而不是补一句凑数。</div>
    </li>
    <li>
      <div class="lab"><span class="n">2.</span>第二个标签：</div>
      <div class="desc">同样带描述。技术词用 <span class="mono">mono</span> 标注。</div>
    </li>
  </ol>
  <div class="punch">最后用一句蓝色金句收尾——有观点、能被记住、好转发。</div>
</section>
<!-- 两层列表 .list2＝蓝标签行 + 灰描述段；金句 .punch＝整句蓝独立成行 -->
<!-- 一张卡也可「表格 + 下方 2–3 段分析 + 金句」，把卡片填满 -->

<!-- 分部开场（折叠版）：把空白分部卡折进该部首张内容卡顶部，省一张、不留空 -->
<section class="card">
  <div class="parttag"><span class="pn">01</span><span class="pt">基础概念</span><span class="pg">Token · 词表</span></div>
  <div class="h2">先说 Token</div>
  <div class="body">……（该部第一个主题正文）</div>
</section>
<!-- parttag＝浅蓝大部号 .pn + 部名 .pt + 右侧进度 .pg + 底部细线；替代整屏 .card.part -->


<section class="card">                  <!-- 内容卡 -->
  <div class="h2">章节标题（手写体）</div>
  <div class="body">正文。技术词用 <span class="mono">MEMORY.md</span>，
       结论用 <span class="em">标蓝着重</span>。</div>

  <ol class="list">                     <!-- 分点罗列 -->
    <li><span class="num">1.</span><span class="txt"><b>蓝标签</b>：灰描述。</span></li>
  </ol>

  <table class="table">                 <!-- 表格 -->
    <thead><tr><th>列头</th><th>列头</th></tr></thead>
    <tbody><tr><td>单元格</td><td>单元格</td></tr></tbody>
  </table>

  <div class="code">                    <!-- 代码块 -->
<div><span class="ln">1</span><span class="kw">func</span>(<span class="str">"字符串"</span>)</div>
  </div>

  <hr class="divider">                  <!-- 话题转折分隔线 -->
  <div class="end">完</div>            <!-- 结尾标记 -->
  <div class="pageno">02</div>          <!-- 右下页码 -->
</section>

行内小工具：.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），只靠字重拉层级，这是对齐原版的关键（原版就是纯无衬线黑体，非楷体）。