从0到1:我用AI三天做了一个完整的天气查询网站

站长
2026年3月26日 · 阅读 558 · 点赞 23

从0到1:我用AI三天做了一个完整的天气查询网站

我是一个产品经理,写代码的经验约等于零。三天前我决定挑战自己:用AI做一个天气查询网站。这是我的完整经历。

Day 1:从一句话开始

我跟Claude说:

帮我做一个天气查询网站,输入城市名就能看到天气

AI立刻给了我一个方案:用HTML + JavaScript,调用免费的天气API(OpenWeatherMap)。

踩坑1:API Key
天气API需要注册获取Key。AI教我去OpenWeatherMap注册,但新Key需要等2小时才能用。我一开始不知道,以为代码写错了,折腾了好久。

经验:问AI之前先说清楚你是新手。 我后来改成这样问:

我是完全的新手,从来没用过API。
请从注册账号开始,一步步教我怎么获取天气API的Key,
以及怎么测试Key是否生效。

这次AI给了详细到每个按钮的操作步骤。

Day 2:让它变好看

基础功能跑通后,界面很丑。我跟AI说:

现在能查天气了,但界面太简陋。
帮我改成这样:
  • 背景根据天气变化(晴天蓝色、雨天灰色)

  • 加上天气图标

  • 显示未来3天预报

  • 手机上也能用

  • AI一次性帮我改好了,效果比我预期好太多。

    踩坑2:跨域问题
    直接打开HTML文件调用API会报错(CORS),AI教我用一个简单的本地服务器解决:

    npx serve .

    一行命令就搞定了。

    Day 3:部署上线 + 分享

    最后一天把网站部署到Vercel:

  • 代码推到GitHub

  • Vercel导入仓库

  • 一键部署
  • 然后我把链接发到朋友圈,收获了一堆点赞。有人问我"你什么时候学的编程",我说"没学过,AI帮我写的"。

    最终成果

  • 输入城市名查询实时天气

  • 显示温度、湿度、风速、天气图标

  • 未来3天天气预报

  • 自适应背景颜色

  • 手机电脑都能用

  • 全球都能访问
  • 三天学到了什么?

  • AI不是万能的,但90%的事情它都能搞定

  • 描述需求比写代码更重要——你说得越清楚,AI做得越好

  • 先跑起来,再优化——不要一开始就追求完美

  • 搜索能力很重要——AI不知道的,Google一下就行
  • 给想尝试的人

    如果你也想试试,我的建议:

  • 选一个你真正想用的东西来做(天气、汇率、倒计时都行)

  • 不要怕出错,AI可以帮你修

  • 一步一步来,别贪多

  • 做完记得分享,成就感会驱动你继续学
  • 站长
    人人都是程序员,站长