MakerJackie Adapt (mj-adapt)

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

核心使用场景

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

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

微信公众号：生成特殊格式的 HTML（内联样式，符合公众号编辑器要求） + 微信公众号首图 + 文章标题和描述。
小红书：生成图文素材（1080x1350px 图片）
推特：生成简短版本的介绍（140 字以内）

Quick Workflow

Step 1: 接收已完成的文章

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

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

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

平台适配规则：

微信公众号：100% 保留原文，只做 Markdown → HTML 转换 + 应用排版样式。
小红书图文：
- 默认版本：保留原文完整内容，只做视觉排版（分页、加边框、调字号）。
- 如果用户明确要求"精简版"或"Hook 版"，才可以提炼核心观点做二次创作。
对结构化内容（账单、清单、教程拆解、工具盘点），小红书优先生成多页 xhs-slides.html，不要直接把正文大段截图塞进图片。

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 顶部放置 900x383 封面图（{{COVER_IMAGE}}），3px 黑色边框。

组件使用建议：

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

Step 4: 生成封面图 (Covers)

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

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. 小红书图文 (1242x1660px)

核心目标：吸引点击（Hook）。严禁直接展示正文段落。
视觉结构：标准 3:4 比例。
- 统一风格：纯白背景 + 黑色粗体字 + 3px 黑色内边框。
首页布局 (Hook)：
- 顶部左侧：{{DATE}} + {{CATEGORY}}。
- 中部：极其简练、有冲击力的标题（字号 100px+）。
- 底部居中：{{BRAND_IDENTIFIER}}。
排版哲学 (极简留白)：
- 不强制填满：不再追求铺满全屏，而是拥抱「高级留白」。
- 内容居中：当内容较少时，将核心内容块垂直居中放置，而非堆砌在顶部或强行拉大。
- 视觉焦点：通过 3px 粗边框包裹核心观点，使其在留白中更显突出。
- 禁用整页交替黑底：除非是明确的收尾 CTA，不要使用黑白整页背景交替。默认全篇白底，仅用黑色边框、标题和局部强调做对比。

Step 5: 生成小红书内容图 (1242x1660px)

视觉基调：全篇统一使用白色背景，不要黑白色背景交替。（黑色背景一般仅用于尾图 CTA）
分段与布局：
- 通常一个 H2 章节一张图。
- 垂直对齐：内容默认在画面中心或黄金分割点分布，底部保留自然留白，营造「杂志感」。
- 组件复用：使用卡片组件（方块边框）包裹核心 Step 或结论。
- 数据型内容优先重组：遇到账单、价格对比、工具清单，不要简单截图原段落；改成「封面 / 总览 / 分类卡片 / 解释 / 结尾」的 slide 结构。
- 自动分页：单页容纳不下时必须分页，不允许卡片被裁切。
固定结尾页：优先复用同一套 footer / CTA 语言，不要每次重造视觉系统。

Step 6: 让 AI 先生成 `xhs-slides.html`

小红书的“智能排版”应该来自 AI，而不是写死在脚本里。
正确职责拆分：
- AI 负责读 Markdown，判断该做几页、每页怎么布局、文案怎么压缩、哪些内容该拆页。
- generate-xhs-slides.js 只负责把 AI 生成的 HTML slides 截图成统一规格的 PNG。
HTML 工作流说明见：
- XHS_HTML_SPEC.md
推荐输出：
- output/{date}-{slug}/xhs-slides.html
页面约定：
- 每一页都是一个 .slide
- AI 可以自由组合布局，但必须遵守固定画布和不溢出的约束

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。
仓库内回归样例：
- fixtures/2026-04-20-ai-subscription-bill-1785-monthly.xhs-slides.html
命令：

node generate-xhs-slides.js fixtures/2026-04-20-ai-subscription-bill-1785-monthly.xhs-slides.html ../../output/2026-04-20-ai-subscription-bill-1785-monthly

Step 8: 生成推特 (Twitter/X) 内容

根据文章深度自动选择模式：

短文模式：生成 140 字以内的精炼介绍 + 链接。
长推模式 (Thread)：
- 将文章核心观点拆分为 1/n, 2/n... 格式。
- 第一推：引人入胜的标题。
- 中间推：每个主要章节提取一个核心点（Hook + 内容）。
- 最后一推：CTA (如「点击阅读全文」) + {{BRAND_IDENTIFIER}}。

品牌与策略规范 (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 友好版本。

布局组件

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 比例)
或：1080x1920px (9:16 比例)
最小宽度：1080px
默认导出：2160x2700px PNG（1080x1350 视口下 2x 高清截图）

分段策略

标题 → 封面图 (1.png)
每个主要章节 → 独立图片 (2.png, 3.png...)
结尾 CTA + 作者信息 → 最后一张

图片样式

保持与 HTML 相同的视觉风格
适当增大字号以适应图片阅读
保持足够的边距和留白
默认使用白底 + 黑色粗边框 + Monospace 顶部路径 + 金额/分类卡片
不允许整页黑白背景交替导致视觉节奏漂移

输出文件命名

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

使用示例

示例 1：多平台发布

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

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

示例 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）
图片尺寸符合小红书要求
文件命名规范

参考资源

样式模板：assets/wechat-template.html
小红书生成器：generate-xhs-slides.js
小红书 HTML 工作流：XHS_HTML_SPEC.md
小红书基础样式：assets/xhs-base.css
小红书尾图模板：assets/xhs-ending-template.html

mj-adapt