让AI编程从零搭了个天气预报小工具，全程只用了两小时

上周朋友问我："你不是天天用AI写代码吗，能不能让它帮我做一个查天气的小工具？"我说行，找个周末试试。然后花了一个周六下午，从零开始，让AI帮我搭了一个完整的天气预报查询工具，前端后端加部署，全程大概两小时。

下面记一下整个过程，每一步都写了我是怎么跟AI说的，以及AI哪里靠谱哪里不靠谱。如果你也想用AI从零做一个项目，可以参考这个流程。

先想清楚做什么，再让AI动手

我没上来就让AI写代码。先用五分钟在脑子里画了个大概的图：

用户打开网页 → 输入城市名 → 点查询 → 看到未来三天的天气预报（温度、天气状况、风力）。后端调一个免费天气API，前端用简单的HTML页面展示。

这个需求大概三十秒就能说清楚，但如果你不先说清楚，AI会按照它自己的理解来做——比如它可能给你做一个需要登录的、支持多城市的、带地图的天气预报系统。东西做出来了，但不是你要的。

我给AI发的第一段话是这样的：

"我要做一个天气预报查询小工具，技术栈用Node.js + Express做后端，前端用纯HTML/CSS/JS。功能：用户输入城市名，点击查询，显示未来三天的天气，包括温度、天气状况、风力。使用免费天气API。先别写代码，先给我一个项目结构和实现方案。"

AI给了我一个方案：后端两个接口（一个查城市编码，一个查天气），前端一个页面，数据从和风天气免费API获取。我看着方案想了三十秒，觉得合理，说"可以，按这个来"。

先搭架子，别一上来就写细节

第二步是搭项目骨架。我跟AI说："先创建项目目录结构，建好package.json和基本的Express服务器，能跑起来就行，不要写业务逻辑。"

AI生成了几个文件：一个入口文件index.js，一个路由文件，一个package.json。我复制到本地，npm install，node index.js，浏览器打开localhost:3000——显示"Server is running"。骨架搭好了，30秒能跑起来。

这个顺序很重要。很多新手上来就让AI写完整功能，代码一长串，跑不起来也不知道哪里出了问题。正确做法是：搭骨架→验证能跑→再加功能。每加一步就验证一步，出问题也知道是刚加的这一步出的。

核心功能分步实现，每一步都验证

架子搭好之后，我开始让AI写业务逻辑。按"城市搜索→获取天气→前端展示"的顺序，一步一来。

第一步：城市搜索接口。我给AI发了一段话："请实现城市搜索接口GET /api/city/search?keyword=北京，调用和风天气城市搜索API，返回匹配的城市列表。需要处理API请求失败的情况，返回统一的错误格式。"

AI写了大概四十行代码，我用Postman测试了一下——输入"北京"，返回了城市列表，里面有城市ID。输入了一个不存在的城市名"阿巴阿巴"，返回了空数组。错误处理也正常。第一步完成。

第二步：天气查询接口。我说："请实现GET /api/weather/:cityId，接收城市ID，调用和风天气7天预报API，返回未来三天的天气数据，包括日期、最高温、最低温、白天天气状况、风力。处理API失败和城市ID无效的情况。"

AI又写了大概五十行代码。我测试了几个城市，数据格式正确，但有一个问题——风力数据有时候返回的是空字符串，前端显示出来就是一片空白。我让AI加了一个默认值处理：如果风力数据为空，显示"微风"。

这个细节AI自己没注意到，是我测出来的。AI可以帮你写代码，但边界情况还是得你自己测。

前端：AI写的界面能用，但不太好看

后端搞定了，开始写前端。我说："请写一个前端页面index.html，包含搜索框和天气展示区域。用户输入城市名，调用后端城市搜索接口，选择城市后调用天气接口，展示未来三天的天气卡片。用原生HTML/CSS/JS，不要用框架。"

AI写了一个功能完整的页面，该有的都有——搜索框、下拉选择、天气卡片、加载状态。功能上没问题，但样式比较朴素，像个2015年的网页。

我追加了一句："请优化页面样式，使用现代简洁的设计风格，添加渐变背景、卡片阴影、圆角、图标，让整体看起来像2024年的网页。"

AI重新写了CSS，好看了不少。但颜色搭配还是有点奇怪——它用了一个深紫色背景配亮黄色文字，不太协调。我手动把颜色调成了浅蓝渐变配白色卡片，看起来舒服多了。

AI写CSS的能力，目前是"能写对，但不够好看"。功能样式没问题，审美方面还得人把关。如果你对设计有要求，建议自己调颜色和间距，或者至少给AI一个参考网站让它模仿。

错误处理：AI容易漏掉的地方

前后端都跑通之后，我故意做了一些异常操作来测试：

——输入一个不存在的城市名，报错了。因为前端没有处理"搜索无结果"的情况，直接显示了一个undefined。我让AI加了一个"未找到匹配城市"的提示。

——网络断开的时候点查询，页面卡住了。因为前端没有加loading状态和超时处理。我让AI加了loading动画和"请求超时，请重试"的提示。

——连续快速点击查询按钮，发了一堆重复请求。我让AI加了防抖处理。

这三个问题，AI在我第一次要代码的时候都没考虑到。是我测试之后发现了，再让它加的。AI编程的舒服之处在于——你发现一个问题，告诉它，它几秒钟就改好了。但前提是你能发现这些问题。如果你自己不测，这些问题就一直在那里。

部署：AI给了一个完整的方案

功能都好了，最后一步是部署。我说："请给出这个项目的部署方案，我有一台云服务器，已经装了Node.js。需要什么步骤？"

AI给了我一整套方案：用PM2管理进程、用Nginx做反向代理、配置域名和HTTPS、设置环境变量。每步都有具体的命令和配置示例。我照着做，大概二十分钟就部署好了。

部署完之后，AI还提醒了我一句："生产环境记得把API key放在环境变量里，不要硬编码在代码中。"这个提醒很到位，它确实在代码里直接写了API key，我差点忘了改。

回头看：两小时搞定的原因和没搞定的原因

这个天气预报小工具，从零到上线，全程大概两小时。能这么快搞定，主要有几个原因：

一是需求够小。一个输入框，一个API调用，三张天气卡片。范围小，AI不容易跑偏。

二是每一步都验证。搭架子→后端→前端→错误处理→部署，每步都测了再往下走。出问题的时候知道是哪一步出的。

三是AI写样板代码真的快。Express路由、API调用、错误处理模板、前端DOM操作——这些代码我自己写大概要一个多小时，AI几秒钟就出来了。

也有一些地方AI帮不上忙，或者说帮了倒忙：

一是审美。前端的颜色搭配、间距、整体风格，AI做出来的只能说"能用"，离"好看"还有距离。这部分需要人的审美判断。

二是边界情况。空数据、网络错误、用户骚操作，这些AI不会主动想到，需要你测试之后告诉它。

三是API对接。和风天气的免费API文档，AI知道个大概但不完全准确。API的具体参数和返回格式，还是得自己查文档确认。

如果你想用AI从零做一个项目，我的建议是：选一个够小的需求，搭好架子再慢慢加功能，每一步都测，发现边界问题就告诉AI让它改。别指望AI一次性给你一个一步到位的成品——它做不到，但它在你的引导下能做到。