rednote-render-skill

Files (144)

• marketplace.json · .claude-plugin/
• plugin.json · .claude-plugin/
• error-notebook.md · .codex/
• .gitignore
• AGENTS.md
• LICENSE
• README.md
• SKILL.md
• STYLES.md
• card.html · assets/
• cover.html · assets/
• example.md · assets/
• styles.css · assets/
• academic.css · assets/themes/
• botanical.css · assets/themes/
• default.css · assets/themes/
• minimalist.css · assets/themes/
• neo-brutalism.css · assets/themes/
• playful-geometric.css · assets/themes/
• professional.css · assets/themes/
• retro.css · assets/themes/
• sketch.css · assets/themes/
• terminal.css · assets/themes/
• LICENSE · assets/vendor/katex/
• auto-render.min.js · assets/vendor/katex/contrib/
• KaTeX_AMS-Regular.ttf · assets/vendor/katex/fonts/
• KaTeX_AMS-Regular.woff · assets/vendor/katex/fonts/
• KaTeX_AMS-Regular.woff2 · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Bold.ttf · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Bold.woff · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Bold.woff2 · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Regular.ttf · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Regular.woff · assets/vendor/katex/fonts/
• KaTeX_Caligraphic-Regular.woff2 · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Bold.ttf · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Bold.woff · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Bold.woff2 · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Regular.ttf · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Regular.woff · assets/vendor/katex/fonts/
• KaTeX_Fraktur-Regular.woff2 · assets/vendor/katex/fonts/
• KaTeX_Main-Bold.ttf · assets/vendor/katex/fonts/
• KaTeX_Main-Bold.woff · assets/vendor/katex/fonts/
• KaTeX_Main-Bold.woff2 · assets/vendor/katex/fonts/
• KaTeX_Main-BoldItalic.ttf · assets/vendor/katex/fonts/
• KaTeX_Main-BoldItalic.woff · assets/vendor/katex/fonts/
• KaTeX_Main-BoldItalic.woff2 · assets/vendor/katex/fonts/
• KaTeX_Main-Italic.ttf · assets/vendor/katex/fonts/
• KaTeX_Main-Italic.woff · assets/vendor/katex/fonts/
• KaTeX_Main-Italic.woff2 · assets/vendor/katex/fonts/
• KaTeX_Main-Regular.ttf · assets/vendor/katex/fonts/
• KaTeX_Main-Regular.woff · assets/vendor/katex/fonts/
• KaTeX_Main-Regular.woff2 · assets/vendor/katex/fonts/
• KaTeX_Math-BoldItalic.ttf · assets/vendor/katex/fonts/
• KaTeX_Math-BoldItalic.woff · assets/vendor/katex/fonts/
• KaTeX_Math-BoldItalic.woff2 · assets/vendor/katex/fonts/
• KaTeX_Math-Italic.ttf · assets/vendor/katex/fonts/
• KaTeX_Math-Italic.woff · assets/vendor/katex/fonts/
• KaTeX_Math-Italic.woff2 · assets/vendor/katex/fonts/
• KaTeX_SansSerif-Bold.ttf · assets/vendor/katex/fonts/
• KaTeX_SansSerif-Bold.woff · assets/vendor/katex/fonts/
• …and 84 more

SKILL.md (first lines)

# RedNote Render Skill

将技术稿件、论文、公式和图片整理为可连续阅读的小红书图片笔记。**正文也在图片里，并统一用 HTML 排版后逐页输出 PNG；非正文视觉内容才选择 HTML＋SVG 或 ImageGen。小红书配文只作摘要。** 读者仅按图片顺序阅读，就应能理解文章主线；HTML 和 SVG 是制作源文件。

## 选择模式

| 用户意图 | 模式 | 按需读取 |
|---|---|---|
| HTML＋SVG、代码排版、不用 ImageGen | **HTML 模式**：正文用 HTML；辅助解释图等非正文视觉用 HTML＋SVG | [HTML 流程](references/html-mode.md) |
| 生图模式、直接生图、使用 ImageGen | **生图模式**：正文仍用 HTML；辅助解释图等非正文视觉使用 ImageGen | [HTML 流程](references/html-mode.md)与[生图流程](references/image-mode.md) |

模式选择只决定非正文视觉的制作工具；沿用已有选择，未指定时默认 HTML 模式。“图片”“配图”“一图流”不等于调用 ImageGen。只有明确要求两套时才同时制作：共用同一套 HTML 正文页、页序和摘要，只替换非正文视觉，便于公平比较。

先按[图文组织规则](references/content-plan.md)组织正文页、辅助解释图和摘要，再读取需要的工具流程。默认采用 `academic` 技术风格，不进行主题推荐。参考截图默认用于字号、行距、段落间距和留白；字体沿用项目设置，不因参考图使用宋体就跟随换字。其他主题或字体仅在用户明确指定时采用。

## 共用准备

