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：

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

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

渲染流程

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

3. 输出候选 PNG（1800x766px，2x 高清）。
4. 将最终选中的候选复制为 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 & CTA)

1. 固定主次关系

• Maker Jackie 是人、信任和内容源头。用于作者署名、账号身份、个人故事、AI 实践和独立开发记录。
• 01MVP 是产品、课程和付费转化入口。用于承接“我也想系统学习 AI 产品实战”的读者。
• 标准关系句：01MVP 是 Maker Jackie 做的 AI 产品实战教程。
• 不要把 makerjackie.com / 01mvp.com 固定并列塞进每篇内容。每篇文章只给一个主要动作：关注 Jackie，或者去 01mvp.com。

2. 场景化 CTA 适配

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

• AI 教程 / 产品实战 / 独立开发复盘 / 工具教程：主推 01MVP，轻带 Maker Jackie。
  • {{CTA_LABEL}}: ABOUT 01MVP
  • {{CTA_CONTENT}}: 01MVP 是 Maker Jackie 整理的 AI 产品实战手册，记录如何从一个想法出发，借助 AI 做出可上线的产品，并找到第一个真实用户。如果你正在用 AI 做产品，欢迎来 01mvp.com 从第一章开始。
• 个人成长 / 思考 / 自媒体 / 生活记录：主推 Maker Jackie，轻带 01MVP。
  • {{CTA_LABEL}}: ABOUT MAKER JACKIE
  • {{CTA_CONTENT}}: 我是 Jackie，独立开发者，01MVP 作者。这里记录 AI 实践、独立开发、个人成长和一些阶段性的答案。系统化的 AI 产品实战教程，我放在 01mvp.com。
• 平台短内容：公众号、小红书、X、B 站每条内容只保留一个转化口。技术教程给 01MVP；个人思考给 Maker Jackie。

样式规范

核心设计原则

• 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，根据文章意图指向 Maker Jackie 或 01MVP
- 包含：联系邮箱或账号 ID

间距系统

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

微信公众号 HTML 要求

必须遵守的规则

1. 内联样式：所有样式必须写在 style 属性中
2. 不支持的 CSS：避免使用 position: fixed/sticky, float, transform 等
3. 盒模型：使用 box-sizing: border-box
4. 响应式：使用 max-width 而非固定宽度
5. 图片：使用相对路径或 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 高清截图）

分页策略

1. 第一页：直接从文章开头内容开始（无须独立封面页），包含标题+正文开头
2. 后续每页：优先按自然段、列表项、引用块、代码块边界分页；H2 章节边界只是偏好
3. 最后一页：结尾内容 + 一个主 CTA + 作者信息
4. 非末页：内容填充率必须达到 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
• 公众号 HTML 和小红书 HTML 中没有未替换的 {{PLACEHOLDER}}。

参考资源

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