选择标题（3 选 1）
小红书图文、公众号长文、Live Photo 排版三合一，写完直接发
同一份 Markdown 发三个平台：这款 554 Star 工具把排版压进一个页面
不写一行后端，纯前端生成 iPhone 实况照片并打包 .pvt
小红书图文、公众号长文、Live Photo 排版三合一，写完直接发
一、开篇：一份 Markdown，发三个平台，别再开五个工具了
写一篇内容，真正消耗时间的往往不是码字，而是「写完之后」。把 Markdown 拆成小红书 9 图卡片、给公众号贴一遍样式、再把视频做成 iPhone 实况照片——多数创作者要在三四个工具之间来回切换，复制粘贴、重新裁图、重新传视频、重新选封面。一个项目做下来，正文没花多少时间，排版倒耗了两三个小时。
「写了就发 / Write Then Publish」把这条最后一公里收进一个页面：一份正文直接切换为图文卡片、公众号长文、可下载图片和 Live Photo 排版，导出前在同一工作区全部预览完毕。这个项目在 GitHub 拿到 554 Stars，纯前端 HTML/CSS/JS 实现，不写后端就能完成 1728×2304 PNG 卡片、整组 ZIP 和 .pvt 实况包。
二、项目定位：写完之后的那一段路，它替你走完
「写了就发」不替你生成内容，专注解决分版、排版、素材处理、多格式复用和发布前确认。它的核心特性可以概括为四个关键词：本地优先（浏览器本地合成 Live Photo，原视频不出设备）、多格式同源（同一份正文切换为图文卡片与公众号长文，正文不重写）、Obsidian 双向同步（读取 ![[图片.png]] 引用，能写回时写回，不能写回时降级为 ZIP）、格式覆盖广（标准 PNG、批量 ZIP、长图、.pvt 实况包全打通）。
三、核心功能深度解析
1. 同一份正文，两种输出
左侧编辑框写一次 Markdown，右侧预览就能在「图文卡片」与「公众号长文」之间切换，切换只改变输出形式，不会动正文。图文卡片模式按 1728×2304 PNG 分页，默认正文 34 号，支持标题、引用、强调色、头像与图片混排；公众号长文模式保留 Markdown 结构，可调整主题、字体、字号、主题色，导出 PNG 长图、复制富文本，或在 macOS 本地版同步到公众号草稿箱。同步只创建或更新草稿，不会直接群发。
2. 图片即传即排
上传、粘贴、拖放、批量导入都支持；图片可在预览区直接拖动位置、调整对齐和大小。裁剪比例覆盖自由、原图、1:1、4:3、16:9、3:4、9:16，且只裁切、不拉伸；高清原图会重绘，不会因为叠加进卡片就被压缩。双图拼图是一个亮点：在预览里点图片右缘的 + 就能左右并排拼一张，弹窗内可改整体比例（16:9 / 3:2 / 4:3 / 1:1）、左右互换、分别裁剪或单独删除，弹窗按草稿处理，关闭即回滚。
3. Live Photo 浏览器本地生成
支持 WebCodecs 的浏览器会在页面内完成画面合成、封面帧、Apple 配对标记与 .pvt 打包，原视频不出设备。编辑器把时长（3 / 5 / 8 秒）、倍速（原速 / 1.5× / 2× / 3×）、画面比例、片段选择与声音开关全放在同一画面内：倍速越高，从原片取用的片段越长，成片时长始终跟在文案里显示；素材长度放不下时该档位置灰划掉，提示还差多少秒，当前选择不会被改动。导出后 ZIP 按页码平铺命名，实况包与普通图片同级并列，不会被嵌套进子文件夹。
4. Obsidian 双向同步与降级
读取 ![[图片.png]]、![[附件/图片.png]] 与标准 Markdown 图片引用；有目录写入权限时保存到 写了就发/ 和 写了就发/附件/，权限不足时明确降级为 Markdown + 附件 ZIP，不会偷偷失败。Vault 需用户主动授权，在线页面不会把整个目录上传到项目服务器。
四、技术亮点与性能数据
技术栈用的是原生 HTML/CSS/JS + Canvas 2D + WebCodecs + mp4box.js + mp4-muxer + html2canvas + JSZip，纯前端实现整套排版与 Live Photo 生成，不依赖任何后端服务。账号与云端兜底通过 Supabase + Row Level Security（按 auth.uid() 隔离）补齐。
性能数据来自实际页面：图文卡片模式可在全屏下左侧保留完整编辑框、右侧三列并排显示 9 张卡片（1728×2304 PNG）；批量预览面板明确列出 1 张实况照片 + 12 张高清图片，全部按页序打包。H.264 视频因为要叠进卡片必须重新编码，音轨在兼容时原样搬运。
五、适用场景与人群
- 小红书重度创作者：一份 Markdown 直接拆 9 图卡片，封面、强调色、头像在同一页面配齐，导出 PNG 或整组 ZIP。
- 公众号 + 小红书双发作者：同一篇长文，左侧编辑、右侧切换预览，公众号复制富文本，小红书导出卡片组，省掉复制粘贴和二次排版。
- Obsidian 写作 + 多平台分发用户：在 Vault 里写完，直接读取 Wiki 引用同步素材到工具，能写回 Vault 就写回，不能就拿 ZIP。
- Live Photo 视频作者：3 / 5 / 8 秒时长 + 倍速编辑在浏览器里完成，本地生成
.pvt，隔空投送到 iPhone 长按即可还原动态效果。
不适合谁：需要自动写正文、想完全离线运行、或者需要 SaaS 多坐席协作的团队（许可证明确禁止商业用途）。
六、竞品对比
| 能力 | 写了就发 | 通用 Markdown 排版工具 | 独立 Live Photo 生成器 |
|---|---|---|---|
| 小红书卡片分页 | ✅ 内置 1728×2304 标准 | ❌ 多需手动切图 | ❌ |
| 公众号富文本导出 | ✅ 含主题/字体设置 | 部分支持 | ❌ |
| Live Photo 浏览器本地生成 | ✅ WebCodecs 原片不出设备 | ❌ | 多需上传云端 |
| 倍速 + 片段选择 | ✅ 3 档时长 + 4 档倍速 | ❌ | 多数不支持 |
| Obsidian 双向同步 | ✅ 写回失败明确降级 ZIP | ❌ | ❌ |
| 纯前端零后端 | ✅ Vanilla HTML/CSS/JS | 多数需要框架 | ❌ |
相较通用工具，「写了就发」把小红书卡片、公众号长文与 Live Photo 三件事压在同一个工作区；相较独立 Live Photo 生成器，它把原视频合成留在浏览器本地，并通过 .pvt 整包保证 Apple 配对信息不丢。
七、如何快速上手
在线体验直接访问 fawen.fun。本地运行：
git clone https://github.com/fxyadela/write-then-publish.git
cd write-then-publish
npm start
打开 http://127.0.0.1:5173/，保留终端窗口即可；只需基础编辑和图片导出时，双击 index.html 也能直接用。Mac 用户双击 启动写了就发.command 即可启动；想要无账号本地版，用 启动写了就发本地版.command，数据只留在当前 Mac 的浏览器存储中。
最小可用示例：左侧粘贴 Markdown，右侧选「图文卡片」预览，点插入图片按钮上传或拖入图片，调整裁剪比例和位置后点导出 PNG。接入 Obsidian 时在设置里授权 Vault 目录，能写回即写回，写不回去会自动改发 ZIP，不会人为变更。
八、总结与行动建议
「写了就发」解决的不是「怎么写」，而是「写完之后怎么少折腾」。一份 Markdown、同一页面完成图文卡片、公众号长文、可下载图片和 Live Photo 排版，原视频不出设备，导出前全部预览完毕。对于同时维护小红书 + 公众号的独立创作者，这是把最后一公里收进一个工作区的实用工具。
使用建议：先用游客模式跑通一次完整流程，确认浏览器支持 WebCodecs（Chrome / Edge / Safari 较新版本），再视需要启用 Supabase 账号同步或 Obsidian 双向同步；重要内容主动导出 Markdown 与附件，不要依赖浏览器存储。
项目地址：github.com/fxyadela/write-then-publish，在线版：fawen.fun。一份内容写完，别再开五个工具排版了。
#write-then-publish #WriteThenPublish #fxyadela #AI智能体 #AI工作流 #自动化 #开源项目 #GitHub