自动化 UI 与应用生成：一句话做出全栈应用之后

第八周的话题是一句话生成整个应用。讲师自称“软件开发纯粹主义者”，开课时说过这不是一门氛围编程课，但这一周他破例一次，专门看 Lovable、Bolt 这类应用生成平台能做到什么程度。周五的嘉宾是 Vercel 的 AI 研究负责人 Gaspar Garcia。

学习目标

• 回顾 Web 应用技术栈的演变，理解应用生成平台站在什么基础上。
• 了解应用生成平台的大致架构，以及它的系统提示词怎样约束技术选型。
• 认识这类平台的局限，判断什么时候适合用它们。
• 能用三种不同的技术栈实现同一个应用，并比较它们的差别。

核心概念

两种传统技术栈。 二十多年来，SaaS 开发主要围绕 Web 应用展开，课上一般把 1999 年的 Salesforce 视为第一个 SaaS 平台。期间出现过几代主流技术栈：LAMP（Linux、Apache、MySQL、PHP），是经典的开源动态网站方案；MERN、MEVN（MongoDB、Express、React 或 Vue、Node.js），全部用 JavaScript，适合做单页应用；Serverless，用 Lambda、Cloud Functions 这类按需运行的函数处理后端逻辑；JAMstack，用预先生成的静态页面加 API 和 JavaScript 构建网站。

两代“不写代码”的方案。 第一代是 Wix、Squarespace、Webflow 这样的可视化低代码和无代码工具。第二代是 Lovable、Replit、Vercel v0、Base44，以及直接用 Cursor、Claude Code 写应用，用提示词就能生成完整的应用。课上指出的变化是：工程师越来越需要跨职能，要懂设计、懂产品；任何人都能做出一个应用，而且比第一代无代码平台更容易上手。

应用生成平台怎么工作。 课上现场用 Bolt 做了一个带前后端的“萨尔萨舞伴搜索”应用，生成后又让它调整配色、图标和字体。架构上，生成的代码运行在浏览器里的 WebContainer 中。平台的系统提示词明确要求只使用成熟、知名的技术和框架，并用一套专门的标签来标记要在 WebContainer 里执行的操作，比如创建文件、运行命令。

局限。 一切顺利时体验很好，但一旦出错，基本就回到了起点。提示词只是建议，并非所有用户都明白这一点。这类平台过去出现过安全问题。另外还有两个开放问题：怎样避免所有生成的应用都长得一样？这类应用最多能做到多复杂？

实践步骤

第八周的作业是用三种不同的技术栈实现同一个应用：

1. 定下应用的概念，可以沿用前几周的“开发者指挥中心”。最低要求是：能对一种主要资源（比如笔记、任务或帖子）做增删改查，有持久化存储，有基本的校验和错误处理，界面简单但能覆盖主要流程。
2. 选三种不同的技术栈，比如 MERN、MEVN、Django 配 React、Flask 配原生 JavaScript、Next.js、Ruby on Rails。其中至少一版必须用 bolt.new 生成，至少一版的前端或后端必须用非 JavaScript 语言。
3. 用生成平台时，从一份清晰的初始提示词开始，写明应用概念、数据实体、路由和界面流程，把数据模型和它们之间的关系讲清楚，再逐步细化数据模型、CRUD 接口和前端组件。
4. 每一版放在单独的目录里，避免依赖冲突，并各写一份 README，说明前置条件、安装、运行和环境配置，以及生成之后手动修过哪些地方、还有哪些已知问题。
5. 在 writeup.md 里写清应用概念和三个版本各自的说明。

常见误区

• 把第一次生成的结果当成成品。 生成只是开始，数据模型、错误处理和安全仍然要人来补齐和检查。
• 提示词里不写数据模型。 只描述界面、不讲清实体和关系，生成的后端往往经不起后续修改。
• 以为生成的应用不需要关心安全。 生成平台出过安全问题，涉及用户数据的部分要单独审查。

动手练习

用任意一个应用生成平台，按“概念、实体、路由、界面流程”四项写一份提示词，生成一个小型增删改查应用。然后故意提一个跨越前后端的修改需求，比如给主要资源加一个带校验的新字段，观察平台能不能一次改对；如果改不对，记下你需要手动介入的步骤。

要点回顾

应用生成平台大大降低了做出一个能跑的全栈应用的门槛，也逼着工程师更懂设计和产品。但它们擅长的是常见技术栈上的常见应用，一旦出错或需求变复杂，仍然要靠工程能力收拾局面。

参考来源

• CS146S Fall 2025 课程大纲（Week 8）：themodernsoftware.dev/fall2025，核验日期：2026-10-23。
• 讲义幻灯片：Automated UI and App Building（Google Slides）。嘉宾讲座的幻灯片未公开，本篇没有引用其内容。
• 作业 Week 8 – Multi-Stack AI-Accelerated Web App Build：week8/assignment.md。