手搓一个AI公众号编辑器：粘贴HTML/MD自动转格式，真香！

作为一名程序员，世界上最尴尬的事莫过于：你会写复杂的后端架构，却搞不定公众号的 CSS 排版。

每次把 Markdown 粘贴到公众号后台，格式就炸了。找现成的排版工具吧，不是要收费就是广告满天飞。我就想：我就不能自己写一个吗？

但转念一想，自己从头写 React、配置 Webpack、处理 Markdown 解析、手写正则去匹配 WeChat 的内联样式……太累了，瞬间想放弃。

直到我打开了 Google AI Studio 的 Build 模式（Code Assistant）。

这次我没写一行代码，全是靠“嘴”输出。结果？不到 20 分钟，一个带预览、带一键复制、自动识别 Markdown 的排版神器诞生了。

👆 看这界面，左边是甲方（我），中间是苦逼乙方（AI），右边是产品。

🤯 以前叫写代码，现在叫“调教”

这个过程简直是 “虽然我也不懂我在写什么，但它就是跑起来了” 的完美诠释。

给你们复盘一下我是怎么“PUA”这个 AI 帮我干活的：

👨‍💻 我 (Prompt):
                 “我要做一个微信公众号格式化工具，左边输入，右边预览手机效果。”

🤖 AI:
                 “安排。已创建 App.tsx，布局切分完毕，右侧模拟 iPhone 边框。”

遇到了经典 Bug：样式丢失

稍微懂点公众号排版的都知道，微信后台最坑爹的就是不支持外部 CSS 类。我刚开始生成的版本，复制进去全是裸奔的文字。

如果是以前，我得去搜各种 regex 库来做 inline-style 注入。但现在？我看了一眼报错，直接在对话框里敲字：

❌ Bug: 复制到公众号很多格式都显示不出来。

✅ AI Solution (Thought for 105s):
                 “To ensure styles appear correctly… I will update the service to strictly enforce inline styles for every element.”

看到 AI 默默修改了 services/geminiService.ts，把 CSS 样式硬写进了 HTML 标签里，我流下了感动的泪水。这脏活累活，终于不用我干了。

需求变更：Markdown 自动识别

我又得寸进尺：“我有时候粘贴的是 HTML，有时候是 Markdown，你要自己分得清。”

AI 思考了 98 秒（如截图所示），然后帮我引入了 marked 库，还在 App.tsx 里加了个判断逻辑：

if content starts with <, treat as HTML; otherwise parse as Markdown.

这逻辑，虽然简单粗暴，但它管用啊！

🚀 最终效果：WeChat Formatter

这就是最终“手搓”出来的成品界面（见截图右侧）：

• 1左侧编辑区：

  随便粘，MD 代码块、HTML 混排都能吃。

• 2AI Polish：

  我还没在这个版本加，但预留了按钮，打算让 AI 帮我润色文案。

• 3Copy Result：

  核心功能！点击后，所有样式被压缩进内联 Style，直接粘贴微信后台，格式完美保留。

// 以前我要写这种东西：
             

…

// 现在：
             Prompt: “帮我把样式搞好看点，要硅谷极简风”
             AI: “Done.”

🤔 技术人的反思

整个过程，我甚至都没怎么看 App.tsx 的具体实现。我做的更多是 Review 和 Decision Making。

Google AI Studio 这种 “Build with Gemini” 的能力，让写小工具的门槛直接降到了地心。以前写个小工具要半天，现在喝杯咖啡的功夫，连 UI 带逻辑全给你整好了。

这就是未来的编程方式吗？ 不知道。但至少现在，我拥有了一个专属的、免费的、不用看广告的公众号编辑器。

甚至这篇文章的排版 HTML，也是用它生成的。

👇

你也想手搓一个？

赶紧去试试 Google AI Studio，记得回来告诉我你的体验！

#AI编程 #Gemini #公众号排版 #效率工具