自从Copilot推出后,市面上涌现了不少AI IDE,比如Cursor、Windsurf等等。后来又出现了一些不需要写代码的工具,比如v0.dev和bolt.new。
你们有没有用过这些AI工具?用得怎么样呢?
A. 完全没用过
B. 偶尔用来修正语法或bug
C. 用AI做一些小功能
D. 完全依赖AI开发了一个项目
如果你是D类,能不能分享一下你是怎么做到的?
前几天,我在一个群里看到一位牛人提到“Snow Day Calculator”这个词。于是我好奇地去谷歌上搜了一下,发现了很多类似的工具。在这个基础上,我决定自己做一个,现在就来和大家分享一下我的经历。其实,做这样的网站并不复杂,群里好多个高手很快就模仿出来了。作为一名SEO新手,我想分享的是如何从零开始做出一个成品网站,以及在这个过程中使用的AI工具。
俗话说,工欲善其事,必先利其器。我首先找到了一个排名很高的同类网站,然后向万能的ChatGPT求助:
https://www.snowdaycalculator.com/calculator.php,想了解一下这个网站是怎么实现的,背后用到了哪些技术,请用中文告诉我。
ChatGPT的回答是:
Snow Day Calculator网站是一个通过输入邮政编码和选择学校类型来预测降雪天数的平台。以下是对其实现技术的分析:
- 前端技术:
- HTML/CSS/JavaScript:这个网站有个简单的用户界面,用户可以输入邮政编码并选择学校类型,所有的交互功能通常是通过 HTML 表单和 JavaScript来实现的。
- 响应式设计:为了支持各种设备,可能使用了CSS和框架(比如Bootstrap)来优化布局和用户体验。
- 后端逻辑:
- 气象数据整合:这个网站的核心功能是根据气象数据来预测雪天。很可能是通过调用气象API(例如NOAA或其他天气服务)来获取实时天气信息。
- 算法和模型:预测的准确性依赖于降雪的时间和强度等信息,可能使用了机器学习模型或基于规则的算法来计算雪天的概率。
- 服务器语言:后端可能使用了常见的编程语言(如Python、PHP或Node.js)来处理用户输入并与气象API进行通信。
- 数据库:
- 用户信息:如果需要保存用户的偏好或历史数据,可能会使用MySQL、PostgreSQL或其他数据库。
- 气象历史数据:为了提高预测的准确性,可能会存储过去的气象数据。
- API集成:
- 气象数据API:用于获取实时天气信息(如降雪强度和时间)。
- 地理位置API:根据用户输入的邮政编码来确定具体位置。
- 部署与性能优化:
- 托管平台:可能托管在AWS、Google Cloud或其他云平台上。
- 性能优化:通过使用缓存、CDN等技术来减少延迟,提升用户体验。
- 版权与法律:
- 网站的版权属于David Sukhin,并且自2007年起开始运营。这说明其技术栈可能经过了多次迭代和更新。
总的来说,这个网站结合了天气数据API、用户交互表单、后端算法和预测模型,实现了自动预测雪天的功能。
我又问:
它可能调用了哪些API呢?
ChatGPT的回答是:
要实现像Snow Day Calculator这样的站点,可能会调用以下几类常见的API来获取数据和实现功能:
1. 气象数据API
这些API提供实时和历史天气数据,包括降雪量、风速、气温等:
- NOAA API(美国国家海洋和大气管理局):提供详细的天气和气候数据。
- 官网:https://www.noaa.gov
- OpenWeatherMap API:
- 提供天气预报、降雪量等信息,并支持多种开发语言。
- 官网:https://openweathermap.org/api
- WeatherStack API:
- 支持实时和历史气象数据查询。
- 官网:https://weatherstack.com
- AccuWeather API:
- 提供专业级的天气数据。
- 官网:https://developer.accuweather.com
- Dark Sky API(目前已被Apple收购,部分服务已转移至Apple Weather Kit)。
2. 地理位置API
为了根据用户输入的邮政编码确定地理位置,可能使用以下API:
- Google Maps Geocoding API:
- 根据邮政编码返回地理位置信息,如经纬度。
- 官网:https://developers.google.com/maps/documentation/geocoding/start
- Mapbox API:
- 类似Google Maps,提供地理编码服务。
- 官网:https://www.mapbox.com
- USPS ZIP Code Lookup API:
- 专为美国邮政编码解析设计的工具。
- 官网:https://www.usps.com/business/web-tools-apis
3. AI和预测模型API
用于实现雪天概率的算法或预测模型:
- TensorFlow.js或PyTorch(如果网站使用自建AI模型):
- 可能结合气象历史数据,训练自定义的机器学习模型。
- BigML或Google AI Platform:
- 可直接使用云端机器学习模型来进行预测分析。
4. 时间与日历API
用来判断雪天是否会影响正常工作或学习:
- Google Calendar API:
- 提供校历或常规日历信息。
- 官网:https://developers.google.com/calendar
5. 通知或提醒服务
如果网站需要发送雪天的通知或提醒,可能会用到:
- Twilio API:
- 用于短信通知。
- 官网:https://www.twilio.com
- Firebase Cloud Messaging:
- 提供跨平台的推送服务。
- 官网:https://firebase.google.com/products/cloud-messaging
可能组合的技术流程
如何快速搭建一个雪天预测网站
- 用户输入邮政编码 → 使用地理位置 API 获取对应的经纬度。
- 调用气象 API → 获取该地区的降雪强度和时间等信息。
- 运用 AI/预测模型 → 结合天气数据和历史记录,分析雪天的概率。
- 结果反馈给用户 → 展示雪天的可能性,甚至发出通知提醒。
这样的实现方式既灵活又高效,具体用哪个 API 可以根据你的预算(比如免费 API 的限制)和精度要求来选。
大致思路其实就是:模仿一个类似的网站,接入相应的 API,然后把它部署到云端。
我找到一个类似的网站:https://snowdaycalc.net/,这个网站的界面设计得很简洁,首页内容也很丰富。

