用 Cursor 打造 Markdown 转图片神器，轻松解决你的微信排版烦恼！

引言：Gemini 和微信的“排版灾难”

作为一个对 LLM（像 Gemini、ChatGPT）非常依赖的开发者，我的日常工作流程有点特别：我会在 Gemini 上提问技术问题，AI 就会给我一个条理清晰、代码高亮、格式完美的 Markdown 答案。

这让我觉得很不错，于是我想把这些内容分享给同事，或者在技术群里讨论一下。

你可能感兴趣：用cursor轻松搞懂复杂代码工程，真的可以！

不过，接下来的事情就让人头疼了： 当我把这段完美的 Markdown 复制粘贴到微信时，一切都变得乱七八糟，代码块消失了，标题也没了，最后只剩下一堆难以阅读的纯文本。

市面上那些 Markdown 转图片的工具，要么得打开网页（像 Ray.so），要么广告一堆，要么操作复杂。我只想要一个简单的工具：复制、按个快捷键、粘贴，搞定。

以前的话，我可能会因为需要搭建 Electron 环境、处理 Canvas 渲染、解决 Retina 屏幕模糊问题而放弃。但是现在，有了 Cursor，我决定尝试一种全新的开发方式——Vibe Coding。

什么是 Vibe Coding？

简单来说，就是我负责提供“灵感”（Vibe）和决策，而繁琐的代码实现则交给 AI。在这个项目里，我几乎没写一行样板代码，整个过程都是通过自然语言与 Cursor 一起编程。

开发过程：从 Prompt 到 Product 的演变

我的项目 md2img 是一个基于 Electron 的后台静默工具。开发的过程就像和一个高级工程师在对话：

Phase 1: 雏形 —— “给我一个看不见的浏览器”

我没有手动配置 Webpack 或 Electron 主进程，而是直接对 Cursor 说：

“帮我初始化一个 Electron 项目。我不需要主窗口，它应该是一个在系统托盘运行的后台服务。核心功能是：把剪贴板里的 Markdown 文本，渲染成一张好看的图片（像 Mac 窗口那样），然后再放回剪贴板。”

Cursor 迅速生成了项目的框架：

1. 没有 Dock 图标，只有托盘（Tray）小图标。
2. 后台创建一个隐藏的 BrowserWindow 用于渲染。
3. 集成了 marked.js 来解析 Markdown。

Phase 2: 交互进化 —— 从 “自动监测” 到 “快捷键触发”

起初，我想让它自动监测剪贴板，只要有 Markdown 就自动转换成图片。但在 Cursor 帮助实现后，我发现这个办法有个大问题：误触发率太高，而且可能导致剪贴板死循环。

于是我调整了我的“Vibe”指令：

“自动监测太麻烦了。改成全局快捷键触发。当我按下 Cmd+Shift+M 时，读取剪贴板，渲染，转图，通知我成功。”

Cursor 迅速重构了逻辑，引入了 globalShortcut 模块，体验一下子从“不可控”变成了“随心所欲”。

Phase 3: 死磕细节 —— 开发者的那些“坑”

这就是 Vibe Coding 最有趣的部分。通常最耗时的 Bug 调试，现在只需要一句话就能搞定。

• 坑一：Retina 屏模糊 生成的图片在我的 4K 屏幕上模糊得像马赛克。 我对 Cursor 说： *”截图用的 getBoundingClientRect 是 CSS 像素，但 capturePage 是物理像素，你需要处理 devicePixelRatio。” Cursor： 二话不说，自动补全了 width * dpr 的计算逻辑，图片瞬间清晰了许多。
• 坑二：长图截断 当 Markdown 内容很长（比如 Gemini 生成的长篇评测）时，图片底部总是被截掉。 我对 Cursor 说： *”不要用绝对定位，给我把渲染窗口设大一点，设成 10000px 高，渲染完再裁剪。” Cursor： 调整了窗口大小策略，改用了 scrollHeight 的计算，现在即使是一万字的论文也能完整截取。
• 坑三：品牌注入 我觉得生成的图片太单调了。 我对 Cursor 说： *”在图片右下角加个水印 ‘powered by Garryling’，要半透明，显得高级点。” Cursor： 注入了 CSS，不仅加了水印，还自动调整了底部的 Padding，以避免内容遮挡。

最终成果：md2img

最终的 md2img 完美解决了我“在 LLM 和微信之间转移”的痛点。

• 无感运行： 只有一个托盘图标，开机自启。
• 极速转换： 选中 Markdown -> Cmd+Shift+M -> 等待 1 秒通知 -> Cmd+V 粘贴。
• 颜值在线： GitHub Dark 风格，Mac 窗口样式，自带阴影和水印。

总结

这次开发经历让我深刻体会到，AI 辅助编程不仅仅是在提高效率，它还改变了我们创造软件的方式。我们从“泥瓦匠”变成了“设计师”。

我不需要再去死记 electron 的 API 文档，也不用纠结 CSS 的 box-shadow 参数。我只需要清楚地知道我想要什么，以及在结果不对时如何描述问题。

如果你也常常在 Gemini/ChatGPT 和微信之间反复操作，不妨试试这个小工具，或者自己用 Cursor 搓一个吧！

👉 GitHub 项目地址: https://github.com/lgyStoic/md2img