- 本仓库长期存放的博客先按[工作区规则](references/workspace.md)定位 `blogs/<分类>/<博客名>/`，运行 `scripts/prepare_blog.py`，在 `output/_work/` 的本次工作副本上处理稿件。检查完成后运行 `scripts/publish_blog.py`，将图片、`标题.txt`、`配文.txt` 和 `预览.html` 一起交付到 `output/<短名>/`，不让用户进入工作目录找发布材料。此约定适用于本仓库博客；插件在其他项目使用时沿用用户指定路径。
- 用户负责技术内容、论证顺序和公式取舍。先阅读实际提供的稿件、论文、链接及图片，核对方法全名、缩写、变量、条件和来源。只有名称或概念时查原论文、作者说明或官方资料；没有新材料时沿用当前主题；完全没有主题时选择一个有可靠来源、适合图解的技术问题并说明。
- 发现疑似技术错误或无法辨认的标签时单独指出，不静默修正或猜测。定性示意只表达资料支持的关系，不补造数值、曲线、变化速度或因果结论。
- **先整理可连续阅读的正文，再分页成图**：保留概念引入、解释、必要推导、条件和结论之间的连接，按段落讲清主线。精简重复内容，不把正文压成提纲、零散短句或只有辅助解释图的合集；也不把缺失正文转移到发布配文。原稿保留，只有明确要求时才逐字保留全文。
- 制图前整理每页的讲解目标、对应原文位置、对象与关系、必要标签、公式和颜色映射。明确图形解决哪个理解障碍，不为装饰添图。

## 画幅与密度

- 两种模式默认沿用本地 **3:4 竖幅，1080×1440**；HTML 按 CSS px 计，渲染 PNG 的默认 DPR 为 2，即 2160×2880 物理像素。DPR 提升清晰度，不增加内容容量。
- 正文页、辅助解释图和一图流使用相同外部画幅。图中局部关系可横向排列，最终图片保持竖幅。
- 正文页按连续段落组织，辅助图围绕一个关系。容量不足时在完整语义边界增页，不缩字、裁句、挤满卡片或拉长画布；也不靠大标题和过量空白取代正文。字号与间距按 [HTML 流程](references/html-mode.md)执行。
- HTML 自动分页只是排版工具，图片选点由讲解关系决定。超高代码、公式、表格或 SVG 需重新分组、合理换行或拆成完整子图；不能把变高的页面当成已符合 3:4。

## 技术视觉规范

技术材料默认采用浅暖米色背景、墨灰文字、清楚层级和精确轻量线条。强调色标识对象或关系，同篇保持一致，并用标签、线型或位置辅助辨认。不加装饰性渐变、发光、厚重阴影、卡通、长英文副标题、SEO 标签或重复结论栏。

| 用途 | 线条／强调色 | 区域浅填充 |
|---|---|---|
| 主体 | 钴蓝 `#3B5BDB` | `#EEF2FF` |
| 额外对象或关系（按需） | 青蓝 `#0891B2` | `#ECFEFF` |
| 对照 | 琥珀橙 `#D97706` | `#FFF7ED` |

默认背景为浅暖米色 `#F7F4ED`，呈现类似 Claude 界面的浅暖纸色观感，不使用纯白底；封面、正文、辅助图和普通容器底色保持一致，HTML 预览外部留白可用暖灰米色 `#EAE5DB`。用户明确指定其他背景时遵从指定。正文与公式主体 `#263238`，次要文字及必要标记 `#64748B`，非核心空间轮廓 `#B8C1CB`。通常使用两种强调色，需要区分第三种关系时再加入青蓝。浅灰不承载关键文字或核心几何关系。

按内容选择向量、长度、角度、投影、区域、轨迹、边界、对应比较、节点连线或简化曲线；不统一套流程图或向量三角形。通过计算或明确构造核对起终点、首尾连接、垂直、等长、投影和包含关系。区分更新前、临时状态和最终状态；对比使用一致尺度与观察条件。三维只保留必要线框，低维示意保留正在解释的性质。

## 检查与交付

两种模式都必须按顺序查看本次全部最终图片，先检查不读发布配文能否理解正文主线，再核对公式、条件、几何、标签、裁切和页码，并以手机显示尺寸检查可读性。成品图片、标题和配文中不出现“依据用户博客整理”“按用户要求生成”等制作或交付视角的说明；这类信息留在工作目录的交付记录，真实论文出处可按阅读需要注明。所有 HTML 页检查页面边界、数学排版和资源加载；不能只看网页或成功日志。

整篇图文交付有序的正文图片与辅助解释图、简短发布标题与配文，以及必要源文件。发布标题与封面标题直接点出主题或核心论点，不使用第一人称，避免夸张反转、故作悬念等标题党措辞；封面主标题应表达文章主张，不能仅写理解方法或辅助视角。配文采用作者第一人称，轻松口语化，像分享阅读笔记；仍只作摘要，不夸大或编造个人经历。标题、配文与最终图片放在同一交付目录；来源、页序和检查结果另记工作目录的交付说明。细则见[发布标题与配文](references/content-plan.md#发布标题与配文)。只请求辅助图或一图流时遵从该范围，不强行扩成整篇。未完成的生成或验证如实说明。

## 本地资源

- [渲染参数](references/params.md)：HTML／PNG 命令、主题、公式和 SVG 接口。
- [环境说明](references/environment.md)：仅在依赖、浏览器或字体缺失时读取。
- `scripts/rednote_render.py`：用 Markdown、KaTeX、HTML＋SVG 制作分页 PNG，可保存 HTML 源文件；不调用图像生成模型。
- `demos/academic.md`、`demos/academic-comparison.md`：已有 SVG 与 HTML 数学标签示例；可复用构造，不必复用全部文案和布局。
- `assets/themes/academic.css`：默认技术风格；HTML 排版的中文优先微软雅黑，生图按 prompt 指定宋体／serif。其他主题只作为显式可选资源保留，不默认读取。

From highting/rednote-skill, MIT.