从零到上线:Vibe Coding零成本开发微信Markdown编辑器全流程
此前曾分享过微信小程序 Vibe Coding 上线全流程,收到许多关于如何利用 Vibe Coding 开发网站的留言。趁着最近动手搓了一个几乎人人必备的 Markdown 文章编辑器,我将整个零成本开发部署的过程整理出来,供大家参考。

项目缘起
Markdown 文章编辑器如今人人都能通过 Vibe Coding 手工打造,但开发完成之后,“如何部署”往往成为新的问题。
恰好我手头有一个与 Markdown 相关的域名,便顺势开发了一款专门面向公众号内容创作者的 AI Markdown 工作台,命名为「码搭AI」。
核心功能一览

内容库管理
码搭AI 与其他 Markdown 编辑器最大的不同,就是它对“内容库”的深度支持。
很多编辑器只能单篇写作,写完即走,但公众号运营者往往需要同时管理多个账号、多篇文章,缺少的是完整的内容管理方案。

- 多库管理 — 支持创建多个独立的内容库。如果你运营多个公众号,可以按账号分库存放,互不干扰,一键切换。
- 自定义图标 — 每个内容库都可以上传自己的图标或选用 Emoji,让你在侧边栏就能快速辨认并定位。
- 多文档管理 — 每个库内都可以创建、编辑、删除及重命名多篇文档,随时增删改查。
- 文档排序与置顶 — 重要文档一键置顶,也可以通过上下移动灵活调整顺序,写作节奏完全由你把控。
- 侧边栏快捷切换 — 内容库直接展示在侧边栏,单击即切换,无需进入二级页面翻找。
- 本地持久化 — 所有内容自动保存在浏览器本地,刷新页面也不会丢失,打开即用,免登录。
一句话概括:一个编辑器帮你管好所有账号的所有文章。
三步实现零成本部署
整个项目从代码到上线都无需花费一分钱,流程非常简单,主要分为以下三步:
第一步:初始化项目
打开 Claude Code(或其他 AI 编程工具),用下面这样的描述告诉它你想要的功能:
帮我创建一个微信公众号 Markdown 编辑器,使用 Vue 3 + Vite + TDesign,支持实时预览、主题切换、一键复制到公众号。
AI 会自动搭建项目骨架、安装依赖并生成核心代码。

你只需要持续提出需求和调整,这正是 Vibe Coding 的乐趣所在。
第二步:推送代码到 GitHub
项目开发完成后,通过 GitHub CLI 快速创建仓库并推送代码:
# 安装 GitHub CLI 后登录
gh auth login
# 创建仓库并推送
git init
git add .
git commit -m "feat: 初始版本"
gh repo create your-project --public --source=. --push
代码进入 GitHub 仓库后,后续每次 git push 都会自动触发部署,极其便捷。
第三步:Vercel 一键部署
- 打开 vercel.com,使用 GitHub 账号登录。
- 点击「Import Project」,选择刚刚创建的 GitHub 仓库。
- 框架会被自动识别为 Vite,直接点击 Deploy。
- 等待一两分钟,部署即可完成。
Vercel 会自动分配一个 xxx.vercel.app 的域名,同时也支持绑定自定义域名。

绑定自定义域名
在 Vercel 项目的 Settings → Domains 中添加你的域名,然后前往域名服务商处配置 DNS 解析:
- 添加一条 CNAME 记录,指向
cname.vercel-dns.com。 - 等待 DNS 生效(通常几分钟到几小时)。
生效后即可通过自定义域名访问你的编辑器,比如我用的 mamd.cn。
⚠️ 温馨提示:vercel.app 默认域名有时无法直接访问,建议提前绑定自定义域名并配置好 DNS,通常就能正常使用了。
实践心得与总结
如果你也在用 Vibe Coding 做项目,欢迎在评论区分享你的作品。有任何问题也可以留言交流。