mj-adapt

name: mj-adapt description: MakerJackie 多平台内容适配工具：将已完成的文章适配到不同发布平台，使用极简硬核风格排版，比如微信公众号，小红书，推特等平台优化排版。核心场景是「一篇文章，多平台发布」的内容分发工作流。

MakerJackie Adapt (mj-adapt)

将已完成的文章适配到多个发布平台，自动生成各平台所需的格式和素材（默认生成全部平台）。

核心使用场景

触发时机：用户已经写好一篇文章，需要将其发布到多个平台（微信公众号、小红书、知乎、推特等）。

核心任务：根据不同平台的要求，生成对应的格式和素材：

微信公众号：生成特殊格式的 HTML（内联样式，符合公众号编辑器要求） + 微信公众号首图 + 文章标题和描述。
标题与封面候选：默认生成 5 个 AI 标题候选、3 个公众号首图方向和 3 张封面图；用户未选择时才选一个作为 primary，但候选文件必须保留。
小红书：生成图文素材（1080x1350px 竖版图片，4:5 比例）
推特：生成简短版本的介绍（140 字以内）

Quick Workflow

Step 1: 接收已完成的文章

接收 Markdown 格式的文章内容或接收文章文件路径

🚨 核心原则（最高优先级）：

严禁修改原文内容：不得改写、润色、压缩、重组原文的任何段落、句子或用词。
严禁删减内容：必须保留原文的完整性，不得因为"适配平台"而删减段落。
定位是排版工具：本 Skill 只负责「格式转换 + 视觉排版」，不是「内容编辑器」。

平台适配规则：

微信公众号：100% 保留原文，只做 Markdown → HTML 转换 + 应用排版样式。
小红书图文（长文截图模式）：
- 必须 100% 保留原文，逐字复制，不得改写、压缩、重组或提炼任何内容。
- 禁用杂志式排版：不得使用封面页、总览页、卡片网格、数据看板、大号独立标题页等任何杂志式设计。
- 内容样式必须使用内联样式（与微信公众号 HTML 完全相同的方式）；只允许 <style> 放页面 reset、body 和 .slide 固定尺寸，不得引用 xhs-base.css。
- 视觉风格与微信公众号保持一致，但字号必须适配图片阅读（38px 正文、1.55 行高、H2 52px/H3 44px/H4 38px）。
- 非末页必须尽量装满，不能出现一页只有几段文字、下半屏大面积空白的图。
- 本质上就是"把文章截图成长图"，而不是"把文章设计成幻灯片"。
- 如果用户明确要求"精简版"或"Hook 版"，才可以提炼核心观点做二次创作。

Step 2: 识别目标平台

默认生成：全部平台素材，除非用户说“只生成微信公众号素材”，则只生成微信公众号相关素材

Step 3: 生成微信公众号 HTML

解析 Markdown 结构
应用 MakerJackie 排版样式（黑白配色、粗边框）
生成符合微信公众号要求的 HTML（内联样式）

字体规范（重要）：

正文字号：16px（统一正文字号，保持舒适阅读）
行高：1.65（紧凑舒适，符合公众号阅读习惯）
标题字号：
- H2: 20px（加粗）
- H3: 17px（加粗）
- H4: 15px（加粗）
字体族：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

核心调整：

正文开头严禁重复展示文章标题框（用户已通过标题点击进入，无需冗余）。
公众号首图：在 HTML 顶部放置 primary 封面图 <img src="{date}-{slug}-cover.png">，尺寸 900x383，3px 黑色边框。此图片由 Step 4 渲染生成，另外保留候选封面图供发布前挑选。

组件使用建议：

卡片组件（方块边框）：应谨慎且克制地使用。仅用于强调核心观点、Tips 或独立的小样。
灰色引用样式：用于呈现次要信息、补充说明或背景知识，使用灰色字体和浅色左边框。

Step 4: 生成标题与封面候选 (Titles & Covers)

风格统一为「MakerJackie 极简硬核风」：白色背景、黑色粗边框、高对比度、Monospace 字体。

默认产出

除非用户明确说“只要一个标题/一张封面”，否则必须先生成候选，再确定 primary：

