尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

从一篇 Markdown 到七个平台:我们用 Vibe Coding 做了一次内容发布实验

从一篇 Markdown 到七个平台:我们用 Vibe Coding 做了一次内容发布实验 从一篇 Markdown 到七个平台我们用 Vibe Coding 做了一次内容发布实验写完一篇文章后你通常需要多久才能把它发布到所有内容平台对于只发布到一个平台的创作者来说复制正文、上传封面、检查排版可能只需要十几分钟。但如果目标平台包括博客园、掘金、CSDN、知乎、微信公众号、小红书和抖音整个过程就会变得复杂起来。同一篇文章在不同平台上往往需要不同的标题、摘要、封面比例和内容格式。于是我们决定用Vibe Coding开发一个多平台投稿发布系统尝试把重复劳动交给程序处理。一、一次看似简单的发布任务假设我们已经完成了一篇技术文章原始文件为vibe-coding-guide.md文章中包含以下内容一级、二级和三级标题普通段落和引用有序列表与无序列表JavaScript 代码块本地图片外部链接表格和分割线。如果采用传统方式发布我们需要依次打开七个平台并重复完成以下操作复制标题 → 复制正文 → 调整格式 → 上传图片 → 填写摘要 → 添加标签 → 设置封面 → 检查预览 → 发布真正的问题不是某一步特别困难而是每一步都要重复很多次。自动化的意义不是让人完全离开工作流程而是把人的精力从重复操作转移到内容质量和最终决策上。二、我们希望系统怎样工作我们为系统设计了一个相对清晰的操作流程。用户创建或上传 Markdown 文章系统解析标题、正文、图片和代码块用户选择需要发布的平台系统根据平台规则生成不同版本用户预览转换结果系统创建发布任务用户确认后执行半自动发布系统保存发布地址和执行状态。在理想情况下用户只需要操作一次系统就可以生成七份适配后的内容。发布任务示例{articleTitle:用 Vibe Coding 开发多平台投稿系统,platforms:[cnblogs,juejin,csdn,zhihu,wechat,xiaohongshu,douyin],status:waiting,publishMode:semi-automatic}这里没有追求完全无人值守的自动发布而是采用更加稳妥的半自动方式。系统负责准备内容、打开页面和填写表单用户负责最后检查并确认发布。三、不同平台不能使用同一种内容格式多平台发布最大的难点不是“把文字发送出去”而是“让内容在每个平台上都能正常阅读”。平台内容特点系统处理方式博客园适合完整技术文章保留长文结构和代码块掘金技术社区属性明显优化标题、标签和代码展示CSDN支持技术长文转换 Markdown 并处理图片知乎强调阅读体验调整段落间距和引用格式微信公众号主要使用富文本转换为带样式的 HTML小红书偏向图片和短文案将长文拆分为多张内容卡片抖音偏向短视频和图文生成短标题、口播稿和图片文案例如一段适合技术博客的内容可能是asyncfunctionpublishArticle(article,platform){constadaptergetPlatformAdapter(platform);constcontentawaitadapter.transform(article);returnadapter.createPublishTask(content);}对于掘金和 CSDN这段代码可以继续以代码块形式出现对于小红书系统则可能将它转换成“核心实现思路”卡片而不是直接展示完整代码。这说明平台适配不是简单的格式转换还包括内容重新组织。四、Vibe Coding 如何帮助开发在开发过程中我们没有一开始就详细设计所有页面和接口而是先向 AI 描述一个可以运行的最小版本创建一个支持 Markdown 文档管理的平台。用户可以编辑文章、选择发布平台并查看每个平台的转换预览。AI 根据描述生成基础项目结构后我们再逐步补充要求支持 Markdown 编辑和实时预览支持创建平台发布任务保存文章和发布记录展示任务成功或失败状态对接更多平台的真实发布流程自动获取阅读量和评论数使用 AI 生成封面和摘要。这种开发方式并不意味着需求可以一直模糊。相反每次看到程序运行结果后我们都需要更加准确地说明问题。例如“页面不好看”是一个模糊反馈而下面的反馈更容易让 AI 执行文章编辑区域和预览区域采用左右布局 左侧宽度为 55%右侧宽度为 45% 发布按钮固定在页面右下角 任务失败时显示错误原因和重新执行按钮。清晰的描述会直接影响生成结果的质量。五、第一次测试中发现的问题在第一次内部测试中我们很快发现了一些问题。首先本地图片路径无法直接发布到其他平台。例如![系统截图](./images/dashboard.png)这张图片在本地编辑器中能够正常显示但发布后其他用户无法访问。因此系统必须先上传图片再将原始路径替换为在线地址。其次不同平台对表格、代码高亮和 HTML 标签的支持程度不同。一些平台能够正确显示复杂表格另一些平台则可能出现内容错位。最后平台页面随时可能更新。依赖网页元素位置的浏览器自动化脚本需要具备错误检测和重新配置能力。因此我们放弃了“写完脚本就永远不用维护”的想法。一次开发永久稳定并不现实更合理的目标是建立一套容易更新的平台适配机制。六、一次发布多份结果发布任务完成后系统需要给用户一个清晰的结果页面。平台状态结果博客园成功已生成文章链接掘金成功已进入审核流程CSDN成功已发布知乎失败图片上传超时微信公众号待确认等待用户点击发布小红书成功已生成 8 张内容图片抖音待确认已生成图文草稿某个平台执行失败时系统不应该终止整个任务而应该保存已经成功的平台结果并允许用户单独重新执行失败任务。这也是系统设计中的一个重要原则平台之间相互独立单个平台失败不能影响整个发布流程。七、总结通过这次项目实践我们发现 Vibe Coding 最适合解决“目标明确、可以持续验证”的开发任务。AI 能够快速生成页面、接口和基础逻辑但系统能否真正使用仍然取决于开发者是否理解业务流程并认真检查生成结果。多平台投稿发布系统最终想解决的不只是复制粘贴问题而是内容从创作到分发的完整流程创作 → 管理 → 转换 → 预览 → 发布 → 追踪 → 优化当文章、图片、封面、平台格式和发布记录都能在一个系统中管理时创作者就可以把更多时间放在真正重要的事情上——持续产出有价值的内容。相关资料CommonMark Markdown 规范第二轮测试说明本文用于测试多平台投稿发布系统对标题、列表、任务清单、表格、引用、删除线、代码块、链接和分割线等 Markdown 内容的处理能力。
返回列表