因为不喜欢公众号排版,我把插件改了改,顺手多了

大家好，我是AI淇橦学。

我现在写文章，流程大概是这样：

Obsidian+claudian写作➡️复制内容➡️打开浏览器排版工具➡️粘贴调整样式➡️再复制粘贴到公众号➡️发布平台

前面都很顺畅，但最后一步总觉得有点「割裂」。

不是说花很长时间，其实也就几分钟。但这种「跳出去」的感觉很烦人。

昨晚刚好看到群友分享了一个Obsidian插件，可以直接在OB里预览和复制公众号排版。装上发现不错，但19个预设主题，我都不太喜欢。

于是我想，自己动手改改，说不定能更顺手。毕竟是开源的。

这是我第一次完整地用AI辅助开发插件。从发现问题到解决问题，整个过程挺有意思的。

后面我会介绍：

• 具体改了哪些功能
• 我是怎么做到的（完全不会编程）
• 现在的这套AI写作系统

为什么想改

痛点1：多工具切换的割裂感

在OB里写作很沉浸，一到排版就要：

1. 打开浏览器
2. 复制内容
3. 找到排版编辑器页面
4. 粘贴内容
5. 调整样式

虽然每次也就几分钟，但这种打断的感觉很烦。

尤其是还要插入图片的话，更繁琐。

我理想的流程：写完 → 选模板 → 一键复制 → 完成。全程在OB内完成，保持创作流。

痛点2：灵活性不足

群友推荐的mp-preview插件，确实能直接在OB里预览和复制。但19个预设主题，我都不太喜欢。

原版插件的限制：

• 添加新主题要手动调整一个个样式项
• 不喜欢的预设主题删不掉
• 没有导入导出功能

当时我就想：

我想添加新的样式模板，可以直接输入主题样式而生成，不用非得一个样式一个样式的进行调整添加。

如果能：

• 直接粘贴JSON配置生成主题
• 或者导入CSS文件
• 随便删除不用的主题

那就灵活多了。

痛点3：一些小细节

还有一些小问题，比如：

增加一个同步滚动功能，编辑器和预览区域保持同步滚动。

有些按钮位置、字体大小、间距不太顺手。

这些问题都不致命，但加起来就让人「忍不了」。

不是说花多少时间的问题，是体验不够爽。

我的解决思路

看到过huasheng_editor（花生编辑器）的主题，很喜欢。

mp-preview插件已经有基础功能，只需要改进。

为什么不从零开始？因为站在巨人肩膀上，效率更高。

我的策略很简单：

我对这个项目进行学习，我想基于此进行再次开发

边学边做的过程

第一阶段：让AI教我读源码（1-2小时）

我的起点：

• 不是程序员，会一点Python
• TypeScript完全不会
• Obsidian插件开发？没听过

怎么做？

1. 把项目丢给AI：「请学习这个项目，我要二次开发」
2. AI帮我分析了项目结构
3. 我问不懂的地方，AI解释给我听

关键发现：原来模板就是JSON配置！

{"h1":{"font-size":"1.2em","color":"#333"}}

看到这个配置的时候，我突然明白了：我也能改！

第二阶段：实现JSON/CSS导入（1小时左右）

目标：不用手动调，直接粘贴JSON或导入CSS。

实现过程：

• 让AI帮我写代码
• 遇到报错就问AI
• 编译 → 测试 → 修改

遇到的坑：

• Notice未导入 → 添加import
• 类型错误 → 添加类型断言
• 图标不显示 → 换一个图标

第一次成功：导入第一个CSS主题，看到预览效果，还挺激动的！

第三阶段：提取喜欢的主题（1小时左右）

资源来源：huasheng_editor的开源代码。

怎么做？

1. 让AI读取huasheng_editor的样式文件
2. 转换成mp-preview的格式
3. 生成模板文件

提取了13个主题：

• wechat-default（微信默认）
• latepost-depth（晚点深度）
• wechat-tech（科技风）
• wechat-apple（苹果风）
• 还有9个…

