Showing Posts From

微信公众号

用 Google AI Studio 3分钟搓出一个微信公众号排版工具

用 Google AI Studio 3分钟搓出一个微信公众号排版工具

如果你经常发微信公众号，一定被公众号默认编辑器折磨过：样式单调、排版费事、每次发文都要反复调整格式。久而久之，一个问题浮现出来：如果有一个工具可以预设好常用风格，支持 Markdown 输入并自动排版好，一键复制到公众号，那该多省事？ 今天这篇分享，就是关于我怎么用 Google AI Studio，在 3 分钟内把这个想法变成可运行的工具。从「想法」到「运行」的过程 事情的起因很简单。某天我准备发公众号时，再次面对那个熟悉的白色编辑框，心里只有一个念头：能不能让 AI 直接帮我做一个排版工具？ 我的需求并不复杂，但痛点很明确：支持 Markdown 输入：平时写文章习惯用 Markdown，不想来回切换格式 支持富文本编辑：有时需要插入图片、分割线、表格等富媒体内容 可预设主题风格：能保存几套常用的配色和排版风格，发文时一键切换 实时预览：左侧编辑，右侧即时看到手机端效果 一键复制：排版完成后，直接生成公众号可用的格式并复制到剪贴板带着这些想法，我打开了 Google AI Studio（https://aistudio.google.com），使用它的 App Builder 功能，直接把上述需求用自然语言描述给 AI。AI Studio 生成出来的工具长什么样 结果出乎意料的顺。AI 不仅理解了所有需求，还额外做了一些超出预期的设计。以下是我收到结果后的第一印象：核心功能一览 从截图可以看到，工具采用了经典的三栏布局：左侧编辑区：支持 Markdown 和 Rich Text 两种模式切换 中间预览区：实时渲染为手机屏幕尺寸，直观看到最终公众号效果 右侧主题面板：提供多套预设主题，支持自定义修改Markdown + 富文本双模编辑 左侧编辑器支持两种输入模式。Markdown 模式下，你可以直接粘贴或输入 Markdown 语法，右侧会实时渲染为带样式的公众号排版。富文本模式则更像传统编辑器，可以插入图片、表格、音视频等媒体元素。富文本模式还参考了 Notion 的一些交互设计：拖拽调整块位置：像 Notion 一样，可以拖拽各个内容块（段落、图片、表格等）来重新排序 / 符号唤醒快捷菜单：输入 / 就能呼出插入菜单，快速插入分割线、表格、标题、图片、视频、音频等块级元素 Emoji 搜索：支持通过关键词搜索并插入 Emoji主题预设系统 右侧 Theme Settings 面板提供了多套预设风格，目前包含：Modern Pro：现代专业风格，蓝白色调，适合技术类文章 Minimalist (Medium Style)：极简风格，类似 Medium 的排版体验 Retro Terminal：复古终端风格，深色背景，适合极客向内容更实用的是，你可以点击 Edit 进入自定义模式，调整颜色、字体、间距等参数，并保存为自己的自定义主题。这意味着你可以为不同的公众号账号、不同的内容类型，分别建立专属的视觉风格，每次发文时一键切换。使用流程 整个工具的使用流程非常顺畅：选择或创建主题：从右侧选择一个预设风格，或自定义一套新的 输入内容：在左侧用 Markdown 或富文本编辑器撰写文章 实时预览：中间预览区同步显示手机端效果，随时调整 一键复制：点击右上角「Copy for WeChat」按钮，复制到剪贴板 粘贴到公众号：在公众号编辑器里直接粘贴，排版效果完整保留整个过程不需要写一行 HTML 或 CSS，也不需要手动调格式。对于经常发公众号的人来说，省下的时间相当可观。为什么要用 AI Studio 做这件事 你可能会问：市面上已经有不少公众号排版工具了，为什么要自己做一个？ 我的考虑是：现有工具要么太复杂：一些排版工具功能臃肿，上来就给你一堆参数和按钮，学习成本高 要么太简单：简单工具不能满足 Markdown 输入 + 富文本混排 + 主题定制的组合需求 要么收费：核心功能被放在付费墙后面而用 Google AI Studio 自己做的好处在于：零代码：用自然语言描述需求，AI 自动生成完整的前端应用 完全可定制：不满意哪里，直接告诉 AI 修改，比如「把标题颜色改成深蓝色」或「添加一个引用块样式」 即时可用：生成后在右侧直接运行预览，不需要本地搭建环境 免费：Google AI Studio 目前对个人用户免费一点感受 这个工具的完整开发过程，从打开 AI Studio 到运行出第一个可用版本，实际只花了不到 3 分钟。大部分时间其实花在和 AI 确认细节上，比如「能不能加一个复制按钮」「能不能支持拖拽排序」。 这让我再次感受到：当下的 AI 工具已经进入了「想法即产品」的阶段。你不需要是前端工程师，不需要写 React 组件，不需要调 CSS 样式。只要能把需求说清楚，AI 就能帮你把工具做出来。 当然，这个排版工具目前还有一些可以优化的地方，比如：支持更多公众号特有的格式（如阅读原文链接、小程序卡片） 增加历史文章模板功能 导出为 HTML 文件这些后续我会继续迭代，也欢迎你如果有类似需求，不妨试试 Google AI Studio 的 App Builder，说不定几分钟就能做出一个解决自己痛点的工具。如果你对这个排版工具感兴趣，或者有类似的工具开发想法，欢迎在评论区交流。