🔧 阿川の電商水電行
身為內容專家，我面臨的最大挑戰之一是如何將我撰寫的部落格文章重新用於社群媒體。以前，我必須借助人工智慧產生摘要，或是自己費力地去收集。但最近我變得非常忙碌，已經沒有時間再做這些了。
對我來說，最好的解決方案是開發一個工具，它可以幫助我從我的部落格產生社群媒體內容，並代表我發布貼文。
我最近參加了一次內容專業人士的會議。在會議中一再強調，在內容創作中使用人工智慧的關鍵一點是，必須保持嚴格的人機協作（HITL）工作流程。
這引起了我的共鳴。
我最初計劃開發一個代理程式來自動發布和安排社交媒體貼文。然而，這樣做忽略了HITL（使用者互動、流量、轉換）因素，所以我重新制定了策略。
以下是使用 Next.js 15、Gemini 3.1 Pro 和 Discord Webhooks 建立 Agentic 內容引擎的技術細節。
智慧人機互動（HITL）架構
問題： “背景差距”
大多數人工智慧社群媒體工具只是通用提示的包裝器。它們不了解我的研究，不了解我的語氣，更不了解我文章中的技術細節。
所以，
我需要一款能夠滿足以下條件的工具：
-
閱讀我發表在 dev.to 的文章。
-
制定為期3天的多平台推廣活動策略。
-
以我可以審核、編輯，然後一鍵部署的方式顯示。
雖然這款應用程式是「憑感覺編寫的」（感謝 AI 能夠跟上我的思路轉變 😂😂），但其架構非常穩固。
該架構的核心理念是「自主性高於自動化」。代理程式並非只是被動執行，而是會進行推理、建構邏輯，然後在發布前等待人工審核。
人工智慧堆疊
-
推理引擎： Gemini 3.1 Pro（一級計費）。我選擇 Pro 而不是 Flash，是為了處理複雜的指令追蹤和嚴格的 JSON 模式強制執行。
-
前端： Next.js 15（App Router），用於伺服器端渲染和 SEO 效率。
-
樣式：使用 Tailwind CSS 和
@tailwindcss/typography實現專業的 Markdown 渲染。 -
部署：使用 Discord Webhook 實作即時、零驗證的執行流程。
如何在 Next.js 中處理人工智慧幻覺
我發現，在 Vibe 編碼中常見的一個錯誤是，當 UI 需要結構化資料時，LLM 傳回的是「閒聊式」文字。
為了解決這個問題，我在 API 路由中實作了嚴格的 JSON 強制模式。
Gemini 通常會將 JSON 輸出封裝在 Markdown 程式碼區塊中。如果直接將這段程式碼區塊傳遞給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(/```json|```/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策略：看板「板」方法
第一版使用者介面簡直一團糟。工具雖然能用，但你得翻閱堆積如山的文字才能弄清楚它在做什麼。
我嘗試把它格式化成表格，以便更好地組織結構。但不知為何，結果更糟了！
最後，為了優化「人機協作」工作流程，我改用了列式儀表板。
社交媒體帖子，尤其是關於 X 的帖子，可能會很長，這甚至會導致論壇顯得笨拙雜亂。
為了保持用戶介面簡潔，我建立了一個PostCard元件，將內容限制為250 個字符，並帶有狀態管理的「閱讀更多」切換按鈕。
const [isExpanded, setIsExpanded] = useState(false);
const displayContent = isExpanded ? content : content.substring(0, 250) + "...";這樣可以確保用戶無需滾動“很長一段距離”即可查看文字。
圖片集錦：智慧內容流的實踐
- 起點
這是在進行各種優化之前，簡潔明了的控制面板。我希望它感覺像一個專業的“指揮中心”，而不是一個雜亂的聊天機器人視窗。
- 3日活動地圖
我貼網址後，代理商就開始工作了。它傳回一個結構化的 3x3 網格。我加入了 250 個字元的截斷限制，並附有「閱讀更多」的切換按鈕，因為說實話，沒人想在製定策略的時候看到一大段文字。
- 部署
最棒的部分來了。我點擊“發佈到 Discord”，砰——成功了。無需手動複製貼上，無需切換標籤頁。它就發布了。
接下來會發生什麼事？
這是我目前為止的成果，我把它命名為 BloggerHelper v1。
我接下來的更新內容是：
-
整合 X 和 LinkedIn 功能。
-
正在進一步完善上下文資訊庫。目前，智能體的上下文資訊主要來自文章和 agents_instruction.md 檔案中的一些說明。我會繼續深入研究這方面。
-
加入編輯功能，這樣我就可以在帖子發布前對其進行編輯。
-
讓它包含比我的博客文章更多的背景訊息
結論：臨場感的工程化
雖然這個工具的設計初衷是為了幫助我減少工作時間，但它也讓我從技術作家轉型為內容工程師/架構師，我的主要目標不僅是創作內容，還要創造能夠簡化內容流的解決方案。
此外，由於我將自己定位為人工智慧領域的影響者，我想展示自己如何利用人工智慧進行更多建置，並推廣人工智慧的應用。
讓我們在領英上聯繫吧！
您對智能體工作流程有何看法？您是打算建立完全自動化的工作流程，還是會保留人工參與？
讓我們在下方討論。 👇
更新！ ！ ！ ！
我剛剛用我的工俱生成了這篇帖子的社交媒體標題/內容。請看下方。
你可以在這裡試用，但請別浪費我的API額度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
