零基础做第一个 App这个概念放在三年前还是一句劝退话你得先花两三个月学编程语法再弄明白前端、后端、数据库分别是什么然后才有资格写一个能跑的东西。现在用 AI 编程工具路径被压缩得很短。我见过完全没写过代码的人用 Cursor 这类 AI 编辑器从零做出了能打开、能操作、能发给朋友试用的记账 App。这篇保姆教程就按这条路线完整拆开项目怎么选、工具怎么装、需求怎么描述、报错怎么处理、最后怎么发布。全程默认你没有任何编程基础但我会把每一步背后的原因也说清楚。AI 编程不是魔法它解决的是“写代码”这个环节而你需要解决的是“说清楚需求”和“验收结果”这两个环节。把这两件事做好你的第一个 App 就能稳稳落地。1. 先想清楚AI 编程能帮你做成什么样不能替你决定什么1.1 你的第一个 App最合适是什么形态“App”这个词在很多人心里等于手机上那个图标但做第一个项目时形态选择比功能设计更重要。不同形态的开发成本、发布流程和上手难度差很多。App 形态上手难度发布方式适合的场景网页 App最低部署到静态托管平台得到一个网址第一个练手项目、个人自用小工具微信小程序中等小程序平台注册、提交审核想分享给微信好友直接使用安卓 App中等偏高打包 APK安装到手机或上架应用商店想真正装在手机桌面iOS App高需要 Mac、开发者账号和 App Store 审核有苹果设备且有长期打算我个人强烈建议第一次做选网页 App。原因很简单网页 App 不用处理安装包、签名、审核这些和业务无关的流程浏览器打开就能用。等你把功能逻辑跑通、确认自己确实喜欢这个过程再考虑套壳打包或做小程序难度会低很多。1.2 AI 编程的真实能力边界AI 编程能干的活很多人已经刷到过生成代码、解释报错、重构逻辑、补测试用例、把一段描述变成可运行页面。这些都是真的。但它不是全能架构师有几个明显边界你心里要清楚。第一它不能猜需求。你说“帮我做个 App”它只能给你一个通用模板。你说“我要一个每天记录三本书阅读页数的工具数据要本地保存界面要适合手机竖屏”它才能给你对的东西。第二它不能验证业务逻辑。代码跑起来没报错不代表逻辑正确。比如记账 App你输入的金额会不会被错误累加刷新后数据还在不在删除一条记录后合计是否更新——这些都要你自己去点、去验。第三它不能替你解决环境问题。AI 给你的依赖版本、启动命令、配置项是基于它训练时的通用经验不一定适配你本机的系统、Node 版本和网络条件。所以你会遇到不少“代码看起来没问题但就是跑不起来”的情况这不是 AI 不行是环境匹配问题。把 AI 编程理解成“有问必答、改得很快的实习程序员”你的心态会稳很多。它负责执行你负责验收。2. 动手前的准备项目选择、工具清单和环境安装顺序2.1 第一个项目怎么选才不会做到一半放弃很多零基础用户失败不是不会用 AI是项目选太大了。第一次做 App项目要满足四个条件是给自己用的不需要考虑多人同时使用页面不超过五六个逻辑能在一张纸上画清楚数据量小用浏览器本地存储就够用你确实需要它这样你才有动力反复调试。按这个标准推荐这几个方向每日记账、待办清单、背单词卡片、个人作品集、宠物喂养记录、跑步打卡。它们看起来不起眼但每个都覆盖了“增删改查、数据保存、界面交互”这些编程里最核心的内容。不推荐作为第一个项目的是这些带支付功能的商城、带实时位置的网约车类 App、带即时通讯的社交软件。这类项目涉及账号体系、支付资质、服务器、审核规则业务复杂度远超一个新手能控制的范围。等你有经验了再碰不迟。2.2 零基础需要准备哪些工具做第一个 AI 编程项目工具其实很少四样就够。第一是 AI 编程工具。目前最主流的方式是用 Cursor 这类把 AI 对话和代码编辑器集成在一起的工具。它能在同一个窗口里看到项目文件、运行结果和 AI 回复对零基础非常友好。不想装桌面软件的话用网页版 AI 对话工具生成代码再把代码复制到 VS Code 里也是一条可行路线。两种方案都能做出 App差别只在效率。第二是代码编辑器。如果你用 Cursor它本身就带编辑器功能不用额外装。如果走“网页对话 本地编辑器”路线装一个 VS Code 就行。第三是运行环境 Node.js。这是很多现代前端项目的基础AI 生成的代码很多需要靠它来安装依赖和启动本地服务。第四是浏览器Chrome 或 Edge 都行用来预览效果。部分 AI 工具需要注册账号有些高级功能需要付费但第一步学习通常用免费额度或基础版就够。具体以对应工具的官网提示为准。2.3 为什么必须先装 Node.js而不是直接开始写代码很多新手不理解我不是要写代码吗为什么先装一个运行环境因为 AI 生成的前端项目大部分是基于 Node.js 生态的。项目里要安装的依赖包、要执行的启动命令、要启动的本地开发服务器全都依赖 Node.js。你可以把 Node.js 理解成一套“能让代码在电脑上跑起来的基础设施”。不装它AI 给你的代码就只是一堆文本文件。安装完成后在终端里输入node -v能看到版本号就说明装好了。这一步不需要理解原理先确认环境可用。2.4 推荐的安装顺序和第一个动作我建议按这个顺序操作每做完一步都确认一下下载并安装 Node.js 的 LTS 长期支持版本打开终端输入node -v能看到版本号安装 Cursor 或 VS Code新建一个文件夹命名成你的项目名比如my-first-app用编辑器打开这个空文件夹在 AI 对话窗口里直接说出你的需求。这里有个心态提醒不要在动手前把所有编程概念都学一遍。AI 编程的学习方式是先跑通再补课。你只需要知道“文件”“文件夹”“终端命令”这几个基本概念就可以开始了。3. 用一条高质量提示词让 AI 从 0 搭出第一个页面3.1 提示词不是聊天是需求说明书很多新手上来就说“帮我做一个 App”然后抱怨 AI 做出来的东西不是自己想要的。问题不在 AI在于需求没有表达清楚。AI 编程提示词的核心是把它当成一份需求说明书来写。一段好用的提示词通常包含五个部分角色、目标、功能列表、技术建议、界面约束。角色告诉 AI 它该站在什么角度工作目标说明做什么功能列表是可验收的清单技术建议控制实现复杂度界面约束让输出更符合你的使用场景。我一般会用这样的模板你是一个前端开发工程师。请帮我做一个“每日记账”网页 App。 功能要求 1. 可以添加一笔支出字段包括金额、分类、备注、日期 2. 可以按日期查看支出列表 3. 可以删除一条记录 4. 数据保存在浏览器本地刷新页面后不丢失。 技术要求先用单个 HTML 文件实现包含 HTML、CSS、JavaScript界面适合手机竖屏。这段提示词的关键词是“单个 HTML 文件”。对零基础来说这一步直接把项目复杂度降到最低不需要安装任何依赖把代码保存成index.html双击用浏览器打开就能看到效果。等以后项目复杂了再让 AI 生成多文件项目也不迟。3.2 拿到 AI 生成的代码后怎么运行起来如果你按照上面的方式让 AI 生成单个 HTML 文件运行方式非常简单在编辑器里新建一个index.html把 AI 给的代码粘贴进去保存然后在文件夹里双击这个文件浏览器就会打开你的第一个 App。如果 AI 生成的不是单个文件而是一个完整项目那通常需要在终端执行命令。常见的两类命令是npm install安装项目依赖只需要运行一次。npm run dev启动本地开发服务器运行后终端会显示一个类似http://localhost:5173的地址在浏览器打开就行。这里容易踩的一个坑是命令要在项目目录里执行。AI 给了你命令你要先确认终端的当前目录已经切换到了项目文件夹否则会提示找不到配置文件。绝大多数“启动不了”的问题不是代码有问题而是目录不对、依赖没装、Node 版本不匹配。3.3 第一次验收看四个动作第一次跑通之后不要急着加功能。先做一次完整的验收确认四件事页面能正常打开添加一笔支出后列表里出现了这条记录刷新浏览器记录还在点删除按钮记录能消失。这四条都满足说明你的第一个最小可用版本已经完成。这时候你已经有资格说我做出来的 App 是能跑的。接下来的工作就是在这个基础上让它变得更好用。4. 从“能跑”到“能用”功能迭代、数据存储和交互细节4.1 功能迭代要“小步快走”一次只加一个需求能跑之后很多人会急着把 AI 当成许愿机一口气让它加上统计图、预算提醒、多账户切换、云端同步。千万别这么做。功能越多代码越复杂一旦出错你根本判断不了是哪个环节的问题。正确做法是一次只加一个功能。比如记账 App 做完基础版之后可以这样推进先加“月度合计”让列表底部显示当月总支出跑通之后再加“按分类筛选”再之后加“修改记录”的功能最后加一个简单的统计视图。每次只改一小块验证完再进入下一步。这样做的好处是出错时问题范围很小你知道刚才改了什么可以把报错信息和改动内容一起发给 AI修复效率高很多。我见过最稳的零基础选手不是一次要得最多的而是每次只提一个小需求反复验证。4.2 本地存储什么时候够用什么时候需要后端你的第一个 App数据大概率不需要服务器。浏览器自带的本地存储localStorage就能满足“刷新页面数据不丢”这个要求。它的优点是简单代码量少不依赖任何外部服务缺点是数据只在当前浏览器里换个设备、换个浏览器就看不到了。什么时候需要后端当你有这些需求时再考虑数据要在手机和电脑之间同步要给多个用户使用要管理登录账号要做复杂的数据分析。这些属于第二个阶段的事不要在第一个项目里强行上。AI 编程里有一个概念叫“需求驱动复杂度”需求的复杂度决定架构的复杂度而不是为了练技术主动增加复杂度。你的第一个 App能把本地数据管好就已经成功了。4.3 报错信息怎么发给 AI效率才最高零基础用户遇到报错最常见的反应是复制一行报错开头然后问“这是怎么回事”。AI 能回答但要猜的东西太多。我建议把报错信息当成侦探线索完整提供。一个高效的报错反馈格式是你刚才帮我生成的代码运行时出现了以下错误 把完整报错信息粘贴到这里 我的操作步骤是先打开页面然后点击“添加”按钮。 我的环境是Windows 11Node.js 20。这样 AI 知道三件事代码是什么、操作到哪一步出的问题、运行环境是什么。如果你只会说“不行报错了”AI 只能靠猜。这里要给零基础用户提个醒报错信息不是“失败了”的标志而是最重要的调试线索。报错越长信息量越大越要完整贴给 AI。AI 大模型在处理这类错误时恰恰需要完整上下文。4.4 交互细节怎么验收才算“能用”“能跑”和“能用”之间差着一层交互细节。我一般会建议零基础用户用“笨办法”验收把自己当成一个完全不懂的人反复点每个按钮看是否有异常。重点检查这几个场景输入框为空时点“保存”会不会报错输入金额是负数或零程序怎么处理列表为空时页面有没有提示还是一片空白连续快速点击“保存”两次会不会出现重复数据删除记录后列表合计有没有同步更新。这些场景 AI 不一定帮你想到但你可以让 AI 帮你检查。你甚至可以在对话里说“请从测试人员的角度列出我这个功能可能存在的边界情况。”这时候 AI 就变成了你的测试搭子。让它检查代码里有没有处理这些边界你负责实际点击验证这是零基础阶段很实用的一套配合方式。5. 零基础最容易踩的坑启动失败、依赖报错、路径问题和异步逻辑5.1 启动失败先查三类原因本地项目跑不起来大多数情况下不是代码逻辑错而是三类环境问题。第一运行命令没有在项目目录里执行。终端里所谓的“当前目录”可能和项目文件所在的目录不是同一个。你要先用命令切换到项目文件夹比如cd my-first-app再执行npm run dev。这个步骤看起来基础但零基础出错率极高。第二Node 版本和依赖版本不匹配。AI 生成的代码可能依赖某个新版本特性而你装的是很老的 Node.js就会报语法或模块相关的错误。解决方案是手动确认自己的 Node 版本然后让 AI 根据你的版本调整依赖或者把 Node.js 升级到 LTS 最新版。第三端口被占用。如果你看到类似port 3000 is already in use的提示说明这个端口已经被其他程序占了。可以换一个端口启动也可以结束占用进程。最简单的做法是问 AI“我的端口被占用了帮我换一个端口启动。”它会给对应的命令。5.2 依赖安装失败按顺序排查npm install失败是另一个高频问题。遇到时不要反复重试按这个顺序排查确认有网络连接删除项目里的node_modules文件夹和 lock 锁文件重新执行npm install如果下载速度很慢或超时可以考虑把 npm 源切换成国内镜像源这是开发中很常用的做法还不行就把完整报错信息贴给 AI让它判断是版本冲突还是依赖不存在。删除node_modules再重装听起来很粗暴但它确实能解决大量“依赖处于半安装状态”的脏问题。这个操作在开发圈里很常见你以后用多了就会习惯。5.3 AI 生成的代码完全不对别急着说“重写”有时候 AI 给出的代码和你想象的不一样。这时候很多新人会直接说“不对重写”。我建议先停下来做三件事先描述差异。告诉 AI“你生成的界面在当前页面的最顶部我希望它在中间部分。”这种具体差异AI 能立刻修改。再让它解释逻辑。如果你看不懂代码可以让它用大白话解释这段代码的流程。这不仅能帮你判断它是否理解对了需求也是在给自己补课。最后给最小复现。如果某个功能不生效不要只说“这个按钮没反应”要描述“我点击了页面上的保存按钮没有任何提示也没有数据出现”。信息越准确AI 的修改越精准。5.4 看到异步代码别慌这是高级话题也是常见坑AI 生成的代码里你会经常看到async、await、Promise这些词。第一次见到很多人会以为是自己操作错了。其实这属于“异步编程”的范畴简单理解就是有些操作不会立刻返回结果比如读取本地存储、请求外部接口程序需要等它完成后再继续往下走。不用深入研究但至少要认识它。因为很多“功能没生效”的问题根源就是异步操作没有按预期顺序执行。你不需要会写但你得会在报错时把“这里用了 await”这个信息告诉 AI它能加快定位。等你的第一个 App 做完再花点时间补一补异步编程的基础看代码会轻松很多。6. 第一个 App 做完之后手机预览、发布成网页、打包成安装包6.1 让手机也能访问你做的 App做完网页 App 后你最想做的事情大概率是能不能在手机上打开看看能。最直接的办法是局域网预览。把电脑和手机连到同一个 Wi-Fi在启动本地开发服务时让服务监听局域网地址。比如很多项目支持这样的启动方式npm run dev --host然后终端会显示一个电脑在当前局域网的 IP 地址类似http://192.168.1.100:5173。手机浏览器输入这个地址就能看到你做的 App。第一次访问时电脑防火墙可能会弹窗选择允许即可。这个方案只适合自己体验不适合让别人在其他网络下访问。因为 IP 地址只在当前局域网有效换到公司网络或 4G 网络就打不开了。6.2 发布成网页 App最快上线的方式如果你想把这个 App 发给不同网络下的朋友用就需要把它部署到公网上。对网页 App 来说最常用的方式是使用静态托管平台。基本流程是这样的把代码推送到 GitHub 仓库然后在主流的静态托管平台上导入这个仓库平台会自动完成构建最终给你一个公网网址。以后你更新了代码推送上去网址上的内容也会自动更新。这些平台的界面和配置项会经常改版具体操作要以平台当时的引导为准。但核心流程不变代码入仓库、平台自动构建、得到一个网址。第一次部署时把 AI 当成操作手册你在哪一步卡住就把界面截图或平台名称发给它它会给你对应步骤。6.3 打包成安卓 App可以走的两条路网页 App 跑通之后很多人会想要一个真正的安装包。大致有两条路。一条是用跨端框架把网页项目打包成安卓应用。这类工具能生成 APK 安装文件有些还提供云打包服务不需要你本地配置安卓开发环境对零基础更友好。但要注意云打包通常有排队和包体大小限制具体以你使用的工具说明为准。另一条是用 Android Studio 装一个完整的安卓开发环境自己打包。这条路更专业也更稳但环境配置复杂新手容易在下载和配置阶段卡很久。我的建议是第一个项目阶段不要急着打包。网页 App 同样能完整验证你的想法。等第二个、第三个项目都跑顺了再考虑打包成安装包。打包这件事本身没有难度难度在于你有没有准备好处理各类打包报错。6.4 App 发布上架的事提前知道但别提前做应用商店上架和网页部署是两回事。无论安卓还是 iOS上架应用商店通常都需要注册开发者账号、提交隐私政策、通过审核。iOS 应用商店还需要 Mac 环境和 Apple 开发者账号门槛更高。这些流程不用在第一个项目里全部走完。你只需要知道网页部署是门槛最低的上线方式适合快速验证应用商店上架是正式发布适合产品形态已经稳定的阶段。第一次做 App别把精力耗在上架资质和审核流程里。7. 第一个 App 不是终点后续学习路线和长期开发习惯7.1 建议补的三块基础不用深但要有做完第一个 App 后你会对自己的知识缺口有很具体的感知。这时候补课效率最高因为你知道为什么学。第一块是 HTML 和 CSS 基础。它们决定页面的结构和样式你不需要背所有标签但要看得懂 AI 生成的代码里div、class、style大概是什么意思。第二块是 JavaScript 基础。变量、函数、数组、对象、条件判断这些概念是 AI 编程对话里最常见的词汇。你不需要能独立写但看得懂之后和 AI 沟通的效率会翻倍。第三块是“前端、后端、数据库”这三个词的含义。前端是用户看到的界面后端是处理数据的服务数据库是存数据的仓库。理解了这三层你就能听懂 AI 在生成代码时说的很多话。“写编程的人是什么职业”这个问题也可以在这个阶段真正理解了。做前端的人、做后端的人、做全栈的人工作内容差异很大。你用 AI 编程做 App实际上是在体验一个全栈工程师的简化版工作。7.2 适合第二、第三个项目的进阶方向第二个项目可以尝试比记账 App 多一个复杂点的小工具。比如接一个公开接口做一个天气查询 App或者做一个汇率换算 App。这个阶段你会学到“网络请求”和“异步编程”这两个新概念虽然刚开始容易绕晕但这是从自用工具走向真实应用的重要一步。第三个项目可以尝试做一个简单小游戏。游戏对界面反馈和逻辑判断要求更高能把你在前两个项目里学到的东西串起来。网上有很多用编程做小游戏的练习项目可以参考但不能照搬最好是让 AI 根据你的想法生成一套新玩法。如果你对硬件有兴趣以后可以尝试用蓝牙让手机 App 控制 ESP32 这类开发板做一个开关灯、读取传感器的小项目。那是很不错的进阶路线但不适合第一个项目因为硬件联调的不确定性比纯软件高得多。7.3 长期开发要养成的四个习惯第一每个项目单独建一个文件夹命名清楚。别把所有代码堆在同一个目录里否则三个月后你根本分不清哪个项目是哪个。第二把代码放到 GitHub 仓库里。这不只是备份更是给自己留一条“改坏了可以回退”的后路。让 AI 帮你生成.gitignore文件把node_modules等临时目录排除掉。第三每个项目写一个README.md记录启动命令和注意事项。下次你打开项目不需要重新问 AI 怎么运行。第四每次让 AI 改代码之前先手动复制一份当前能跑通的版本。可以用文件备份也可以在 Git 里提交一次。这样改坏了你能立刻回到稳定状态。7.4 最后留几个自查点如果你准备开始动手把它当成自己的项目检查清单我选的项目是不是足够小小到能在几天内跑通我能不能用一段话说明白这个 App 的完整需求我的第一个版本是不是只包含最核心的几个功能遇到报错时我是不是先把完整报错信息收集好了每次加新功能前我是不是已经验证过旧功能是稳定的我能接受的第一个成果是不是就是“本地能打开、数据不丢、能发给朋友看”。这些问题想清楚你的第一个 App 大概率不会烂尾。AI 编程最奇妙的地方在于它把“写代码”的门槛降得足够低但把“想清楚自己要什么”这件事重新交回到了你自己手里。这才是零基础做出第一个 App 真正需要的准备。 零基础用AI编程做出第一个App：从工具安装到发布全指南
零基础做第一个 App这个概念放在三年前还是一句劝退话你得先花两三个月学编程语法再弄明白前端、后端、数据库分别是什么然后才有资格写一个能跑的东西。现在用 AI 编程工具路径被压缩得很短。我见过完全没写过代码的人用 Cursor 这类 AI 编辑器从零做出了能打开、能操作、能发给朋友试用的记账 App。这篇保姆教程就按这条路线完整拆开项目怎么选、工具怎么装、需求怎么描述、报错怎么处理、最后怎么发布。全程默认你没有任何编程基础但我会把每一步背后的原因也说清楚。AI 编程不是魔法它解决的是“写代码”这个环节而你需要解决的是“说清楚需求”和“验收结果”这两个环节。把这两件事做好你的第一个 App 就能稳稳落地。1. 先想清楚AI 编程能帮你做成什么样不能替你决定什么1.1 你的第一个 App最合适是什么形态“App”这个词在很多人心里等于手机上那个图标但做第一个项目时形态选择比功能设计更重要。不同形态的开发成本、发布流程和上手难度差很多。App 形态上手难度发布方式适合的场景网页 App最低部署到静态托管平台得到一个网址第一个练手项目、个人自用小工具微信小程序中等小程序平台注册、提交审核想分享给微信好友直接使用安卓 App中等偏高打包 APK安装到手机或上架应用商店想真正装在手机桌面iOS App高需要 Mac、开发者账号和 App Store 审核有苹果设备且有长期打算我个人强烈建议第一次做选网页 App。原因很简单网页 App 不用处理安装包、签名、审核这些和业务无关的流程浏览器打开就能用。等你把功能逻辑跑通、确认自己确实喜欢这个过程再考虑套壳打包或做小程序难度会低很多。1.2 AI 编程的真实能力边界AI 编程能干的活很多人已经刷到过生成代码、解释报错、重构逻辑、补测试用例、把一段描述变成可运行页面。这些都是真的。但它不是全能架构师有几个明显边界你心里要清楚。第一它不能猜需求。你说“帮我做个 App”它只能给你一个通用模板。你说“我要一个每天记录三本书阅读页数的工具数据要本地保存界面要适合手机竖屏”它才能给你对的东西。第二它不能验证业务逻辑。代码跑起来没报错不代表逻辑正确。比如记账 App你输入的金额会不会被错误累加刷新后数据还在不在删除一条记录后合计是否更新——这些都要你自己去点、去验。第三它不能替你解决环境问题。AI 给你的依赖版本、启动命令、配置项是基于它训练时的通用经验不一定适配你本机的系统、Node 版本和网络条件。所以你会遇到不少“代码看起来没问题但就是跑不起来”的情况这不是 AI 不行是环境匹配问题。把 AI 编程理解成“有问必答、改得很快的实习程序员”你的心态会稳很多。它负责执行你负责验收。2. 动手前的准备项目选择、工具清单和环境安装顺序2.1 第一个项目怎么选才不会做到一半放弃很多零基础用户失败不是不会用 AI是项目选太大了。第一次做 App项目要满足四个条件是给自己用的不需要考虑多人同时使用页面不超过五六个逻辑能在一张纸上画清楚数据量小用浏览器本地存储就够用你确实需要它这样你才有动力反复调试。按这个标准推荐这几个方向每日记账、待办清单、背单词卡片、个人作品集、宠物喂养记录、跑步打卡。它们看起来不起眼但每个都覆盖了“增删改查、数据保存、界面交互”这些编程里最核心的内容。不推荐作为第一个项目的是这些带支付功能的商城、带实时位置的网约车类 App、带即时通讯的社交软件。这类项目涉及账号体系、支付资质、服务器、审核规则业务复杂度远超一个新手能控制的范围。等你有经验了再碰不迟。2.2 零基础需要准备哪些工具做第一个 AI 编程项目工具其实很少四样就够。第一是 AI 编程工具。目前最主流的方式是用 Cursor 这类把 AI 对话和代码编辑器集成在一起的工具。它能在同一个窗口里看到项目文件、运行结果和 AI 回复对零基础非常友好。不想装桌面软件的话用网页版 AI 对话工具生成代码再把代码复制到 VS Code 里也是一条可行路线。两种方案都能做出 App差别只在效率。第二是代码编辑器。如果你用 Cursor它本身就带编辑器功能不用额外装。如果走“网页对话 本地编辑器”路线装一个 VS Code 就行。第三是运行环境 Node.js。这是很多现代前端项目的基础AI 生成的代码很多需要靠它来安装依赖和启动本地服务。第四是浏览器Chrome 或 Edge 都行用来预览效果。部分 AI 工具需要注册账号有些高级功能需要付费但第一步学习通常用免费额度或基础版就够。具体以对应工具的官网提示为准。2.3 为什么必须先装 Node.js而不是直接开始写代码很多新手不理解我不是要写代码吗为什么先装一个运行环境因为 AI 生成的前端项目大部分是基于 Node.js 生态的。项目里要安装的依赖包、要执行的启动命令、要启动的本地开发服务器全都依赖 Node.js。你可以把 Node.js 理解成一套“能让代码在电脑上跑起来的基础设施”。不装它AI 给你的代码就只是一堆文本文件。安装完成后在终端里输入node -v能看到版本号就说明装好了。这一步不需要理解原理先确认环境可用。2.4 推荐的安装顺序和第一个动作我建议按这个顺序操作每做完一步都确认一下下载并安装 Node.js 的 LTS 长期支持版本打开终端输入node -v能看到版本号安装 Cursor 或 VS Code新建一个文件夹命名成你的项目名比如my-first-app用编辑器打开这个空文件夹在 AI 对话窗口里直接说出你的需求。这里有个心态提醒不要在动手前把所有编程概念都学一遍。AI 编程的学习方式是先跑通再补课。你只需要知道“文件”“文件夹”“终端命令”这几个基本概念就可以开始了。3. 用一条高质量提示词让 AI 从 0 搭出第一个页面3.1 提示词不是聊天是需求说明书很多新手上来就说“帮我做一个 App”然后抱怨 AI 做出来的东西不是自己想要的。问题不在 AI在于需求没有表达清楚。AI 编程提示词的核心是把它当成一份需求说明书来写。一段好用的提示词通常包含五个部分角色、目标、功能列表、技术建议、界面约束。角色告诉 AI 它该站在什么角度工作目标说明做什么功能列表是可验收的清单技术建议控制实现复杂度界面约束让输出更符合你的使用场景。我一般会用这样的模板你是一个前端开发工程师。请帮我做一个“每日记账”网页 App。 功能要求 1. 可以添加一笔支出字段包括金额、分类、备注、日期 2. 可以按日期查看支出列表 3. 可以删除一条记录 4. 数据保存在浏览器本地刷新页面后不丢失。 技术要求先用单个 HTML 文件实现包含 HTML、CSS、JavaScript界面适合手机竖屏。这段提示词的关键词是“单个 HTML 文件”。对零基础来说这一步直接把项目复杂度降到最低不需要安装任何依赖把代码保存成index.html双击用浏览器打开就能看到效果。等以后项目复杂了再让 AI 生成多文件项目也不迟。3.2 拿到 AI 生成的代码后怎么运行起来如果你按照上面的方式让 AI 生成单个 HTML 文件运行方式非常简单在编辑器里新建一个index.html把 AI 给的代码粘贴进去保存然后在文件夹里双击这个文件浏览器就会打开你的第一个 App。如果 AI 生成的不是单个文件而是一个完整项目那通常需要在终端执行命令。常见的两类命令是npm install安装项目依赖只需要运行一次。npm run dev启动本地开发服务器运行后终端会显示一个类似http://localhost:5173的地址在浏览器打开就行。这里容易踩的一个坑是命令要在项目目录里执行。AI 给了你命令你要先确认终端的当前目录已经切换到了项目文件夹否则会提示找不到配置文件。绝大多数“启动不了”的问题不是代码有问题而是目录不对、依赖没装、Node 版本不匹配。3.3 第一次验收看四个动作第一次跑通之后不要急着加功能。先做一次完整的验收确认四件事页面能正常打开添加一笔支出后列表里出现了这条记录刷新浏览器记录还在点删除按钮记录能消失。这四条都满足说明你的第一个最小可用版本已经完成。这时候你已经有资格说我做出来的 App 是能跑的。接下来的工作就是在这个基础上让它变得更好用。4. 从“能跑”到“能用”功能迭代、数据存储和交互细节4.1 功能迭代要“小步快走”一次只加一个需求能跑之后很多人会急着把 AI 当成许愿机一口气让它加上统计图、预算提醒、多账户切换、云端同步。千万别这么做。功能越多代码越复杂一旦出错你根本判断不了是哪个环节的问题。正确做法是一次只加一个功能。比如记账 App 做完基础版之后可以这样推进先加“月度合计”让列表底部显示当月总支出跑通之后再加“按分类筛选”再之后加“修改记录”的功能最后加一个简单的统计视图。每次只改一小块验证完再进入下一步。这样做的好处是出错时问题范围很小你知道刚才改了什么可以把报错信息和改动内容一起发给 AI修复效率高很多。我见过最稳的零基础选手不是一次要得最多的而是每次只提一个小需求反复验证。4.2 本地存储什么时候够用什么时候需要后端你的第一个 App数据大概率不需要服务器。浏览器自带的本地存储localStorage就能满足“刷新页面数据不丢”这个要求。它的优点是简单代码量少不依赖任何外部服务缺点是数据只在当前浏览器里换个设备、换个浏览器就看不到了。什么时候需要后端当你有这些需求时再考虑数据要在手机和电脑之间同步要给多个用户使用要管理登录账号要做复杂的数据分析。这些属于第二个阶段的事不要在第一个项目里强行上。AI 编程里有一个概念叫“需求驱动复杂度”需求的复杂度决定架构的复杂度而不是为了练技术主动增加复杂度。你的第一个 App能把本地数据管好就已经成功了。4.3 报错信息怎么发给 AI效率才最高零基础用户遇到报错最常见的反应是复制一行报错开头然后问“这是怎么回事”。AI 能回答但要猜的东西太多。我建议把报错信息当成侦探线索完整提供。一个高效的报错反馈格式是你刚才帮我生成的代码运行时出现了以下错误 把完整报错信息粘贴到这里 我的操作步骤是先打开页面然后点击“添加”按钮。 我的环境是Windows 11Node.js 20。这样 AI 知道三件事代码是什么、操作到哪一步出的问题、运行环境是什么。如果你只会说“不行报错了”AI 只能靠猜。这里要给零基础用户提个醒报错信息不是“失败了”的标志而是最重要的调试线索。报错越长信息量越大越要完整贴给 AI。AI 大模型在处理这类错误时恰恰需要完整上下文。4.4 交互细节怎么验收才算“能用”“能跑”和“能用”之间差着一层交互细节。我一般会建议零基础用户用“笨办法”验收把自己当成一个完全不懂的人反复点每个按钮看是否有异常。重点检查这几个场景输入框为空时点“保存”会不会报错输入金额是负数或零程序怎么处理列表为空时页面有没有提示还是一片空白连续快速点击“保存”两次会不会出现重复数据删除记录后列表合计有没有同步更新。这些场景 AI 不一定帮你想到但你可以让 AI 帮你检查。你甚至可以在对话里说“请从测试人员的角度列出我这个功能可能存在的边界情况。”这时候 AI 就变成了你的测试搭子。让它检查代码里有没有处理这些边界你负责实际点击验证这是零基础阶段很实用的一套配合方式。5. 零基础最容易踩的坑启动失败、依赖报错、路径问题和异步逻辑5.1 启动失败先查三类原因本地项目跑不起来大多数情况下不是代码逻辑错而是三类环境问题。第一运行命令没有在项目目录里执行。终端里所谓的“当前目录”可能和项目文件所在的目录不是同一个。你要先用命令切换到项目文件夹比如cd my-first-app再执行npm run dev。这个步骤看起来基础但零基础出错率极高。第二Node 版本和依赖版本不匹配。AI 生成的代码可能依赖某个新版本特性而你装的是很老的 Node.js就会报语法或模块相关的错误。解决方案是手动确认自己的 Node 版本然后让 AI 根据你的版本调整依赖或者把 Node.js 升级到 LTS 最新版。第三端口被占用。如果你看到类似port 3000 is already in use的提示说明这个端口已经被其他程序占了。可以换一个端口启动也可以结束占用进程。最简单的做法是问 AI“我的端口被占用了帮我换一个端口启动。”它会给对应的命令。5.2 依赖安装失败按顺序排查npm install失败是另一个高频问题。遇到时不要反复重试按这个顺序排查确认有网络连接删除项目里的node_modules文件夹和 lock 锁文件重新执行npm install如果下载速度很慢或超时可以考虑把 npm 源切换成国内镜像源这是开发中很常用的做法还不行就把完整报错信息贴给 AI让它判断是版本冲突还是依赖不存在。删除node_modules再重装听起来很粗暴但它确实能解决大量“依赖处于半安装状态”的脏问题。这个操作在开发圈里很常见你以后用多了就会习惯。5.3 AI 生成的代码完全不对别急着说“重写”有时候 AI 给出的代码和你想象的不一样。这时候很多新人会直接说“不对重写”。我建议先停下来做三件事先描述差异。告诉 AI“你生成的界面在当前页面的最顶部我希望它在中间部分。”这种具体差异AI 能立刻修改。再让它解释逻辑。如果你看不懂代码可以让它用大白话解释这段代码的流程。这不仅能帮你判断它是否理解对了需求也是在给自己补课。最后给最小复现。如果某个功能不生效不要只说“这个按钮没反应”要描述“我点击了页面上的保存按钮没有任何提示也没有数据出现”。信息越准确AI 的修改越精准。5.4 看到异步代码别慌这是高级话题也是常见坑AI 生成的代码里你会经常看到async、await、Promise这些词。第一次见到很多人会以为是自己操作错了。其实这属于“异步编程”的范畴简单理解就是有些操作不会立刻返回结果比如读取本地存储、请求外部接口程序需要等它完成后再继续往下走。不用深入研究但至少要认识它。因为很多“功能没生效”的问题根源就是异步操作没有按预期顺序执行。你不需要会写但你得会在报错时把“这里用了 await”这个信息告诉 AI它能加快定位。等你的第一个 App 做完再花点时间补一补异步编程的基础看代码会轻松很多。6. 第一个 App 做完之后手机预览、发布成网页、打包成安装包6.1 让手机也能访问你做的 App做完网页 App 后你最想做的事情大概率是能不能在手机上打开看看能。最直接的办法是局域网预览。把电脑和手机连到同一个 Wi-Fi在启动本地开发服务时让服务监听局域网地址。比如很多项目支持这样的启动方式npm run dev --host然后终端会显示一个电脑在当前局域网的 IP 地址类似http://192.168.1.100:5173。手机浏览器输入这个地址就能看到你做的 App。第一次访问时电脑防火墙可能会弹窗选择允许即可。这个方案只适合自己体验不适合让别人在其他网络下访问。因为 IP 地址只在当前局域网有效换到公司网络或 4G 网络就打不开了。6.2 发布成网页 App最快上线的方式如果你想把这个 App 发给不同网络下的朋友用就需要把它部署到公网上。对网页 App 来说最常用的方式是使用静态托管平台。基本流程是这样的把代码推送到 GitHub 仓库然后在主流的静态托管平台上导入这个仓库平台会自动完成构建最终给你一个公网网址。以后你更新了代码推送上去网址上的内容也会自动更新。这些平台的界面和配置项会经常改版具体操作要以平台当时的引导为准。但核心流程不变代码入仓库、平台自动构建、得到一个网址。第一次部署时把 AI 当成操作手册你在哪一步卡住就把界面截图或平台名称发给它它会给你对应步骤。6.3 打包成安卓 App可以走的两条路网页 App 跑通之后很多人会想要一个真正的安装包。大致有两条路。一条是用跨端框架把网页项目打包成安卓应用。这类工具能生成 APK 安装文件有些还提供云打包服务不需要你本地配置安卓开发环境对零基础更友好。但要注意云打包通常有排队和包体大小限制具体以你使用的工具说明为准。另一条是用 Android Studio 装一个完整的安卓开发环境自己打包。这条路更专业也更稳但环境配置复杂新手容易在下载和配置阶段卡很久。我的建议是第一个项目阶段不要急着打包。网页 App 同样能完整验证你的想法。等第二个、第三个项目都跑顺了再考虑打包成安装包。打包这件事本身没有难度难度在于你有没有准备好处理各类打包报错。6.4 App 发布上架的事提前知道但别提前做应用商店上架和网页部署是两回事。无论安卓还是 iOS上架应用商店通常都需要注册开发者账号、提交隐私政策、通过审核。iOS 应用商店还需要 Mac 环境和 Apple 开发者账号门槛更高。这些流程不用在第一个项目里全部走完。你只需要知道网页部署是门槛最低的上线方式适合快速验证应用商店上架是正式发布适合产品形态已经稳定的阶段。第一次做 App别把精力耗在上架资质和审核流程里。7. 第一个 App 不是终点后续学习路线和长期开发习惯7.1 建议补的三块基础不用深但要有做完第一个 App 后你会对自己的知识缺口有很具体的感知。这时候补课效率最高因为你知道为什么学。第一块是 HTML 和 CSS 基础。它们决定页面的结构和样式你不需要背所有标签但要看得懂 AI 生成的代码里div、class、style大概是什么意思。第二块是 JavaScript 基础。变量、函数、数组、对象、条件判断这些概念是 AI 编程对话里最常见的词汇。你不需要能独立写但看得懂之后和 AI 沟通的效率会翻倍。第三块是“前端、后端、数据库”这三个词的含义。前端是用户看到的界面后端是处理数据的服务数据库是存数据的仓库。理解了这三层你就能听懂 AI 在生成代码时说的很多话。“写编程的人是什么职业”这个问题也可以在这个阶段真正理解了。做前端的人、做后端的人、做全栈的人工作内容差异很大。你用 AI 编程做 App实际上是在体验一个全栈工程师的简化版工作。7.2 适合第二、第三个项目的进阶方向第二个项目可以尝试比记账 App 多一个复杂点的小工具。比如接一个公开接口做一个天气查询 App或者做一个汇率换算 App。这个阶段你会学到“网络请求”和“异步编程”这两个新概念虽然刚开始容易绕晕但这是从自用工具走向真实应用的重要一步。第三个项目可以尝试做一个简单小游戏。游戏对界面反馈和逻辑判断要求更高能把你在前两个项目里学到的东西串起来。网上有很多用编程做小游戏的练习项目可以参考但不能照搬最好是让 AI 根据你的想法生成一套新玩法。如果你对硬件有兴趣以后可以尝试用蓝牙让手机 App 控制 ESP32 这类开发板做一个开关灯、读取传感器的小项目。那是很不错的进阶路线但不适合第一个项目因为硬件联调的不确定性比纯软件高得多。7.3 长期开发要养成的四个习惯第一每个项目单独建一个文件夹命名清楚。别把所有代码堆在同一个目录里否则三个月后你根本分不清哪个项目是哪个。第二把代码放到 GitHub 仓库里。这不只是备份更是给自己留一条“改坏了可以回退”的后路。让 AI 帮你生成.gitignore文件把node_modules等临时目录排除掉。第三每个项目写一个README.md记录启动命令和注意事项。下次你打开项目不需要重新问 AI 怎么运行。第四每次让 AI 改代码之前先手动复制一份当前能跑通的版本。可以用文件备份也可以在 Git 里提交一次。这样改坏了你能立刻回到稳定状态。7.4 最后留几个自查点如果你准备开始动手把它当成自己的项目检查清单我选的项目是不是足够小小到能在几天内跑通我能不能用一段话说明白这个 App 的完整需求我的第一个版本是不是只包含最核心的几个功能遇到报错时我是不是先把完整报错信息收集好了每次加新功能前我是不是已经验证过旧功能是稳定的我能接受的第一个成果是不是就是“本地能打开、数据不丢、能发给朋友看”。这些问题想清楚你的第一个 App 大概率不会烂尾。AI 编程最奇妙的地方在于它把“写代码”的门槛降得足够低但把“想清楚自己要什么”这件事重新交回到了你自己手里。这才是零基础做出第一个 App 真正需要的准备。