跳转到内容
无痕工具库 无痕工具库

Hostinger AI Builder 智能体模式功能详解

Hostinger AI Builder 智能体模式是一款 AI 驱动的开发工具，让你在几分钟内无需编写代码即可创建自定义 Web 应用和网站。Hostinger AI Builder 智能体模式适合想要构建功能性浏览器应用的个体创业者或新手，例如健身追踪器或管理工具，也可以通过自然语言提示词构建完整网站。它同样适合希望通过高级提示和手动调试来更轻松地构建复杂软件的 Web 开发者。

Hostinger AI Builder 智能体模式的工作原理

Hostinger AI Builder 智能体模式充当 AI 协作者。你可以通过文字或语音下达指令，AI 会为你的网站或应用生成代码、文件结构和后端。

  • 多语言支持：使用你偏好的语言输入提示词，支持超过 80 种语言。
  • 视觉输入：你可以上传图片或截图，让 AI 解读并据此重新创建。
  • 电子商务：将你的项目连接到 Hostinger Ecommerce（一项独立订阅），直接在 Hostinger 内管理你的在线商店。
  • 技术灵活性：Hostinger AI Builder 智能体模式会自动为你的应用选择技术栈，通常后端采用 Node.js，前端采用 React 和 Vite。不过，你也可以指定所需的技术或工具。

更改默认技术栈可能会导致兼容性问题。

使用 Hostinger AI Builder 智能体模式创建网站和应用

Hostinger AI Builder 智能体模式专为“凭感觉编程”（vibe coding）而设计，让你能够构建跨多个类别的各种数字项目。以下是一些示例：

  • 专业网站：构建落地页、个人作品集、企业网站、在线商店和活动网站。

实际演示：观看如何使用 Hostinger AI Builder 智能体模式构建专业作品集网站——无需编程：

观看视频

观看视频

  • 生产力与任务管理：创建习惯追踪器、健身平台、交互式待办事项清单、时间追踪工具或头脑风暴白板、个人预算计算器、储蓄目标监测器等。
  • 仪表盘：将关键指标可视化，例如个人财务概览或项目状态监控器。
  • 学习与娱乐：创建游戏化的学习应用、互动测验，或贪吃蛇、俄罗斯方块等经典 2D 游戏的网页版。

如何访问 Hostinger AI Builder 智能体模式

要使用 Hostinger AI Builder 智能体模式创建你的第一个网站，请按照以下步骤操作。

  1. 进入 Hostinger 控制面板 → Websites。
  2. 点击 Create website 并选择 AI Builder
  3. 选择 agentic
  4. 输入你的初始提示词，可选择附加图片或 PDF 来引导 AI，然后继续后续步骤。

为你的网站选择一个域名，或选择使用临时域名以便稍后设置，然后继续。如果你使用临时域名，Hostinger AI Builder 会根据你的初始提示词生成一个项目名称，例如 calendar-app-802980.hostingersite.com，这样即使你有多个项目，之后也更容易识别。

要编辑现有网站：

  1. 进入 Hostinger 控制面板 → Websites。
  2. 找到你的网站并点击 Edit website。

Hostinger AI Builder 智能体模式界面功能

Hostinger AI Builder 智能体模式编辑器分为几个功能区域，帮助你管理和完善项目。

侧边栏菜单

点击 ≡ 图标可访问你的网站管理工具。

  • AI 额度（AI credits）：显示当前周期内的剩余额度和总额度。
  • AI 额度使用情况：提供过去 24 小时、7 天或 30 天额度消耗的详细图表。
  • 获取 AI 额度：可升级主机方案或为当前余额充值。
  • Hostinger 控制面板：跳转到 Hostinger 主控制面板。
  • 创建新网站：从零开始一个全新项目。
  • 复制此网站：创建当前项目的副本。
  • 账户共享：安全地授予其他用户或协作者访问你的主机方案的权限。
  • 通过 Hostinger AI Builder 赚钱：访问推荐计划，或允许他人将你的网站用作模板以赚取佣金。
  • 完成提示音：开启或关闭 AI 完成任务时的音频通知。