output/{date}-{slug}/{date}-{slug}-title-cover-options.md
- 5 个 AI 标题候选，覆盖不同角度：价值直给、冲突观点、项目发布、教程承诺、个人叙事。
- 3 个公众号首图方向，分别说明主文案、副文案、视觉重心和适用场景。
output/{date}-{slug}/{date}-{slug}-cover-a.html
output/{date}-{slug}/{date}-{slug}-cover-b.html
output/{date}-{slug}/{date}-{slug}-cover-c.html
对应渲染出：
- output/{date}-{slug}/{date}-{slug}-cover-a.png
- output/{date}-{slug}/{date}-{slug}-cover-b.png
- output/{date}-{slug}/{date}-{slug}-cover-c.png
如果用户没有选择，AI 选择最贴近文章调性的一个复制为 primary：
- output/{date}-{slug}/{date}-{slug}-cover.html
- output/{date}-{slug}/{date}-{slug}-cover.png

候选标题和封面只用于发布素材选择，不得反向改写文章正文。

渲染流程

AI 根据下方设计规范生成 3 个独立 HTML 候选：output/{date}-{slug}/{date}-{slug}-cover-a.html、cover-b.html、cover-c.html，每个包含一个 .cover 元素（900x383px，白底 + 黑边框 + 标题/日期/品牌）。

运行 generate-cover.js 将 .cover 截图成 PNG：

node generate-cover.js output/{date}-{slug}/{date}-{slug}-cover-a.html output/{date}-{slug}/
node generate-cover.js output/{date}-{slug}/{date}-{slug}-cover-b.html output/{date}-{slug}/
node generate-cover.js output/{date}-{slug}/{date}-{slug}-cover-c.html output/{date}-{slug}/

输出候选 PNG（1800x766px，2x 高清）。
将最终选中的候选复制为 output/{date}-{slug}/{date}-{slug}-cover.png，微信公众号 HTML 中通过 <img src="{date}-{slug}-cover.png"> 引用此 primary 图片。

1. 微信公众号首图 (900x383px)

视觉结构：标准 2.35:1 比例。白色背景 + 3px 黑色内边框。
文字内容：
- 左上角：{{DATE}} (YYYY-MM-DD，字号 14px)。
- 正中央：文章主标题（加粗，字号 72-96px，醒目且吸引眼球）。
- 右下角：{{BRAND_IDENTIFIER}} (字号 14px)。
字体样式：标题使用黑色粗体（font-weight: 900），直抒胸臆，简洁有力。保持视觉上的平衡与留白，避免文字过于拥挤。

2. 微信公众号次图 (500x500px)

视觉结构：1:1 比例。纯白背景 + 3px 黑色边框。
文字内容：
- 居中：精炼的核心关键词或文章标题。
- 底部：{{BRAND_IDENTIFIER}}。
使用场景：用于公众号推文列表中的正方形缩略图。

3. 小红书图文（长文截图模式）

核心目标：将文章渲染为保留原文排版的多张连续截图。
尺寸：1080x1350px (4:5 比例)，白色背景。
排版规则：
- ⚠️ 小红书字号不等于微信公众号字号：图片在手机上是全屏宽显示，16px 渲染出来只有 ~6px 等效，完全看不清。
- 正文字号：38px，行高 1.55。
- H2 字号：52px，H3：44px，H4：38px。
- 不使用独立封面页，不追求"Hook 吸引点击"风格。
- 优先在段落、列表项、引用块、代码块边界分页；H2 章节边界只是偏好，不是硬规则。
- 非末页正文内容底部应达到页面高度的 72% 以上，或底部空白不超过 320px；否则必须从下一页继续合并内容。
- 保留原文所有段落、列表、引用、代码块等元素。
- 不做文案压缩、不做内容重组、不添加卡片/总览等杂志式组件。

Step 5: 生成小红书长文截图

视觉基调：白色背景、正文字号 38px（⚠️ 小红书字号远大于微信公众号，16px 在小红书全屏图片上完全看不清）、行高 1.55、黑白配色。
⛔ 最重要的规则：100% 保留原文，逐字复制，不做任何改动！
- 原文的每一个段落、列表项、引用、代码块都必须保留。
- 不得添加原文没有的过渡句、总结、评论或"小标题"。
- 不得将列表改成卡片网格、或将文本重组为杂志式版面。
分页方式：
- 每个 .slide 为一页独立图片，第一页直接从文章内容开始（无须独立封面页）。
- 不要机械地"一个 H2 一页"。如果某个 H2 后内容很短，必须继续放入下一段或下一个 H2 的开头，直到非末页内容密度合格。
- 只在段落、列表项、引用块、代码块边界切页；不得把一句话切成两页。
- 非末页内容填充率目标：72%-92%。低于 72% 或底部正文空白超过 320px，视为失败。
- 不得通过拉大行距、拉大段距、放大字体、添加装饰元素来"填满"页面。
- 首图直接从文章内容开始（无须独立封面页），标题和正文开头即可。
- 最后一页包含结尾 + CTA + 作者信息。
样式规则：
- 正文内容必须使用内联样式（inline styles），与微信公众号 HTML 相同方式。
- <style> 块只允许定义 reset、body 和 .slide 固定尺寸；不得在 <style> 中定义正文排版样式，不得引用 xhs-base.css。
- 图片尺寸：固定 1080x1350px（4:5 竖版），白色背景，每页必须精确等于这个尺寸（不能使用 min-height，否则内容不满时会产出非标准尺寸图片）。
- 每页必须包含正文容器：<div data-role="content">...</div>。页码、作者标识等页脚放入 data-role="footer" 或 data-role="page-number"，不要混入正文容器。
生成后必须自查：
- 逐段对比原文和生成的 .slide 内容，确认无修改、无遗漏。
- 如果发现任何改写或压缩，必须重写直到 100% 一致。
- 逐页检查非末页密度：如果像截图一样下半页空白，必须重新分页，而不是直接交付。

