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.