聊天区域

查看你之前的提示词和回复。在每次 AI 输出后，你可以找到以下选项。

  • 回复特定文本：选择 AI 回复中的任意文本并点击 Reply，将其附加到你的下一条消息中。这样 AI 就能准确知道你指的是哪部分内容，无需复制、粘贴或描述。
  • 快速选择回答：当 Hostinger AI Builder 提出澄清问题时，你可能会看到可点击的回答选项，而无需输入完整回复。根据问题的不同，你可以选择单个选项、选择多个选项或自己撰写答案。
  • 提供反馈：对消息进行评分，以改进未来的回复。
  • 额度使用情况：此图标显示某条回复是否使用了 AI 额度。将鼠标悬停在上面可查看详情。
  • 撤销/恢复：还原某条消息带来的代码更改。如果没有可撤销的操作，则不会显示恢复按钮。
    Hostinger AI Builder 界面，橙色箭头突出显示 Restore 按钮
  • 当一条回复修改了多个文件时，每个文件都会作为单独的 Code changes 条目显示，并拥有自己的 Restore 按钮，因此你可以只还原单个文件的更改，而不必还原整条消息。
  • 在桌面端，你可以通过拖动边缘来调整聊天面板的大小。你偏好的宽度会被保存，重新加载页面后仍会保持不变。将手柄一直拖到一侧可隐藏面板，双击手柄可重置为默认宽度。

提示词区域

这是你与 AI 交流的地方。输入文字，或通过麦克风图标使用语音转文字功能。你还可以使用图片图标上传参考图片。

顶部导航栏

管理网站的技术相关设置。

  • Agent：即时获得产品相关问题解答。
  • Publish：将你最新保存的更改推送到网站的线上版本。

在预览区域，你可以使用以下编辑器模式：

  • 刷新预览：更新当前视图。
  • 打开主页（主页图标）：在预览模式下加载你的主页。
  • 编辑器模式：在以下模式之间切换：
    • Preview（预览）：默认模式，显示网站的最新更新。
    • Select and edit（选择并编辑）：使用此工具点击网站上的一个或多个元素——拖动或按 Shift+点击可选择多个——然后手动编辑它们（文本格式、图片），或输入指令让 AI 仅对所选元素应用更改。你还可以在标注中附加参考图片供 AI 使用，例如你想用作背景的照片。支持的格式包括 JPEG、PNG、GIF、WebP、AVIF 和 ICO，每次会话最多 10 张图片，每张图片最大 15 MB。此功能会消耗 AI 额度，与其他 Select and edit 更改相同。
    • Code（代码）：查看文件结构并使用代码编辑器。
    • Data（数据，可选）：访问集成后端。仅当你的网站添加了后端功能时可用。
  • 设备切换：切换到移动端视图，检查应用的响应式表现。
  • 在新标签页中打开网站预览的按钮。
  • 全屏视图（隐藏聊天和提示词区域）

借助 Hostinger AI Builder 智能体模式，你只需描述想要构建的内容，AI 就能为你的项目生成代码、设计和后端。

注意事项

  • 目前，Hostinger AI Builder 智能体模式无法创建 3D 游戏、浏览器扩展、交易或银行类应用，以及适用于 App Store（iOS）或 Google Play（Android）的原生移动应用。
  • 使用撤销/恢复功能将网站还原到之前的状态不会退还已使用的额度。

常见问题

Hostinger AI Builder 智能体模式能否用英语以外的语言构建网站？
可以。你可以使用自己偏好的语言输入提示词，Hostinger AI Builder 智能体模式支持超过 80 种语言。

我可以选择特定的技术栈而不是默认的吗？
可以。Hostinger AI Builder 智能体模式默认自动选择 Node.js、React 和 Vite，但你可以指定所需的技术或工具。

Hostinger AI Builder 智能体模式可以构建移动应用吗？
不可以。它目前无法构建适用于 App Store（iOS）或 Google Play（Android）的原生移动应用。