Handle

Handle 是什么？

Handle 是一个基于浏览器的 UI 微调工具，让你在 Chrome 中直接编辑界面，然后将这些更改发送给你的编码代理。其核心目的是桥接你看到的 UI 调整与代理应用到项目的代码更新。

从 handle.ai 页面流程所示，你在浏览器中微调 UI（通过 Handle 扩展），然后你的编码代理将结果更新整合到源文件中进行审查。

主要特性

• 直接在浏览器（Chrome）中微调 UI：使用 Handle 扩展，在查看运行中的应用时进行更改，确保调整基于你所见。
• 将浏览器编辑反馈给编码代理：UI 微调后，Handle 将更改提供给代理，用于代码生成或更新。
• 兼容多种编码代理/模型：页面列出了与 Claude Code、Codex、Cursor、GitHub Copilot、Windsurf、Gemini 和 Rovo 的兼容性。
• 项目更新落地到源文件：示例工作流显示代理驱动的更改应用到典型应用结构的文件中（例如 src/components/...）。

如何使用 Handle

1. 初始化扩展/工具：运行 npx handle-ext@latest init。
2. 创建或连接编码工作流：页面示例显示在与编码代理创建 UI 编辑会话后，使用类似 /handle 的命令启动。
3. 在浏览器中编辑 UI：打开本地应用（示例为 localhost:3000），在 Chrome 中查看并使用 Handle 微调组件。
4. 审查代理更新的文件：修改后（示例：三个组件），编码代理将更新应用到对应源文件进行审查。

使用场景

• 查看实时应用时调整页面组件：当英雄区、定价卡布局或页脚样式需要调整时，你可在浏览器中微调 UI，并让代理更新相关的 React 组件文件。
• 通过迭代编辑将反馈融入代码：如果收到多个 UI 组件的反馈，你可逐一微调组件并将更改路由到代码库，而非手动重写。
• 加速代理驱动开发的 UI 到代码交接：使用代理实现功能时，Handle 帮助连接“UI 应该的样子”与代码更新。
• 适配常见代理设置：如果团队已使用 Cursor 或 GitHub Copilot 等代理，Handle 可通过发送浏览器微调更改融入现有工作流。

常见问题

• Handle 修改的是浏览器中的 UI 还是代码？ Handle 用于在浏览器中直接微调 UI，然后将这些更改反馈给编码代理，以便代码更新应用到项目文件。

• Handle 支持哪些浏览器？ 页面明确提到在 Chrome 中微调。

• 需要特定编码代理吗？ 站点列出了多种支持选项，包括 Claude Code、Cursor、GitHub Copilot、Windsurf、Gemini 和 Rovo。

• 编辑后更改去哪里？ 示例显示代理更新导致文件更改（例如 src/components/Hero.tsx、PricingCards.tsx 和 Footer.tsx），准备审查。

• 如何本地设置？ 页面提供命令：npx handle-ext@latest init。

替代方案

• 直接在代码中设计（组件/样式表编辑）：不通过浏览器扩展微调并反馈给代理，而是手动编辑相关 UI 源文件（更直接，但代理辅助较少）。
• 带代码导出的 UI 原型工具：帮助视觉迭代布局的工具可能提供代码导出或转换，但不一定在同一工作流中将“实时 UI 微调”发送回编码代理。
• 纯代理 UI 生成：某些编码代理工作流专注从文本提示生成 UI 代码，无浏览器微调步骤；这需要更多提示/迭代，而非浏览器内 UI 编辑。