有意思的发现：很多网站的源代码里都有主题，只是不提供下载。从源代码提取是可行的！

第四阶段：添加管理功能（1小时左右）

实现的功能：

1. 全模板删除（包括预设）
2. 导入导出（JSON格式）
3. HTML导出（独立文件）
4. 同步滚动（基础版本）

过程中的对话：

「我希望能删除所有模板，包括预设的」「增加一个同步滚动功能」

AI帮我实现了大部分，同步滚动做了基础版本。

第五阶段：UI优化（1-2小时）

我的想法变了：

「我现在最想实施的就是对整个项目的UI进行重构，但要保证项目的可用性。」

从「加功能」到「优化体验」。

删掉的功能（做减法）：

「我觉得这个模板预览功能有点多余，因为直接就能看到输出效果了」

删除了：

• 模板预览弹窗
• 关于作者按钮
• 捐赠按钮

优化的细节：

「字体输入框再大一点」「适当的紧凑一些，但也不要太紧凑」「往上再去一丢丢」

这些真实的反馈，AI都帮我实现了。

最大的改进：左右分栏设置页

• 左侧：设置控制
• 右侧：实时预览
• 调整参数立即看到效果

现在的使用体验

主要改进：

• ✅ 全程在OB内，不切换工具
• ✅ 有喜欢的主题可选
• ✅ 可以灵活导入新主题
• ✅ 左右分栏，实时预览

改造前：写完 → 切换浏览器 → 排版（几分钟）→ 完成改造后：写完 → 选主题 → 一键复制（几秒钟）→ 完成

不是节省多少时间的问题，是体验流畅了。

最大的收获：正向反馈循环

这是最大的收获！

这个循环的好处：

1. 解决实际问题 – 不是练手项目，是真的在用
2. 锻炼编程能力 – TypeScript、插件开发，边做边学
3. 产生写作素材 – 这篇文章本身就是素材
4. 可能帮助他人 – 分享出来，也许有人也需要

我当时就觉得：

又可以给我带来素材，帮助我进行写作，我觉得还挺好的。

我的AI写作系统

完整流程：

这套系统的优势：

• 全程在OB内完成，不切换工具
• AI辅助每个环节，效率很高
• 形成知识库，内容可复用
• 不断优化，越用越顺手

关键工具：

1. Claude Code – AI对话和代码生成
2. Obsidian – 知识管理和写作
3. Claudian – OB内的AI助手
4. 自研插件 – 公众号排版优化

成果：

• 单篇文章创作时间：0.5-1小时
• 文章质量：通过AI检测，自然流畅
• 知识积累：形成个人知识库
• 持续优化：工具越来越好用

如果你想开始

如果你也想搭建类似系统，可以参考我的路径：

1. 从单一痛点开始（我就是从排版开始）
2. 找到现成的基础（不要从零开始）
3. 让AI教你（不懂就问）
4. 小步快跑（不要追求完美）
5. 边用边改（保持可用性）

如果你对AI辅助开发感兴趣：

• 不需要会编程
• 不需要从零学
• 有想法就可以开始

这次开发的收获

不只是工具本身，更是：

• 发现问题可以自己解决
• AI让开发门槛降低很多
• 形成正向反馈循环（痛点→解决→素材→新灵感）

在AI时代，你不需要是程序员。

只要：

• 有明确的需求
• 找到合适的起点
• 让AI帮你实现

你也可以。

如果你想试试这个插件：

📦GitHub下载：https://github.com/wangdalan273/ai-qitongxue-preview

或者关注公众号「AI淇橦学」，后台回复「插件」获取安装指南。

有问题或建议？后台留言即可。

如果你对我的AI写作系统感兴趣：

添加微信交流。

最后想说：

这篇文章本身就是正向反馈的最好证明。

从痛点 → 解决 → 经验 → 分享 → 新的连接。

期待和你交流！