【Code With SOLO】用 SOLO 重构我公众号排版工具:从"能用"到"好用"的进化

之前我用 TRAE (更新前)写过一个智能内容创作平台(YEEZYEditor),这次用 TRAE 新 SOLO 对我的智能内容创作平台进行了功能升级和全面的体验优化。可以说 SOLO 帮我完成了从"半成品工具"到"真正生产力工具"的进化。

项目背景

  • 我目前是在一家数据库公司做商业化运营,日常需要关注各大技术论坛的趋势以及产出大量 GEO 优化文章,诚然现在有很多工具可以实现,但是不够定制化,每次都要单独调整的话会浪费大量的时间,同时我们的编辑同事马上要休产假,所以一个能够批量稳定的执行公众号排版的工具的需求也迫在眉睫
  • 之前已经用 TRAE 搭建了一个 Web 工具,集成了 GEO 文章生成、公众号排版、微信编辑器三大功能,原文链接:「YEEZYEditor」一键复刻 TRAE 公众号排版,包含 Skill
  • 这个工具存在很多问题:页面不够人性化、部分功能重复、不支持批量操作、排版不稳定、编辑器功能弱,只能说是能用,但并不好用

实践过程

第一步:项目启动

我没有一上来就让 SOLO 做改动,而是先让它读完整个项目源码(因为原始的代码并不在这个路径里),同时 copy 一份修改为本地服务器启动。

第二步:任务拆解

首先我在使用过程中已经有一些想要修改的需求,但在此之外我还增加了一条:以"高频重度用户"的身份帮我分析还有哪些需要改进的地方
这个其实是很多用户日常开发中会遇到的问题,你的项目开发完了,但你总觉得有些要调整和优化的部分,你直接问 AI 大概率他也不会给到什么有建设性的意见,我推荐大家可以在后续项目这样问:

关键 Prompt: “你作为我这个项目的高频重度使用者和忠实用户,请从用户角度分析一下当前项目的源代码,找出需要改进和优化的功能点。”


SOLO 给了我一份非常详细的分析报告,结合我自己梳理的 6 个方向,最终输出了一份 spec.md 文档(以下截取了部分可以参考下,相比旧版更有条理,也不会丢任务)

其中我觉得非常好的部分是他提出的改进意见,非常专业和有效,如果你觉得他给的建议一般,也可以在正式执行前做调整。

成果展示

首先给大家看下项目执行的过程和结果:

实机演示截图:

新手引导

新增首页(我觉得还行!虽然 AI 味稍微重了点但是可以后续优化)

GEO 文章生成升级(最复杂的迭代,反正我不会,全称 SOLO 整的)

问题:原来的 GEO 生成只能手动输入话题,单篇生成,生成的内容还是 Mock 数据(generateMockArticle 函数硬编码的模板),不支持导入复杂的 Skill 文件,更不支持批量操作。

SOLO 怎么做的
1. 多文件上传组件

关键 Prompt: “创建一个多文件上传组件,支持 .md 和 .zip 格式。如果是 ZIP 文件,需要解析其中的 Markdown 文件内容。”

SOLO 生成了 MultiFileUploader.jsx 组件,支持拖拽上传和点击上传,配合 JSZip 库解析 ZIP 中的文件结构。

2. 批量生成队列
SOLO 设计了一个事件驱动的 BatchGenerator 类(batchGenerator.js),支持:

  • 任务优先级队列
  • 状态管理(等待/运行/暂停/完成/失败)
  • 并发控制
  • 发布-订阅事件模式

公众号排版稳定性提升

问题:我之前的版本其实已经解决了大部分的问题,但是如果涉及到非常多的字数和样式的话,很容易出现乱序、丢样式和自我发挥的情况出现,所以在之前我一般都是分段来排序,避免反应时间太或者丢失内容我还需要再花时间校对。
比如我之前写的一个排版 Skill,这个规范要求:

  1. 所有组件必须用 <section class="_editor"> 包裹
  2. 纯色块装饰内部必须保留 <svg viewBox="0 0 1 1" style="width:0px;"></svg> 防止被微信编辑器剥离样式
  3. 移动端必须有 8px 安全边距
  4. 品牌色、渐变、字体都有严格规范

