UStackUStack
agentpng icon

agentpng

將 Claude Code、Kiro、Cursor 等 AI 程式碼對話紀錄轉換為精美圖片,方便記錄與分享。立即體驗 agentpng!

agentpng

什麼是 agentpng?

什麼是 agentpng?

agentpng 是一個專門的工具,旨在彌合複雜、文字密集的 AI agent 互動與視覺吸引力、易於分享的內容之間的差距。在現代開發工作流程中,AI 編碼助手會產生詳細的會話記錄、推理步驟和最終的程式碼片段。agentpng 會將這些原始記錄——來自 Claude Code、Kiro、Cursor 和 Codex 等平台——渲染成高保真度的樣式截圖。

此工具對於需要記錄、呈現或分享 AI 協作會議特定時刻的開發人員、技術寫作人員和教育工作者至關重要。agentpng 不僅僅是分享原始文字檔案或混亂的終端輸出,而是提供乾淨、專業的視覺成品,捕捉上下文、推理和產生的程式碼,使知識轉移無縫且引人入勝。

主要功能

  • 廣泛的記錄檔相容性: 支援解析主流 AI 編碼環境的會話記錄,包括 Claude Code (.jsonl)、Kiro (.md)、Cursor (.md)、Codex (.jsonl)、Gemini CLI,以及標準通用格式。
  • 樣式化圖片匯出: 產生美觀、可直接分享的 agent 對話截圖,包含語法突顯,並清晰區分使用者提示、agent 推理和工具呼叫。
  • 直接整合: 提供 agent-transcript 技能,可從相容的 agent 環境直接匯出(npx skills add siegerts/agent-transcript),簡化工作流程。
  • 彈性的輸入方法: 使用者可以輕鬆地直接貼上記錄檔、拖放會話檔案(.jsonl、.txt、.md、.log),或利用直接技能整合。
  • 格式自動偵測: 嘗試智慧解析輸入格式,但也可以手動選擇特定格式(如 Claude Code 或 Kiro)以獲得最佳渲染效果。

如何使用 agentpng

開始使用 agentpng 的過程快速且直觀,專注於在完成會話與建立圖片之間實現最低的摩擦。

  1. 取得記錄檔: 使用您選擇的 AI agent(例如 Claude Code、Kiro)完成您的會話。匯出會話記錄檔或複製相關文字片段。
  2. 輸入資料: 前往 agentpng 介面。您有三種主要選項:
    • 貼上: 將原始文字記錄檔直接貼到輸入區域。
    • 拖放檔案: 將您的會話檔案(例如 session.jsonl.md)拖放到指定區域。
    • 直接匯出(進階): 如果您使用的是相容的 agent,請在您的 agent 環境中安裝 agent-transcript 技能(npx skills add siegerts/agent-transcript),即可直接匯出到 agentpng,無需手動複製或處理檔案。
  3. 解析與預覽: 選擇正確的輸入格式(或讓自動偵測處理)。工具將處理文字並顯示產生的圖片內容的樣式化預覽。
  4. 匯出圖片: 對預覽滿意後,使用匯出功能下載最終的高品質圖片檔案,即可用於文件、部落格文章或簡報。

使用案例

  1. 技術文件與 Wiki: 開發人員可以快速擷取涉及 AI 協助的複雜除錯會話或成功的實施步驟,將這些視覺證明直接嵌入內部文件(例如 Confluence、Notion)以供日後參考。
  2. 部落格與教學: 撰寫關於使用特定 AI agent(如提示工程指南)的教學內容的創作者,可以使用 agentpng 精確展示 agent 如何解決問題,為其指南增加可信度和清晰度。
  3. 程式碼審查與協作: 當尋求對 AI agent 生成的解決方案進行同行審查時,將整個上下文——初始提示、agent 的內部規劃和最終程式碼——作為單一、乾淨的圖片分享,可以加速理解。
  4. 展示 Agent 功能: 產品經理或研究人員可以使用這些精美的圖片在簡報或行銷材料中展示新 AI 模型或 agent 框架的強大功能,以突出成功的互動。
  5. 個人知識管理 (PKM): 使用 Obsidian 或 Logseq 等工具的使用者可以輕鬆地將這些 AI 問題解決會話的視覺摘要整合到他們的個人知識圖譜中。

常見問題

問:agentpng 支援哪些 AI agent 和格式? A:agentpng 支援廣泛的格式,包括 Claude Code (.jsonl)、Kiro (.md)、Cursor (.md)、Codex (.jsonl)、Gemini CLI,以及通用的使用者/助手格式。該工具會嘗試自動偵測,但也允許手動選擇以獲得最佳結果。

問:使用 agentpng 是否需要付費? A:網站建議採用免費工具模型,通常由可選的直接匯出技能提供支援。對於核心 Web 應用程式功能(貼上/拖放記錄檔),通常是免費使用的,但使用者應查看網站是否有任何進階功能或使用限制。

問:我可以自訂匯出圖片的外觀嗎? A:雖然主要重點是提供模仿常見終端/IDE主題的乾淨、樣式化輸出,但自訂選項(如主題選擇或字體大小)通常會根據工具的當前版本提供或暗示。

問:如何使用直接匯出技能? A:您可以透過在相容的 agent 環境中執行 npx skills add siegerts/agent-transcript 來將 agentpng 直接整合到您的工作流程中,從而能夠將會話直接匯出到服務,而無需手動複製或檔案處理。

問:如果我的記錄檔格式未列出怎麼辦? A:如果您的格式未明確列出,請嘗試「通用(使用者:/助手:)」解析器。如果該方法失敗,複製並貼上原始文字通常有效,因為該工具旨在有效解析對話輪次。