用 AI 加速内容工具开发效率提升 4 小时

Full translation

完整中文译文

作为一名内容专家，我面临的最大挑战之一，就是如何把写好的博客内容重新用于社交媒体。以前，我要么让 AI 帮忙总结，要么自己动手提炼。最近我变得非常忙，已经没有时间再做这些事了。对我而言，最好的解决方案就是构建一个工具，让它代替我根据博客和文章生成社交媒体内容。最近，我参加了一场内容专业人士的会议。会上反复强调了一个关于使用 AI 创作内容的关键观点：必须维持严格的 Human-in-the-Loop（HITL，人在回路）工作流。这一点让我深有共鸣。我最初打算构建一个 Agent，用来自动生成并定时发布社交媒体帖子。然而，这样的方案缺少 HITL 环节，所以我重新调整了策略。

下面是我使用 Next.js 15、Gemini 3.1 Pro 和 Discord Webhooks 构建 Agentic Content Engine 的技术拆解。

Agentic Human-in-the-Loop（HITL）架构

问题在于“上下文鸿沟”：大多数 AI 社交媒体工具，不过是在通用 prompt 外面套了一层壳。它们不了解我的研究，不了解我的表达风格，更不可能理解我文章中的技术细节。因此，我需要一个能够完成以下工作的工具：

读取我真实发布在 dev.to 上的文章。

为期 3 天的多平台 Campaign 制定策略。

以一种方便我审查、编辑，并在确认后通过一次点击完成部署的方式呈现内容。

尽管这个应用是通过“vibe coding”完成的（必须感谢 AI 一直跟得上我不断改变的思路 😂😂），但它的架构非常扎实。

这个项目的核心理念是：Agency 优先于 Automation。Agent 不会直接采取行动，而是先推理、组织内容，然后等待人工批准，之后才会发布。

推理引擎：Gemini 3.1 Pro（Tier 1 Billing）。我选择 Pro 而不是 Flash，是因为它更适合处理复杂的指令遵循，以及严格的 JSON schema 约束。

前端：Next.js 15（App Router），用于实现服务端渲染并提高 SEO 效率。

样式：Tailwind CSS 搭配 @tailwindcss/typography，用于实现专业的 Markdown 渲染效果。

部署：Discord Webhooks，构建一条即时、零认证的执行管线。

在 Next.js 中处理 AI 幻觉

我发现，vibe coding 中一种常见的失败情况是：UI 期待接收结构化数据，但 LLM 返回的却是“聊天式”文本。为了解决这个问题，我在 API route 中实现了一种 Strict JSON Enforcement 模式。

Gemini 经常会用 Markdown 代码块包裹它输出的 JSON。如果把这些内容直接传给 JSON.parse()，应用就会崩溃。

为了解决这个问题，我使用了 Sanitization Middleware。我构建了一个基于正则表达式的清理层，用来剥离噪声，确保前端接收到的是一个干净的数组。

// app/api/generate/route.ts
const rawOutput = data.output; // The raw string from Gemini

// Regex to extract only the JSON content
const cleanJson = rawOutput.replace(/```
{% endraw %}
json|
{% raw %}
```/g, "").trim();

try {
  const campaignData = JSON.parse(cleanJson);
  return NextResponse.json({ campaign: campaignData.campaign });
} catch (error) {
  console.error("JSON Parsing failed:", rawOutput);
  return NextResponse.json({ error: "Failed to parse Agent strategy" }, { status: 500 });
}

UI/UX 策略：Kanban“看板”方案

第一版 UI 非常混乱。工具虽然能用，但你必须从堆积如山的文本中翻找，才能弄清楚究竟发生了什么。我尝试把内容格式化成表格，让它看起来更有结构。结果不知怎么的，反而更糟了！最后，为了针对 Human-in-the-Loop 工作流进行优化，我改用了分栏式仪表盘。社交媒体帖子，尤其是 X 上的长串帖子，可能非常长，这会让看板也变得笨重而杂乱。为了保持 UI 整洁，我构建了一个 PostCard 组件，将显示内容限制在 250 个字符以内，并通过状态管理实现“Read More”切换功能。

const [isExpanded, setIsExpanded] = useState(false);
const displayContent = isExpanded ? content : content.substring(0, 250) + "...";

这样一来，用户无需滚动“几英里”，就能审查文本。

图片记录：Agentic Content Flow 的实际运行效果

起点：这是魔法发生之前简洁、极简的仪表盘。我希望它给人的感觉像一个专业的“Command Centre”，而不是一个杂乱的聊天机器人窗口。

3 天 Campaign 地图：粘贴 URL 后，Agent 就会开始工作，并返回一个结构化的 3×3 网格。我加入了 250 个字符的截断限制和“Read More”切换功能，因为说实话，谁会愿意在制定策略时面对一整面文字墙呢？

部署：这才是最精彩的部分。我点击“Post to Discord”，砰——成功了。不需要手动复制粘贴，也不需要在标签页之间来回切换。内容已经上线。

这就是我目前构建出来的成果。我把它称为 BloggerHelper v1。接下来计划进行的更新包括：

集成 X 和 LinkedIn 功能。

继续完善 context tank。目前，Agent 的上下文来自文章本身，以及 agents_instruction.md 文件中的一些指令。我会继续深入完善这一部分。

加入编辑功能，让我可以在帖子发出之前进行修改。

让它能够接收博客文章之外的更多上下文。

结语：存在感的工程化

尽管这个工具的设计初衷是帮助我减少工作时间，但它也能推动我从一名单纯的技术写作者，转变为内容工程师／架构师。我的首要目标不再只是创作内容，而是构建解决方案，让内容流转变得更加顺畅。此外，在把自己定位为 AI influencer 的过程中，我也希望展示自己如何使用 AI 构建更多东西，并推动 AI 的普及与采用。

欢迎在 LinkedIn 上与我联系！

你怎么看 Agentic Workflows？你是在构建完全自动化的系统，还是选择把人保留在工作回路中？

欢迎在下方讨论。👇

我刚刚使用自己的工具，为这篇文章生成了社交媒体 caption／内容。见下方。

你可以在这里试用，但请对我的 API credit 手下留情！！

更新 2——2026 年 3 月：评论区里有几个人询问，如何在不使用正则表达式清理层的情况下强制输出结构化 JSON。后来，我在开发 Ozigi v3 时深入研究了这个问题。答案是通过 Vertex AI SDK 使用 responseSchema——它在解码层而不是 prompt 层强制约束输出结构。我还将它与 Claude 3.7 Sonnet 放在一起，针对四项生产环境约束进行了基准测试。包含具体数据的完整文章在这里：Gemini 2.5 Flash 对比 Claude 3.7 Sonnet：促使我做出选择的四项生产环境约束。

部分评论可能仅对已登录的访客可见。登录后可查看全部评论。

如需采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。

用 AI 加速内容工具开发效率提升 4 小时 | 前端进阶之旅