SOLO 怎么做的

关键 Prompt: 比如关于排版的描述,截图其实很难让模型能够完美的理解,最好是给到一个实际的 skill 排版规范,让 SOLO 找出网页端排版输出与 TRAE IDE 端不一致的根本原因,并给出解决方案。

  1. 优化了转换逻辑,增加了对 section、svg 等复杂标签的保留
  2. 实现了 TemplateManager.jsx 模板管理组件,支持创建/编辑/导入/导出排版模板
  3. 将 IDMP 规范中的 HTML 模板预设为默认模板

实际效果:文章编辑前(左),编辑后(右)

效果与总结

你们看我写了这么多,其实最关键的是,这么复杂的需求,5000 行代码的改动,包括引用 github 上成熟的编辑器项目,一气呵成!虽然难免有一些按钮排布的问题,但瑕不掩瑜。

GEO 文章生产:从一次一篇手动复制到一次上传多个 Skill 批量生成和一键打包下载,效率大大提升
公众号排版:从每次都需要单独配置 Skill 到有模板系统可以一键选择,排版准备时间大大缩短
整体体验:有了首页导航和用户引导,可以让新同事或者没有接触过的同事快速上手,减少手把手教学的时间

新 SOLO 在整个项目迭代的过程中已经从之前需要你非常清楚的描述需求才能稳定执行的代码助手,变成了现在可以以用户视角审查代码的产品经理兼技术调研(编辑器选型对比)以及全栈开发(页面、批量生成队列、文件上传组件你都可以放心的交给他去做),同时你也可以放心的让他自己审查代码,如果遇到报错他也会先行处理后再交给你。

如果你看了我的文章也想用新 SOLO 做之前的项目迭代,那么我有几条经验可以分享:

  1. 不要一上来就写代码,先让 SOLO 读完整个项目做全面分析,避免"头痛医头"
  2. 每个迭代完成后都要能跑起来看效果(这也是我第一步就是把项目从云服务改为本地服务器项目的原因),不要攒一堆一起看
  3. 如果你是没有编程经验的小白,那么我建议你从"高价值 + 低难度"的项目开始做,快速积累成就感

感谢你能看到这里,旧版的项目可以访问 YEEZYEditor ,迭代版本的我会再优化优化,等稳定后再上传到服务器。

1 个赞

洗碗哥真的是运营大救星

7 个赞

我一上号就发现洗碗哥在第一个?你是不是 TRAE 社区的会员

2 个赞


抑郁了 :sweat_smile:

2 个赞

你也知道他是洗碗哥了 :joy:

2 个赞

好猛,可惜只能给你投一票

【More Than Coding】用 AI 快速设计公众号主视觉,10 分钟完整落地
这个和我之前做的一个好像可以结合结合 :heart_eyes:

1 个赞

你这个我也看到了,其实差不多,只是实现路径有差别,我这个更懒人一点,如果用 TRAE 的话可以批量按一个模板做多个排版,给你投一票 :clap:

公众号后台排版的格式是用 markdown 吗?不是吧

不是 markdown,本质上还是 HTML,但是有很多特性都不支持,所以原则上是不能直接转 HTML 然后再贴进去,按理说这么多年了应该有个开源的这种编辑器才对,但是没找见,支持的都不是特别好,秀米啊之类的编辑器就整的挺好

1 个赞

最常见的问题是比如从其他地方复制来的模板,如果加个统一缩进样式或者敲个回车就全毁了,就类似这些编辑器提供的模板都是在<section>标签里写好的,如果你在<section>标签外再加一层就完全乱掉