跳到主要内容

第一节 零基础开发一个项目

本节的任务是创建一个属于你自己的Web 版个人笔记应用。我们将全程不亲自编写一行代码，完全依赖AI辅助工具，使用最基础的原生前端技术栈（HTML + CSS + JavaScript）来实现。

一、需求分析

在动手之前，我们必须清楚我们要造一个什么“东西”。我们要做的个人笔记网站，需要具备以下核心功能（在软件开发中通常称为 CRUD：增删改查）：

  1. 新增笔记 (Create)：有一个输入框和按钮，可以发布新的想法。
  2. 读取笔记 (Read)：发布成功的笔记会以列表形式展示在页面上。
  3. (可选) 修改笔记 (Update)：对于已发布的内容进行编辑。
  4. 删除笔记 (Delete)：对于不需要的笔记可以移除。
  5. 查询笔记 (Search)：当笔记增多时，可以通过关键字快速查找。

二、制作思路

对于零基础的我们，直接让 AI 一次性生成一个完美功能的网站是不现实的， AI 也可能会“蒙圈”。我们的核心策略是小步快跑，迭代开发。 **从总体上，化繁为简：**先实现一个能跑通的“最小可行性产品 (MVP)”，比如只要能输入和显示就行，别管好不好看，也别管能不能保存。 在细节上，闭环反馈：遵循提出需求 -> 观察结果 -> 发现问题 -> 反馈修正的循环。遇到 Bug 不用慌，把现象描述给 AI，让它自己修。

三、准备工作

（一）环境准备​

  1. 本地 Web 环境：由于该项目包含 HTML、CSS、JS 多个文件，为了确保功能（尤其是本地存储功能）正常运行，强烈建议在 Web 服务器环境下预览。请回顾第一章第三节，启动你的 EServer 本地环境。
  2. 代码编辑器：确保已安装代码编辑器，并成功启用了并登录了AI辅助插件。

（二）项目初始化​

  1. 创建站点：在 本地开发环境 中新建一个本地站点（例如域名设为 note.cm）。
  2. 清空目录：打开该站点的根目录，删除里面所有的文件（包括默认的 index.html）。确保你在浏览器访问该域名时，看到的是一个 403 Forbidden 或空白页面，这表示我们有了一张干净的“画布”。
  3. 载入编辑器：将这个空白的站点根目录文件夹，直接拖拽到 VS Code 的窗口中打开。
  4. 召唤 AI：在 VS Code 左侧点击通义灵码图标，切换到“AI 程序员”模式（注意不是普通的问答模式），确保已登录账户。
  5. 准备“咒语本”：在桌面上新建一个记事本文件（prompt.txt），专门用来记录和构思你要发给 AI 的指令（Prompt）。

四、操作步骤

操作演示

五、实操演练：人机协作迭代之旅

【重要提示——致开始前的你】 请做好心理准备：接下来的过程不会是一条直线。AI 程序员更像是一个才华横溢但有时会马虎的实习生。它生成的代码可能一次成功，也可能漏洞百出。 本节的核心目的，不是让你得到一个绝对完美的结果，而是让你学会当 AI“犯错”时，如何像一个技术经理一样，准确地指出问题并引导它修正。

1. 发出初始指令，构建 MVP​

我们的第一个目标，别管好不好看，先让它“能用”。在通义灵码的输入框中，清晰地描述你的核心需求。 【提示词口令】“请帮我制作一个简单的个人学习笔记 Web 应用。使用纯 HTML、CSS 和 JS。界面需要一个输入框、一个发布按钮，以及一个用于展示笔记列表的区域。用户输入文本后点击按钮，笔记应该显示在下方的列表中。” 验证与观察： 等 AI 生成完代码并保存后，立刻在浏览器中打开你的本地站点进行测试。

  • 动作：输入一条笔记，点击发布。
  • 观察 A（理想情况）：笔记成功显示在列表里了。
  • 观察 B（常见问题）：现在，请刷新一下浏览器页面。 刚才发布的笔记还在吗？

2. 第一次迭代：解决“金鱼记忆”问题​

绝大多数情况下，AI 的第一版代码只会在当前页面显示数据，一刷新就没了（因为数据只存在于临时内存中）。这是初学者最常遇到的问题。

  • 你的判断：这个应用没有“记忆”功能，需要增加本地存储能力。
  • 发送反馈： 【提示词口令】“我测试了一下，功能大体可用。但是有一个严重的问题：当我刷新浏览器页面后，刚才发布的笔记就丢失了。请修改代码，利用浏览器的 localStorage 功能把笔记数据保存到本地，确保刷新页面数据不丢失。”

