GenAI

新的交接:如何與您的團隊分享 AI 代理程式的程式碼1 min read

Reading Time: 少於 1 minute了解如何將 AI 生成的程式碼作為原始程式碼、工作版本或共享工件進行共享,以便人們和 AI 代理可以一起審查並繼續。

Turn AI-generated code into a shared live app

新的交接:如何與您的團隊分享 AI 代理程式的程式碼1 min read

Reading Time: 少於 1 minute

你的人工智慧代理剛剛建立了一些有用的東西。也許它是一個儀表板、一個新的入職流程或一個小型內部應用程式。

你可以看到它正在工作。程式碼看起來不錯。現在你的隊友問了一個完全合理的問題:

“可以發給我嗎?”

這就是人工智慧編碼工作流程通常變成手動切換的地方。您發送螢幕截圖、複製程式碼片段、推送分支或解釋如何讓專案在本地運行。

但詢問的人可能不想要原始碼。他們想打開這個東西,嘗試一下,然後告訴你需要改變什麼。

共享人工智慧生成程式碼的正確方式取決於接下來會發生什麼。

首先,你實際上分享的是什麼?

當有人詢問您的人工智慧代理產生的程式碼時,他們可能意味著三個不同的事情。

1. 原始碼

開發人員需要檢查實作、執行測試或將其合併到現有程式碼庫中。

Git 儲存庫和拉取請求通常是正確的答案。它們提供了熟悉的工作流程,用於審查變更、檢查測試以及將程式碼整合到生產中。

2. 工作版本

產品經理想要點擊進入流程。設計師希望看到響應式佈局。利害關係人想要嘗試儀表板。

發送來源文件在這裡並不是特別有用。他們需要一個可以在瀏覽器中開啟的應用程式或工件。

3. 別人會繼續做的工作

您的隊友想要審查該應用程序,提出更改建議,並讓人工智慧代理實施回饋。

這是一種不同類型的切換。目的地需要保存的不僅僅是快照。它需要保護作品、它的歷史,並為任何繼續它的人提供訪問權限。

這些工作流程重疊,但不可互換。

共享代碼和移交工作之間的區別

想像一下,一個代理商建立了一個客戶分析儀表板。

它包括三個 KPI 卡、一個使用圖表和一個日期過濾器。

您可以向您的隊友發送 React 檔案。他們需要一個開發環境才能看到結果。

您可以發送螢幕截圖。他們會理解佈局,但無法測試過濾器。

你可以將它部署在某個地方。他們可以與之交互,但您仍然需要一個收集回饋和更新專案的流程。

現在想像一個稍微不同的工作流程。

代理程式在共用工件工作區中建立儀表板並為您提供其 URL。

您的隊友打開工件,測試過濾器,並在圖表上留下回饋。您要求代理程式在同一工件中進行變更。

URL 保持不變。這項工作有一個歷史。無需開始另一次對話並解釋先前的代理構建的內容。

這就是值得設計的切換。

如何與您的團隊共享人工智慧生成的程式碼

這是一個實用的工作流程 AgentGrid.io,由 Anima 建構的人員和 AI 代理的共享工件工作區。

第 1 步:使用您首選的 AI 編碼工具進行構建

繼續使用 Claude Code、Codex、Cursor 或您喜歡的其他工具。

例如:

使用使用圖表、日期過濾器和三個 KPI 卡建立響應式產品分析儀表板。使用React。

您無需更改用於生成程式碼的工具。

步驟 2:將結果放在您的團隊可以訪問的地方

將您的代理連接到 AgentGrid 並詢問:

將此儀表板作為應用程式放在 AgentGrid 上。給我工件鏈接,並保密。

AgentGrid 將應用程式儲存為具有自己的 URL 和版本歷史記錄的工件。

如果您使用的是可以獨立連線的編碼代理,請依照 AgentGrid 連接說明。基於瀏覽器的助手(例如 Claude 或 ChatGPT)使用其支援的整合。

重要的是您的代理程式在它有權存取的工作區中建立工件。

步驟 3:授予您的隊友存取權限

打開工件並複製其連結。

在發送之前,請確保您的隊友有權訪問工作區。私有工件 URL 識別作品;它本身並未授予授權。

對於內部協作,這通常就是您想要的。團隊成員可以在不公開的情況下審查工作。

參見 工件共享如何運作。

第四步:收集實際結果的回饋

您的隊友打開儀表板,發現日期過濾器未如預期運作。

他們可以將回饋附加到工件的相關部分,而不是編寫單獨的 Slack 訊息來解釋哪個元件被損壞。

AgentGrid支援對應用程式元素和文件段落進行審閱評論。授權人員和代理人可以一起處理這些意見。

這使得討論接近正在審查的事情。

第 5 步:讓代理商繼續工作

現在您可以告訴連線的代理:

開啟此 AgentGrid 工件並修復日期過濾器。保留現有佈局並更新相同的工件。

包括實際的工件 URL。

如果工件具有所需的存取權限和功能,代理程式可以檢查和更新工件。

更改出現在同一版本歷史記錄中,歸因於進行更改的代理程式。您的隊友可以回到同一工件來查看結果。

參見 AgentGrid 的版本歷史記錄。

Claude、ChatGPT、Cursor 和 Codex 怎麼樣?

一些人工智慧工具已經具有有用的本機共享功能。

Claude 可以在其生態系內共用支援的工件。 GitHub 非常適合審查代碼。開發平台可以提供預覽部署。

您不需要僅為了分享某些內容而取代這些工作流程。

當下一步涉及到時,AgentGrid 很有用 從事同一工件的人員和代理,特別是跨不同的人工智慧工具。

例如,您的團隊可能會使用 Claude 起草介面,使用 Codex 來完善其行為,並使用人工審閱者留下回饋。

共享工件為該工作提供了一個共同的目的地。

你應該什麼時候發布?

如果該作品是供工作空間之外的人使用的(例如需要公開演示的客戶),您可能需要發布它。

AgentGrid 可以將支援的應用程式和 Markdown 工件發佈到公共 URL。

但共享和發布不是同一個操作。

私有工件連結需要授權的工作區存取權限。已发布的部署可以公开访问。稍後對工件的變更需要再次發布才能出現在該公開頁面上。

仅在您想要发布时才发布。

客服人员结束后问一个更好的问题

不要以「匯出檔案」結束每個編碼會話,而是詢問:

接下來誰需要這個,他們需要用它做什麼?

如果開發人員需要合併程式碼,請建立拉取請求。

如果有人需要測試應用程序,請為他們提供工作預覽。

如果人員和代理商需要一起審查並繼續工作,請給它一個共享的家。

AI 編碼會話的輸出不一定是工作流程的結束。它可以成为其他人的起点。

👉 探索 AgentGrid。

FAQs

Yes. You can copy the artifact source into Anima Playground, or use the Anima MCP from inside Claude. Anima gives you a normal browser link that anyone can open, with no Claude account or Claude seat required to view.
Paste the React code into Anima Playground. It runs in the browser with no local setup, no repo, no build step, and no deploy configuration. You also get a shareable link to the running app.
Yes. The app stays editable in Anima Playground. You can change the code and keep using the same shareable link, instead of exporting or redeploying every time.
No. Anima Playground supports HTML, React, and Markdown, so it works for static pages, interactive components, and more app-like agent outputs.