Hostinger Horizons 教程:教你做自己的Web App在线网页小工具!
你有没有想过,仅仅通过一句简单的提示词,就能生成一个能运行在网页上的实用工具?这一切,都是通过 Hostinger Horizons 这款AI驱动的网页应用生成器实现的。它可以用自然语言理解我们的需求,自动生成代码,并部署成网页应用——不用写代码、不用请开发,几分钟搞定!
什么是Hostinger Horizons?
这是Hostinger推出的AI网页应用生成平台,英文名是 Horizons(/ˈhɒr.ɪ.zənz/),我们发音不准的常常会说成“哈赖森”之类的,记得纠正下。
它的工作原理很简单:你只需要告诉它你想做什么,它就能自动生成一个Web App。比如:
- 在线代办清单
- 在线图片压缩
- Instagram视频下载工具
- 滤镜添加工具
- Word转PDF工具
这些工具的界面、交互功能、后端逻辑甚至手机端适配,全部由AI自动完成。
AI小工具的变现方式
你制作的工具,不仅可以提升自己网站的实用性,还能通过挂载广告实现收入,比如申请 Google AdSense。这就相当于为你的博客、电商独立站、自媒体网站加上了一层功能护甲和收入来源。
实例演示:番茄钟工具(Pomodoro Timer)
例如我们想做一个“在线番茄钟”工具,帮助用户高效管理时间,我们只需要把需求告诉Horizons,比如:
“请帮我做一个更美观、有动画效果的在线番茄钟工具,具备倒计时、休息提醒功能。”
几秒后,它就会:
- 自动设计界面(配色、排版、动效)
- 编写HTML+CSS+JS代码
- 实现倒计时逻辑、按钮交互
- 自动适配手机端
我们只需点击“开始工作”按钮,它就开始倒计时,每25分钟提醒休息5分钟,还能记录你已完成的任务数量。界面简洁炫酷,响应式非常到位。
应用生成后的发布方式
当你确认功能没问题之后,只需点击右上角的“发布”,它就会生成一个在线的临时网站链接,比如:
https://yourapp.hostingersite.com/
你可以将这个链接发送给朋友使用,也可以将它嵌入你自己的网站。代码非常简洁,使用 <iframe>
即可完成嵌入:
<iframe src="https://salmon-grouse-611143.hostingersite.com/" width="100%" height="600px" style="border:none; overflow:auto;"></iframe>
提示:嵌入时建议使用 100% 的宽度和 1000px 左右的高度,更适配大多数网页布局。
好的,以下是第二部分内容整理,继续保持网站文章风格,并修正了术语错误。内容涵盖图片放大、滤镜添加、文件转换等实战案例,总字数控制在3500字符以内。
示例2:AI无损图片放大工具(带滤镜效果)
接下来,我们尝试构建一个“图片无损放大”工具。
我们先告诉 Hostinger Horizons 的提示词如下:
请帮我制作一个可以将图片无损放大4倍的工具,支持JPG、PNG格式,界面要好看,并且可以实时预览放大效果。
生成后的工具支持拖拽上传照片,设置放大倍数(如4倍),点击“开始”后,AI将图片智能处理并生成高清大图供下载。
效果非常惊艳,测试原图仅有 800×800像素、280KB,放大后达到了4倍高清,还能下载保存。
增加滤镜功能
我们进一步对AI提出需求:
除了图片放大,我还希望增加多种滤镜效果,例如复古、黑白、电影感,并提供实时预览。
AI再次响应,帮我们在界面中添加了滤镜下拉选择菜单,用户可以:
- 上传图片 → 设置放大倍数 → 选择滤镜风格 → 实时预览 → 下载高清版本
并自动适配手机端。过程中我们发现了小BUG(滤镜无法预览),只需在对话框中告诉AI“希望增加预览功能”,它就自动重写逻辑,完美修复。
示例3:Word转PDF工具
想实现 Word 文档一键转 PDF?这也可以!
我们向 AI 提示:
帮我制作一个美观且易用的在线 Word 转 PDF 工具,上传 Word 文件后可直接转换成 PDF 并下载。
AI迅速生成界面:上传 → 转换 → 下载,看似一切正常。但点击下载后打开PDF报错,说明这个转换工具只是前端模拟,还未接入真实转换功能。
我们再次询问 AI,它给出的建议是:
需要调用第三方转换API,如 CloudConvert、PDF.co 等,这些平台支持REST API调用,并提供每日免费额度。
也就是说,这类功能虽然UI可快速生成,但要实现后端转换,需接入专业API。我们可以让ChatGPT写好API调用逻辑,再粘贴回Horizons让它帮我们集成,轻松完成整合。
示例4:IG视频下载工具
再比如我们要做一个“Instagram视频下载工具”。
我们只需告诉Horizons:
帮我做一个IG视频下载工具,界面要好看,支持粘贴链接后点击下载。
界面生成没问题,但实际点击“下载”按钮无反应。AI提示:这个只是前端演示,真正下载功能还需要调用Instagram视频解析的API服务。
推荐的API平台包括:
- RapidAPI
- SaveIG
- Instaloader(开源)
我们只需购买API使用权限,把API端点和参数交给Horizons,它就能自动集成下载功能到前端页面。
好的,以下是整理后的第三部分内容,继续保持结构清晰、术语规范、适合发布在网站上的风格,内容包含智能代办事项工具的案例讲解及其如何嵌入 WordPress 网站。
示例5:多功能在线代办清单工具
最后一个实战案例,我们使用 Hostinger Horizons 制作一个「智能代办清单工具」。
我们给 AI 的提示词是:
帮我创建一个支持任务添加、编辑、删除、完成标记、截止日期设置、任务分类的代办清单工具,UI要简洁好看,支持手机端自适应。
短短几秒,AI 就交付了完整成品。
功能包括:
- 添加任务(输入标题、描述、优先级、截止时间、标签等)
- 任务状态追踪(已完成 / 未完成 / 已逾期)
- 不同界面风格切换
- 支持任务编辑与删除
- 手机端自适应显示优化
例如我们新增一个任务:“明天上午9点和王总开会”,设置为高优先级,加上“开会”标签,点击保存即可加入清单。如果勾选“已完成”,上方统计信息会自动更新;逾期任务也会高亮提醒。
这个代办工具不仅功能完备,还能作为独立网页发布或嵌入你自己的网站。
如何将生成的Web App工具嵌入WordPress网站?
生成的小工具可以通过以下方法嵌入WordPress页面:
第一步:复制工具发布链接
- 在 Hostinger Horizons 项目中点击右上角【发布】
- 系统会自动生成一个在线访问链接,如:
https://yourapp.hostingersite.com/
- 复制这个链接备用
第二步:WordPress后台添加新页面
- 登录你的网站后台,点击【页面】>【新建页面】
- 输入页面标题,例如“智能代办小工具”
- 插入一个【自定义HTML】模块
- 粘贴以下代码(记得替换
src
链接为你自己的):
<iframe src="https://yourapp.hostingersite.com/" width="100%" height="1000px" style="border:none; overflow:auto;"></iframe>
- 点击右上角【发布】按钮
第三步:前台预览效果
发布后点击“查看页面”,就能在自己的网站中看到功能完备、可交互的小工具!
🔗 本期嵌入代码和完整提示词也可以在我整理的文章中查看:AI有风.com
好的,以下是第四部分内容,重点介绍如何购买 Hostinger 主机、绑定域名、快速搭建 WordPress 网站,适合零基础用户操作。已优化术语并适合发布为SEO友好的网页文章,字数仍控制在3500字符以内。
如何快速搭建一个支持AI小工具的网站(WordPress + Hostinger)
如果你还没有自己的网站,没关系!下面我会一步步教你,如何通过 Hostinger 搭建一个WordPress网站,并将AI小工具集成到里面去。
第一步:选择主机方案(Hostinger)
进入 Hostinger 官网,选择主机方案。推荐如下配置:
- 推荐套餐:Premium共享主机
- 可搭建最多50个网站
- 提供100GB NVMe SSD空间
- 每日自动备份
- 免费SSL证书
- 赠送1年免费域名
- 支持中文界面、支付宝支付
价格参考(根据购买时长不同):
- 1个月:¥102.99/月
- 12个月:¥36.99/月
- 24个月:¥32.99/月
- 48个月:¥29.99/月(最划算)
支持30天退款保证,新手可放心尝试。
✅ 建议选择24个月或更长时间,价格更低,功能一致。
第二步:完成购买并创建账户
- 选择套餐后,点击【继续】
- 填写账单信息(姓名、国家等)
- 支付方式选择“支付宝”或“银联”
- 创建你的Hostinger账号(邮箱+密码)
- 支付完成后,Hostinger 会自动跳转到网站搭建流程
第三步:安装WordPress
完成购买后,进入Hostinger管理后台:
- 进入【网站】>【添加网站】
- 选择“使用WordPress安装网站”
- 设置管理员邮箱与密码(用于登录你的网站后台)
- 选择是否使用免费赠送的域名,或使用临时域名
- 选择一个模板(可后续更换),点击“完成”
等待1~2分钟,WordPress会自动部署好。
第四步:访问网站后台并开始编辑
- 后台地址通常为:
https://你的域名/wp-admin
- 使用你刚刚设置的邮箱和密码登录
- 进入后台后,你可以:
- 发布文章 / 页面
- 更换主题(如 Divi)
- 安装插件(如 Elementor Pro)
- 嵌入刚才通过Horizons生成的AI工具
通过 Elementor 可视化编辑器,你可以更自由地排版、插入小工具、添加按钮、设置跳转,打造更美观、实用的网站页面。
第五步:嵌入你生成的小工具
如果你已经通过 Hostinger Horizons 制作了如“图片放大”、“代办清单”、“IG下载”等工具,只需复制工具链接,用 <iframe>
方式嵌入,即可实现网页功能模块化,操作非常简单。
如果你希望把这类功能模块聚合成一个“工具站”进行变现,可以参考我网站上的实际案例或加入我的圈子:
👉 向我咨询交流:加入知识星球圈子
好的,以下是本篇文章的最后一部分,我将为你总结适合用 Hostinger Horizons 制作的热门小工具方向,给出适合普通人操作的变现思路建议,方便你后续内容布局与SEO优化使用。
热门AI小工具制作方向与变现建议
Hostinger Horizons 的强大之处在于:你只要有想法,AI就能帮你把它做出来。不需要你懂代码,也不需要你自己设计界面。以下是我整理的一些热门小工具方向,适合各类网站主、博主、电商店主、自媒体人使用:
🔧 1. 自媒体博主适用工具
工具名称 | 功能描述 |
---|---|
AI标题优化器 | 输入原始标题,自动生成SEO友好版本 |
脚本生成器 | 输入话题,输出内容脚本 |
语音转文字 | 上传音频,生成字幕稿 |
Markdown转HTML工具 | 方便博主格式转换 |
💡 可结合 ChatGPT 文生图、视频剪辑等功能,打造全流程“内容创作辅助站”。
📦 2. 电商类网站可用工具
工具名称 | 功能描述 |
---|---|
尺码推荐工具 | 输入身高体重,输出合适的服装尺码 |
运费计算器 | 根据地区自动计算邮费 |
产品对比助手 | 输入两个商品链接,智能对比参数 |
配色方案推荐器 | 上传图片或选主色,自动生成配色方案 |
💡 可整合进你的 Shopify 独立站(推荐 Shopify 注册链接),提升购物体验,增加转化率。
📚 3. 教育 / 博客类适用工具
工具名称 | 功能描述 |
---|---|
在线字数统计器 | 输入文章内容,统计字数与关键词密度 |
在线作文打分工具 | 输入文本,AI分析并打分 |
英语单词发音辅助 | 输入单词,生成音标+朗读 |
💡 可结合AdSense或知识付费体系进行内容变现,提升网站停留时间和专业感。
🧩 4. 实用型通用小工具(适合做“工具导航站”)
- 图片压缩、裁剪、加滤镜
- 视频转码、分辨率压缩
- PDF合并/拆分/转Word
- 社交平台视频下载(需API接入)
- 正则表达式测试工具
- 番茄工作法定时器
- 记账本、每日计划表、打卡记录
💡 建议用一个二级域名(如 tools.你的域名.com)专门打造“AI工具箱”,整合所有Web App,不仅能增加网站SEO权重,还能靠广告位赚钱。
写在最后:为什么强烈推荐Hostinger Horizons?
如果你:
- 不会写代码
- 没有开发预算
- 想快速搭建一个实用工具站
- 想用AI为你的博客、电商、内容变现赋能
那么,Hostinger Horizons 就是目前最值得尝试的AI Web App生成工具之一。不到200块/月的价格,相当于请了一位全能的AI开发者,随叫随到、秒回需求。
再结合 Elementor Pro、Divi主题、Semrush 等专业工具,你就能打造出一个功能强大、页面美观、具备商业价值的网站。
👉 想了解更多AI变现技巧?欢迎加入我的知识星球:点击加入