Step 6: 生成 `xhs-slides.html`

AI 直接生成包含所有 .slide 页面的 xhs-slides.html。
职责拆分：
- AI 负责：根据原文生成长文截图风格 HTML，按自然边界和内容密度拆分 .slide 页面，逐字保留原文完整内容，使用内联样式（与微信公众号相同风格）。
- generate-xhs-slides.js 负责：将 .slide 截图成统一规格的 PNG。
关键约束（必须遵守）：
- 页面尺寸固定 1080x1350（4:5 竖版），白底，正文字号 38px。使用 height: 1350px 而非 min-height。
- 正文内容必须使用内联样式（与微信公众号 HTML 相同方式）；<style> 仅用于 reset、body 和 .slide 固定尺寸，不得引用 xhs-base.css。
- 每页正文必须包在 <div data-role="content">...</div> 中；页脚、页码用 data-role="footer" 或 data-role="page-number"。
- 非末页不得稀疏：填充率低于 72% 或底部正文空白超过 320px 时，必须合并下一页内容重新分页。
- 不得做任何文案压缩、改写或内容重组。
- 禁用杂志式组件：无封面页、总览页、卡片网格、数据看板、大号标题页。
- 本质上就是"将文章按章节截图"，样式只是为了阅读舒适，不是重新设计版面。
HTML 工作流详细规范见 XHS_HTML_SPEC.md

Step 7: 渲染 `xhs-slides.html`

输入：AI 生成的 xhs-slides.html
输出：
- xhs-01-*.html, xhs-02-*.html ... 调试用 HTML
- {date}-{slug}-1.png, {date}-{slug}-2.png ... 最终交付图片
导出规格固定为 1080x1350 视口，deviceScaleFactor=2，最终 PNG 为 2160x2700。
渲染脚本会检查 overflow 和非末页密度；如果报 Underfilled non-final slide detected，必须重新合并分页后再渲染。只有调试旧样例时才使用 --allow-underfilled。
注意：fixtures/ 目录中的旧示例文件为杂志风格（已废弃），仅用于渲染器回归测试，不得参考其内容和布局。

命令示例：

# 实际使用
node generate-xhs-slides.js output/2026-05-12-article-title.xhs-slides.html output/

# 回归测试（使用仓库内 fixture）
node generate-xhs-slides.js fixtures/2026-04-20-ai-subscription-bill-1785-monthly.xhs-slides.html ../../output/regression

Step 8: 生成社交媒体短内容 (Social Media Short-form)

根据文章内容自动适配社交媒体平台，将3000-5000字长文浓缩成200-500字的短内容。

3种切入角度

A. 金句开头（观点类） 第一句话是有冲击力的观点，适合深度思考、行业洞察类文章。

B. 数据/成果冲击（测试/案例类） 第一句话抛出令人信服的数据或成果，适合评测、案例拆解类文章。

C. 价值主张直给（工具/方法类） 第一句话直接说明是什么、有什么用，适合教程、工具推荐类文章。

标准结构（200-500字）

1. 开头（1-2句，30-50字）
   - 金句/数据/价值主张
2. 展开（3-5句或列表，100-300字）
   - 具体细节/数字
   - 个人经历/真实案例
3. 结尾（1句，20-30字）
   - 互动引导（评论区见/迟点分享）
   - @提及（如涉及产品/人物）

风格要点

口语化、对话感
短句为主（15-25字）
具体数字（"3个"、"半年"、"100%"）
真实细节（时间线、工具名）
无套话和AI腔

