AI编程实战：用 AI 快速搭一个 Web 应用

写在前面

从 0 到能跑的 Web 应用，用 AI 一小时以内就能完成。这篇用"待办清单"做例子，走一遍完整链路：需求 → 架构 → 生成 → 运行 → 加功能。

一、先要架构，再要代码

我要做一个待办清单 Web 应用，请先给出技术选型和项目结构建议，不要写代码

让它先讲清楚"用什么框架、几个文件、各自职责"，确认后再写代码——这一步能避免生成一大堆用不上的文件。

二、生成与运行

按上面的方案实现。功能：新增待办、标记完成、删除待办；数据保存到本地 JSON 文件；页面用简单 HTML，不引入前端框架

Flask 版核心代码（示意）：

from flask import Flask, request, render_template, redirect, url_for
import json

app = Flask(__name__)
TODO_FILE = "todos.json"

def load_todos():
    try:
        with open(TODO_FILE, encoding="utf-8") as f:
            return json.load(f)
    except FileNotFoundError:
        return []

@app.route("/")
def index():
    return render_template("index.html", todos=load_todos())

@app.post("/add")
def add():
    todos = load_todos()
    todos.append({"text": request.form["text"], "done": False})
    with open(TODO_FILE, "w", encoding="utf-8") as f:
        json.dump(todos, f, ensure_ascii=False, indent=2)
    return redirect(url_for("index"))

运行：

flask --app app run

三、加功能迭代

让 AI 加"筛选未完成"：

在现有应用上加一个筛选功能：首页顶部加"全部/未完成/已完成"三个标签，点击后只显示对应列表

四、部署提示

本地跑通后，部署到云服务器或 PaaS 平台即可对外访问。小应用不必一上来就上容器编排。

提示：Web 应用的范围最容易膨胀（登录、数据库、权限……）。先做最小可用版本，跑通了再按需加。

小结与下篇预告

这篇完成了从 0 到 Web 应用的全流程。下一篇《AI编程实战：团队落地，规范与协作》，从个人提效走向团队协作。

小作业

给待办应用加一个"编辑内容"或"清空已完成"的功能，走完整流程：需求 → 生成 → 验证 → 提交。