我选择了bolt.new作为开发工具,比较了几个 AI 编程工具,觉得这个在前端界面设计上效果最好。
为了让 AI 达到我预期的效果,良好的提示词是必不可少的。我选择了一个 gpts 模型:

为了达到理想的结果,我多次调整了命令:


gpts 最终给出的输出结果:
修改后的提示词(中文):
请基于提供的图片使用 Next.js 框架创建一个网站,尽可能实现与图片一比一的视觉还原效果。同时,请确保网站符合 SEO 优化最佳实践,包括但不限于以下内容:
1. 语义化 HTML:在组件中使用正确的标签结构(如 、、
由于 bolt.new 对英文的支持更好,所以让我得到了一份中英文双语的版本。中文是为了自己审查,看看哪些地方需要调整,而英文的指令则交给 bolt.new 来执行,同时记得把参考网站的截图上传:

没过多久,bolt 就完成了初版,效果非常不错,可以点击 Code 查看项目结构:

bolt 还提供了一个终端,可以直接执行命令。
现在只是完成了界面开发,后端功能还没实现。根据一开始 ChatGPT 的建议,我选择了https://weatherstack.com/的免费 API,并输入相关命令:
我认真阅读了文档:https://weatherstack.com/documentation,并根据文档接入了后端 API。
bolt 很快就把 API 接入好了:

现在可以直接在线测试,输入邮政编码 30339 进行测试:

出现了错误,左边可以直接点击修复,真是智能:

很快 bolt 就修复好了,再次进行测试:

结果非常惊艳!觉得差不多了,可以点击右上角的 Export 将整个源码下载到本地,然后用 cursor 或 windsurf 继续开发。
随后我用 windsurf 继续修改和填充网站内容,最终效果如图:

我把源代码上传到了 GitHub:https://github.com/isunshihan/snow-calculator,部署到 Vercel 就可以直接运行,还有详细的说明文档。
如果你觉得这些信息有帮助,别忘了动动手指点个赞哦!











火龙果的分享太有启发性了,真想试试用AI做个小项目!
火龙果的经历让我想到,很多现成的工具其实只要稍加改进就能派上大用场。
听完你的分享,感觉AI工具真的能改变开发方式。想试试用AI来做个小功能。
提到的气象API,具体怎么接入和使用呢?有经验的分享一下。
模仿别人的网站,还是得有自己的创新,简单的复制往往不长久。
火龙果的经验分享中提到的SEO技巧,能否再深入一点,特别是新手应该注意什么?
火龙果提到的气象API,听起来有点复杂,适合新手吗?
对于新手来说,做项目时可以考虑从简单的功能开始,逐步增加复杂度。
听说Snow Day Calculator挺火的,你做的这个版本有什么特别之处吗?能分享一下吗?