Step 9: 配图设计提案（可选）

配图生成前，先向用户展示设计方向选择，确认后再执行。

配图需求确认

类型	说明	图片数量
A. 仅封面	头条封面图	1张
B. 正文配图	章节配图，辅助阅读理解	3-8张
C. 全套配图	封面 + 正文全部	4-10张

配图数量建议

文章长度	推荐配图数	包含
< 1500字	2-3张	封面 + 1-2张正文
1500-3000字	4-6张	封面 + 每个核心章节1张
3000-5000字	6-8张	封面 + 章节图 + 信息图
> 5000字	8-10张	不超过10张，避免过度打断

风格推荐

根据文章类型自动推荐风格，向用户展示选项并等待确认：

文章类型	推荐风格
AI工具评测	极简专业 / 编辑杂志 / 数据信息图
技术教程	极简专业 / 手绘白板 / 编辑杂志
产品发布	编辑杂志 / 大字报 / 极简专业
深度分析	编辑杂志 / 数据信息图 / 极简专业
个人故事	温暖叙事 / 编辑杂志
行业观察	大字报 / 编辑杂志 / 数据信息图

品牌与策略规范 (Branding & Strategy)

1. 默认品牌逻辑

默认使用 MakerJackie 品牌（包括文案中的“作者：Maker Jackie”、网站链接 01mvp.com 等）。
01MVP 描述：01mvp.com 专注于 AI 实战教程，涵盖从灵感到上线、教你如何快速做一个 MVP，以及 AI 工具系列教程和场景化落地案例。
除非用户明确指示“使用 01MVP 品牌”，否则一律保持 MakerJackie 风格。

2. 场景化 CTA 适配

根据文章类型自动适配 CTA (Call to Action) 区域：

实战教程：{{CTA_LABEL}}: "GET THE CODE", {{CTA_CONTENT}}: "详细教程已上传至 01mvp.com，点击阅读原文即可获取完整实战手册。"
深度思考：{{CTA_LABEL}}: "SHARE YOUR THOUGHTS", {{CTA_CONTENT}}: "实战派不只是听众，欢迎在评论区分享你的落地心得。"
工具推荐：{{CTA_LABEL}}: "TRY IT OUT", {{CTA_CONTENT}}: "工具上手指南已在 01mvp.com 更新，点击阅读原文立即体验。"

样式规范

核心设计原则

Neo-Brutalism 硬核极简黑白
白色底色：干净、简洁的阅读体验
黑白配色：强烈的视觉对比
清晰层次：通过边框和间距区分内容块
Monospace 标签：技术感的小标题和元信息
匹配合适的风格，比如代码块，不需要局限于黑白色，而是正常的黑白灰配色。

颜色系统

背景色：#ffffff (白色)
主文字：#000000 (黑色)
正文：#111111 (深灰)
边框：3px solid #000000 (黑色粗边框)
强调背景：#000000 (黑底白字)

字体系统

标签/元信息：Menlo, Monaco, Consolas, 'Courier New', monospace
- 12px, 700 weight, 1.6 line-height, 1px letter-spacing
大标题：30px, 900 weight, 1.35 line-height
章节标题：25px, 900 weight, 1.45 line-height
强调文字：18-20px, 700 weight, 1.65 line-height
正文：16px, 400 weight, 1.65 line-height
卡片文字：16px, 400 weight, 1.65 line-height

输出位置

默认是仓库根目录的 output/{date}-{slug}/ 目录，slug 是文章标题的 URL 友好版本。

默认应包含：

{date}-{slug}-title-cover-options.md：5 个标题候选 + 3 个封面方向。
{date}-{slug}-cover-a.png、{date}-{slug}-cover-b.png、{date}-{slug}-cover-c.png：公众号首图候选。
{date}-{slug}-cover.png：当前 primary 公众号首图。
{date}-{slug}-wechat.html：公众号正文 HTML。

布局组件

1. 灰色引用 (Secondary Text)