PS：不要指望 AI 一次把所有事情考虑周全。在它遗漏关键功能时，准确地指出来。 当基础功能稳定后，我们开始像搭积木一样增加新功能。在这个阶段，你可能会遇到新的挑战。

3. 第二次迭代：增加时间戳与删除功能​

当基础功能稳定后，我们开始像搭积木一样增加新功能。在这个阶段，你可能会遇到新的挑战。

  • 发送需求： **【提示词口令】**现在笔记信息太单一了。请做两个改进：
    1. 给每条笔记增加一个发布时间（格式如 YYYY-MM-DD HH:mm）并显示出来。
    2. 在每条笔记后面增加一个‘删除’按钮，点击后可以永久删除这条笔记。

验证与应对“突发状况”：

  • 观察：新代码生成后，浏览器预览界面可能会突然卡死，或者旧的笔记显示出错了。
  • 分析原因：这是因为我们修改了数据结构（以前笔记只是一个字符串，现在变成了包含内容和时间的对象），旧的数据格式与新代码不兼容了。
  • 你的行动（人工干预）：这不是 AI 的错，是数据迁移的问题。最快的解决办法是清空旧数据。 操作指南：在浏览器按 F12 打开开发者工具 -> 点击 应用 (Application) 标签 -> 展开 本地存储 (Local Storage) -> 右键点击你的域名 -> 选择 清除 (Clear)。然后刷新页面，重新发布一条新笔记即可恢复正常。

4. 第三次迭代：增加搜索功能​

  • 发送需求： **【提示词口令】**笔记变多了，我需要查找功能。请在页面顶部增加一个搜索框和查询按钮。输入关键字点击查询后，下方的列表只显示内容中包含该关键字的笔记。

5. 第四次迭代：UI 优化与 Bug 修复​

功能全了，但界面可能惨不忍睹。在这个阶段，我们需要扮演“设计总监”和“测试工程师”的角色。 场景 A：界面太丑或布局错乱

  • 现象：比如按钮大得离谱，或者搜索框和按钮分成了两行显示，很难看。
  • 发送修正： **【提示词口令】**界面需要调整一下：
    1. 发布和删除按钮太宽了，请把它们的宽度固定为 80px，并加上圆角让它好看点。
    2. 现在的搜索框和查询按钮是上下排列的，请调整 CSS 让它们在同一行水平显示。”

场景 B：出现了意想不到的 Bug

  • 现象：比如笔记很少时，页脚却跑到了屏幕外面；或者点击某个按钮没反应。
  • 应对绝招：让 AI 自己修
    1. 浏览器按 F12 打开开发者工具，切换到 控制台(Console)。
    2. 如果看到红色的报错信息，直接复制它。
    3. 发送求助： **【提示词口令】**我的页面出问题了，控制台报错如下，请帮我分析原因并修复代码： [在这里粘贴你复制的红色报错信息]

6. 第五次迭代：进阶功能探索​

如果你对当前的作品还不满意，可以继续提出更高的要求，测试 AI 的极限：

  • 优化示例： **【提示词口令】**现在的笔记是按发布顺序排列的，最新的在最后面。请修改 JavaScript 逻辑，把排序反过来，让最新发布的笔记显示在列表的最上面。
  • 进阶示例： **【提示词口令】**如果我有 100 条笔记，页面太长了。请在底部增加一个分页功能，每页只显示 10 条笔记，并包含上一页和下一页的按钮。

7. 需求反哺：借助外部 AI 拓展功能蓝图​

在长期的人机协作中，初学者常常会陷入“不知道还能让 AI 做什么”的优化瓶颈。此时，我们需要跳出纯敲代码的思维，利用 AI 来反向指导产品设计。 打开网页端的其他通用大语言模型，通过多轮对话来整理产品功能。

  • 【提示词口令】：“我正在使用 AI 辅助开发一个个人 Web 笔记应用，目前已经实现了基础的增删改查和本地存储。请你扮演一位资深的产品经理，通过对话的形式帮我头脑风暴一下，这个应用还可以增加哪些实用且前端易于实现的新功能？请列出一个具有优先级的功能清单。”
  • 验证与行动：根据外部 AI 整理出的需求列表（例如：Markdown 语法支持、标签分类筛选、一键导出为 TXT 等），挑选你感兴趣的功能。回到 VS Code 中，将这些新想法转化为具体的提示词，指挥你的 AI 程序员开启下一轮的迭代开发。

六、效果演示

通过上述不断的对话与迭代，即使你一行代码都没写，也能独立完成一个如下图所示的实用 Web 应用。 微信截图_20250302185044

图 2-1 个人笔记网站