AI知见 · AI工具怎么选，3步帮你搞定

第6章「编程入门」· 约8分钟 · 最适合新手的编程入门不是学语法，是做一个「今天就能用上的小东西」。全程不写一行代码：一句话让 AI 生成、浏览器里测试、拖拽上线拿到链接。这篇是完整 SOP。

零基础用 AI 做第一个网页小工具：从一句话到能发给朋友的链接

知识库 / AI实战手册 / 第6章编程入门 · AI知见编辑部 · 更新于2026-11-02 · 约8分钟

学编程最大的劝退点不是难，是「学了三个月还做不出任何能用的东西」。AI 把这条路反过来了：先做出东西，兴趣和理解后面自然跟上。这篇的目标很具体：一到两个小时后，你会有一个能发给朋友、点开就能用的网页小工具。全程不需要安装任何软件，不需要懂代码。

第一步：选一个「小到不可能失败」的需求

新手第一个项目的成败，90% 取决于选题。标准：一个页面能装下、你自己明天就会用。好例子：给孩子的口算题生成器、记录姨妈周期的小日历、饭局 AA 计算器、倒计时牌。坏例子：任何需要登录、需要存数据、需要「像某某 App」的东西——那些后面都能做，但不是第一个。

第二步：把需求说成「三句话提示词」

打开 DeepSeek 或 Claude，用这个结构描述：「帮我做一个网页小工具：①它是干什么的（场景+给谁用）；②页面上有什么（按钮、输入框、显示什么）；③长什么样（风格一句话）。所有代码放在一个 HTML 文件里。」以 AA 计算器为例：「帮我做一个饭局 AA 计算器网页：输入总金额和人数，能勾选谁参加了、谁没参加，自动算出每人应付多少，结果显示大字。风格清爽，手机上看也要舒服。全部代码放在一个 HTML 文件里。」

AI 会输出一整段代码。你要做的只有一件事：全选复制，打开电脑记事本，粘贴，另存为 `aa.html`，双击打开——你的工具已经在浏览器里跑起来了。

第三步：改到满意，一次只改一处

第一次生成的成品大概率「能用但不好看」。修改的方式不是重写，是继续跟 AI 说：「把按钮改大一点」「结果那一行用绿色」「加一个抹零功能」。铁律：一次只提一个修改，改完测一遍再提下一个。每改出一个你满意的版本，就另存一个副本（aa_v2.html）——这是新手的「后悔药」，下一篇会讲为什么这件事这么重要。

第四步：拖一下，拿到能分享的链接

本地文件只能自己看，想让朋友打开就要「部署」。最简单的办法：打开 Netlify Drop（netlify.com 旗下的免费托管页），把你的 html 文件直接拖进网页区域，几秒钟后它会给你一个公开链接。这个链接发给任何人都能打开。免费、无需懂服务器，这就是你上线的第一个作品。

编辑部提醒：第一个作品的意义不是「有用」，是「闭环」——你完整走了一遍「需求→生成→测试→修改→上线」。这个闭环走通一次，后面做复杂东西只是重复和放大它。别小看那个简陋的 AA 计算器，它是你和「会编程的人」之间唯一的区别：做过，和没做过。

本文相关工具

DeepSeek（免费）
国产开源模型代表，V4.1系列推理与多模态能力强，网页版与App完全免费，API 价格在行业内较低（以官网为准）；10月开放自研搜索API
Claude（免费+付费）
长文本与代码能力突出，写作质感公认第一梯队
v0（免费+付费）
Vercel 出品，描述需求直接生成可部署的前端页面
Netlify（免费+付费）
静态站点与函数部署，AI应用落地常用

本文涉及的名词

氛围编程 · AI编程 · 代码解释器

大家常问

这样做出来的东西算「我写的」吗？

算你「做的」。就像用计算器算账没人说账不是你算的。编程行业本身也在往这个方向迁移——2026 年的现实是，绝大多数新代码都有 AI 参与。你的价值在需求判断和验收，这两样 AI 替代不了。

做出来的工具能存数据吗？比如记录每天的账目。

第一个版本先别碰数据存储。进阶一步是用浏览器本地存储（跟 AI 说「数据保存在浏览器本地，关掉页面再打开还在」），再往后才是数据库。一步步来，每一步都有明确的新东西可学。

Netlify 免费版够用吗？会过期吗？

个人小工具完全够，免费档的流量额度对小工具来说是天量。链接不会主动过期，但账号长期不登录可能被清理，几个月上去看一眼即可。介意的话，同类还有 Vercel，玩法一样。

上一篇：不会编程也能让 AI 帮你做东西：从一句话脚本到自己的小工具｜下一篇：AI 编程工具怎么选：聊天框、插件、AI IDE 三条路线，别一上来就买 Cursor ｜手册目录