- 4px 浅灰色左边框 (#f0f0f0)
- 15px padding-left/right
- 灰色字体 (#888888)
- 用于次要信息、补充说明

2. 章节标题

- 顶部 3px 黑色边框
- 14px padding-top
- 包含：章节编号 + 标题

3. 卡片组件

- 2px 黑色边框
- 16px padding
- 白色背景
- 包含：小标签 + 内容

4. 强调引用

- 黑色背景
- 白色文字
- 16-18px padding
- 用于重要观点

5. 页脚 (Jackie 个人版)

- 2px 黑色边框包裹的全卡片
- 包含：Jackie 头像、简介
- 包含：CTA 引导至 01mvp.com
- 包含：联系邮箱

间距系统

组件间距：24-32px
段落间距：18px
内部 padding：16-18px
小间距：10-12px

微信公众号 HTML 要求

必须遵守的规则

内联样式：所有样式必须写在 style 属性中
不支持的 CSS：避免使用 position: fixed/sticky, float, transform 等
盒模型：使用 box-sizing: border-box
响应式：使用 max-width 而非固定宽度
图片：使用相对路径或 CDN 链接

容器结构

<section style="margin:0;padding:24px 0;background-color:#ffffff;">
  <section style="margin:0 auto;padding:0;max-width:677px;box-sizing:border-box;">
    <!-- 内容区域 -->
  </section>
</section>

图片生成规范

小红书图片尺寸

统一使用：1080x1350px (4:5 比例)
默认导出：2160x2700px PNG（1080x1350 视口下 2x 高清截图）

分页策略

第一页：直接从文章开头内容开始（无须独立封面页），包含标题+正文开头
后续每页：优先按自然段、列表项、引用块、代码块边界分页；H2 章节边界只是偏好
最后一页：结尾内容 + CTA + 作者信息
非末页：内容填充率必须达到 72% 以上，或底部正文空白不超过 320px；不足时合并下一页内容

图片样式

与微信公众号保持一致的视觉风格，但小红书使用图片阅读字号（38px 正文、1.55 行高、H2 52px）
不做杂志式重排版（无封面页、总览、卡片网格、大号独立标题页）
正文内容必须使用内联样式；<style> 仅用于 reset、body 和 .slide 固定尺寸，不引用 xhs-base.css
白色背景，保留必要边距；非末页不得出现下半页大面积空白

输出文件命名

HTML 文件

格式：{date}-{slug}-wechat.html 示例：2026-04-09-why-i-make-ai-tutorials-wechat.html

图片文件

格式：{date}-{slug}-{number}.png 示例：

2026-04-09-why-i-make-ai-tutorials-1.png
2026-04-09-why-i-make-ai-tutorials-2.png

标题与封面候选文件

示例：

2026-04-09-why-i-make-ai-tutorials-title-cover-options.md
2026-04-09-why-i-make-ai-tutorials-cover-a.png
2026-04-09-why-i-make-ai-tutorials-cover-b.png
2026-04-09-why-i-make-ai-tutorials-cover-c.png
2026-04-09-why-i-make-ai-tutorials-cover.png

使用示例

示例 1：多平台发布

用户：我写好了一篇文章，需要发到公众号和小红书
[提供 Markdown 内容]

输出：
- 2026-04-20-article-title-wechat.html （复制到公众号编辑器）
- 2026-04-20-article-title-1.png （小红书第 1 页）
- 2026-04-20-article-title-2.png （小红书第 2 页）
- ...

示例 2：只生成公众号格式

用户：把这篇文章转成公众号格式
[提供文章文件路径或内容]

输出：
- 2026-04-20-article-wechat.html

示例 3：从文件批量适配

用户：把 article.md 适配到各个平台

输出：
- 2026-04-20-article-wechat.html （公众号）
- 2026-04-20-article-1.png （小红书图1）
- 2026-04-20-article-2.png （小红书图2）
- ...

质量检查清单

生成内容前，确保：

HTML 使用内联样式
颜色系统正确（黑白为主）
字体和字号符合规范
边框粗细正确（3px 主边框，2px 卡片边框）
间距系统一致
响应式布局（max-width: 677px）
图片尺寸符合小红书要求
文件命名规范
默认生成 5 个标题候选、3 个封面方向和 3 张公众号首图候选；除非用户明确只要一个
已选定或复制出 primary 封面 {date}-{slug}-cover.png
小红书 xhs-slides.html：原文与生成内容逐段对比，确认 100% 一致（无改写、无压缩、无遗漏）
小红书 xhs-slides.html：未使用杂志式组件（封面页、总览页、卡片网格、数据看板）
小红书 xhs-slides.html：正文内容未使用 <style> 块或 xhs-base.css，全部内联样式
小红书 xhs-slides.html：非末页没有大面积空白，填充率 >= 72% 或底部正文空白 <= 320px

参考资源

样式模板：assets/wechat-template.html
小红书生成器：generate-xhs-slides.js
小红书 HTML 工作流：XHS_HTML_SPEC.md
小红书旧基础样式：assets/xhs-base.css（已废弃，仅用于旧 fixture 参考，不得在新生成中使用）