整整花费一周时间。
在 Claude Code 和 Augment 等知名 AI 编程工具帮助下。
从0 到 1 开发了一款 AI Markdown 自媒体写作软件。
随时收藏素材,拖拽插入编辑,AI辅助生成。
本篇文章用此工具写作完成,界面如下:
背景
用过很多Markdown工具。
有在线的,也有本地的。
有些设计的很不错,比如,在线的:
https://md.doocs.org/
客户端:Typora、MarkText、Obsidian等。
除了Obsidian安装Copliot插件,没看到很好的 Markdown + AI产品。
前几天和朋友组织Vibe Coding黑客松。
我想要不趁机开发一个自用 Markdown 工具?
说干就干。
需求分析
素材收集
写作需要素材,这是创作过程的基础环节。
素材往往都是一些碎片化的信息或图片,它们散落在我们的日常观察、阅读记录和工作实践中。
所以需要快速剪藏功能。
素材整理
收藏的素材可以快速查看。
支持选中插入到Markdown文件中进行组织加工。
所以要有方便的素材管理功能。
比如打标签,搜索,单选/多选插入Markdown编辑器等。
内容分发
写完除了给自己看,还希望发给别人看。
所以要生成好看的排版,用来发布到微信公众号。
有时候,则希望把文档导出PDF或图片分享。
AI辅助
能随时跟 AI 对话。
无论是选中文本对话,还是基于当前的文档对话。
可以帮助生成内容标题、提供灵感、扩写后记等。
开发工具
一开始用的是兔子 API 的Claude Code 镜像版。
邀请链接如下:
https://gaccode.com/signup?ref=ZA8DY4K5
没几天,Anthropic开始封杀账号,兔子那边资源也开始紧张,不过现在应该恢复了。
用不了CC,就开始用Cursor,不仅不好用,而且快速模式很快用光。
后来开始用Gemini Cli,道歉诚恳(骂自己SB),但修不好Bug。
最后完全拥抱 Augment,发现真的牛逼。
唯一能接近Claude Code效果的工具。
整整熬夜4天,终于开发出了一个 80% 完整度的 AI Markdown 工具。
功能截图介绍
快速剪藏
网上浏览网页,发现有用的图片和文本。
按快捷键Ctrl + Option + Command + N,唤起收藏界面。
自动预填内容,只需要回车就能保存为素材。
当然,你也可以加上标签,方便以后查找。
有时候,连弹窗都觉得干扰,只想快速收藏图片或文本。
按快捷键 Ctrl + Command + N,静默收藏。
或者按 Ctrl + Option + Command + . ,自动创建当天的日记文件,把内容添加进去。
这样,每天晚上你都可以回顾今天的收藏,整理成文章。
快捷键都可以自定义设置。
支持录制,模拟按下组合快捷键设定。
快速整理
收藏了素材,下一步就是查找和使用。
支持标题内容和标签搜索,快速找到素材。
按shift可以多选,拖拽插入到文档中。
Markdown编辑和预览
Markdown 编辑器
把常用编辑功能都加上了快捷键。
比如个人常用 Option + Command + 1-6 数字。
能快速把一行变成标题。
再比如 Command + B 加粗,Command + I 斜体等。
选中文本按 Command + K 添加链接。
高级一点的比如:
按 Shift + Command + T 插入表格。
另外,有朋友可能对 Markdown 语法不熟悉。
所以让AI加了一个编辑工具条。
也支持截图或粘贴插入图片(用七牛云图床)
Markdown 预览
支持数学公式展示
对科研和教育工作者比较有用。
虽然自己用不上,但调试还真挺麻烦的。
支持Mermaid 图表
支持流程图和饼图等渲染。
导出功能
写完文章,一方面自己看。
另一方面,其实要分享传播。
比如发一篇公众号文章。
预览界面,点击复制,有三种复制模式。
导出支持Markdown、PDF、HTML和PNG。
实现 PDF 导出过程很曲折。
最早 AI 实现方案是调用虚拟打印机。
交互非常不友好,普通用户根本不知道怎么用。
后来用 pandoc 库,虽然能导出,但导出的 PDF 文字不好复制。(光标和文本对不上)
最后选了wkhtmltopdf 库。
比较轻量级,导出效果好,文本复制也没问题。
PNG 图片导出也不容易。
AI 先给了 html2canvas方案。
只能截首屏,明显不符合预期。
后给了Electron原生截图方案,也不行。
甚至试过滚动截屏拼接,都没搞定。
跟 AI 聊了很久,最后用了 puppeteer库。
用 HTML 渲染出图片,效果完美。
还让 AI 加了导出设备设置。
比如设置导出为手机端。
图片宽度比较小,微信上阅读体验好。
AI助手
AI 非常善于文本处理。
写作场景中,个人最常用的 AI 辅助:
生成标题、扩写后记,偶尔用总结。
所以,给 AI 助手内置这些功能。
写完 Markdown 文章,一键点击生成。
另外,为了精细化处理。
也支持选中文本,向 AI 提问加工。
作为懒人,那必须支持快捷对话。
只有点输入框,才会出现显魔法棒图标,再点菜单。
或输入“/” 触发,如果来不及切英文输入法。
中文的“、”号也可以触发,非常贴心。
基本上是让 AI 开发了个对话机器人。
麻雀虽小五脏俱全。
从流式输出,对话管理,提示词设置都得有。
AI输出的内容,可以一键复制或插入到文档中。
创建管理提示词,通过快捷菜单调用
支持插入变量,让AI理解处理的内容范围。
应用打包发布
这是最坑的地方。
开发模式运行正常,到了打包发布阶段才知道,问题这么多。
AI一开始用的sqlite3 连接数据库。
最后打包发布时才告诉我,这个库兼容性差。
咬牙开了个Git分支,整体换成better-sqlite3库。
各种 Bug 都是因它而起。
关键自己不懂开发,真的看不懂。
只能复制粘贴错误给 AI ,通过一轮轮的对话修复。
产品下载体验
https://xiangyangqiaomu.feishu.cn/wiki/CHp0woTaLi166Cksb1BcbzQhns8
开发惊喜时刻
- 一句话完成 Markdown 编辑器工具栏。
- 一句话完成快捷键配置开发。
- 一句话完成提示词管理系统开发。(功能都可用,除了样式)
- 只提示词大模型 Curl 调用代码,完成 AI 对话机器人开发。
- 一句话生成素材浏览幻灯片模式
开发沮丧时刻
- 导出 PDF 和导出 PNG 功能开发
- 打包失败换数据库方案。
- 本来正常运行的功能,因小迭代改崩。
- 各种构建兼容和编译失败问题
Augment开发Tips分享
AI使用技巧
- 需求描述:AI执行不对?先自查需求是否清晰
- 理解偏差:方向错了及时停止,别等代码改完再调整
- 执行问题:变慢/重试→开新开发窗口;小偏差→Checkpoint恢复,大偏差→直接开新窗口
- 记忆管理:Augment可记规则,重要要求让它“记住”
- 提要求格式:多项需求加序号(1.→2.→3.),条理更清晰
代码与工具管理
- 代码管理:用Git!多commit提交,别攒
- 工具推荐:Playwright MCP值得装,自动化测试神器
- Bug调试:调试输出是关键,复制发给AI解决
本文由公众号“向阳乔木推荐看”授权AI产品之家转载,原文连接: https://mp.weixin.qq.com/s/w8JxQ99mzSeqPSGkhFTalQ