现在，我相信你已经了解了AI编程的一系列概念与术语、完成了相关的入门配置并对"如何与AI进行对话"有了更加深入的了解。

是时候动手做一个有实际价值的小工具了

这一章，我带你从头完成一个能上线的小工具。市面上大部分 AI 编程教学的实战部分都基本等同于"提示词展示"。但在这里，你将完整经历：

• 发现一个需求
• 从零开始构思一个项目
• 用 AI IDE 完成全流程开发

在全流程演示中复习前面学习到的知识。

发现需求

---

经常需要组织zz理论学习的同志都知道，会议纪要作为一份留存材料，段落较长、要求与格式固定，用 AI 来总结是很自然的思路，但实际使用中存在以下问题：

1. 阻断输出：由于涉及敏感信息，使用网页端 AI 会频繁遇到 “让我们换个话题聊聊吧”。
2. 检索不可靠：由于无法指定搜索渠道，"联网搜索"信息来源的可靠程度不高，这对于敏感、严谨的文本来说是不可接受的。
3. 无法批量：由于很多材料通常会被堆在最后"补"，形成批量任务，网页端无法满足要求。
4. 二次编辑：使用网页端完成该生成任务，你需要经历：复制MD → 转换为word → 二次编辑word文档 → 逐项打印，这里的转换后编辑正是限制任务效率的第二要素。

因此，我们迫切需要一份工具来解决以上四个痛点，提高任务效率。

项目构思

---

对于个人/小团队开发的非商业项目，我们在开发前需要思考三个问题——“功能设计”、“界面设计”、“技术实现”。

功能设计

记住：项目是围绕需求开发的，功能设计是项目的灵魂，需要针对用户的各项痛点思考对策。

对于本项目，其痛点-对策列表即为：

1. 阻断输出：这里要记住一个常识，敏感信息审核严格度"国外模型 > 国内模型 API > 国内模型 网页端"，毕竟网页端面向大众， API则主要面向开发者。所以，我们需要尝试使用国外模型/国内模型 API。
2. 检索不可靠：这是因为网页端的"联网检索"不能指定信息源，而最权威的数据来源当然是"学习强国"。所以，我们需要开发爬虫/使用带"指定网址检索"功能的联网搜索工具。
3. 无法批量：我们说想要批量任务，其实就是想"一次输入，完成多份材料"。所以，我们需要使用API异步调用。
4. 二次编辑：我们的期望是"对生成的内容进行直接编辑"，最好能编辑后直接下载/打印。所以，我们需要做markdown编辑器。

一句话总结，我们需要做的是"带批量生成功能的 markdown 编辑器，使用联网搜索＋大模型 API 实现"。

界面设计

布局糟糕、功能杂乱的界面会劝退每个潜在用户，比如，你会想要使用下面这个网站吗？

显然，糟糕的设计必须被极力避免。

对于我们要做的工具，核心是编辑器、需要输入区、需要内容管理……

如果你是一名程序员或者在前几章刚刚下载了 Trae，就会很自然地想到"这不就是AI IDE吗？"

没错！就是那经典的三栏布局，将界面划分为"输入与设置区"、“核心工作区”、“任务管理区”，简洁、清晰、多端兼容。

就三块区域如何与左中右三栏对应的问题，有这样一个逻辑：回想一下，你是否习惯把"从左到右"等同于"从前到后"，也就是从左开始、到右结束，这是社会规训的结果。

所以：

• 左侧区域应为"输入与设置区"，负责数据导入与项目配置，用于启动生成任务
• 中间区域应为"核心工作区"，用于浏览和编辑生成内容
• 右侧区域应为"任务管理区"，用于最终交付

技术实现

如果是一个中大型的项目，纯人工编程，那么这一部分的篇幅应该十分恐怖。

但用 AI 做一个小项目就不一样了，你只需要考虑最基础的框架＋UI＋API选择＋业务逻辑，保证核心部分为你所掌控，其他的交给 AI 发挥（相信我，不那么严苛的约束才能最大发挥 AI 的能力）。

屏幕前的你可以先思考一下，写下来，再与学长给出的方案做对照，看看咱们思路有没有相似之处：

1. 框架：开发这样一个小工具，你一定希望能够低成本部署到云端，让自己在其他设备、别人也能用上吧。那Next.js一定很合适，它提供全栈能力（前后端包揽），并依托 React 的庞大开发社区（不愁找不到 UI 库），最重要的是，支持在 Vercel 等平台一键部署（免费喔）。
2. UI：做一个小工具，不打比赛不商业化，简洁、顺眼、方便开发就是最稳妥的选择。Shadcn UI ＋ Lucide icon很不错，Shadcn 的设计简洁大方并提供多种配色方案，Lucide 的图标库庞大、现代、自定义选项丰富。最重要的是，它们在 AI 编程模型的训练中被大量运用，这意味着 AI 对它们的掌握是与生俱来的，出错概率很低。
3. API选择：由于 Vercel 等平台的响应速度限制，搜索引擎的检索速度、模型的首 token 返回速度一定要快，且性价比优先。Longcat＋ Tavily会是第一选择，Longcat 作为美团出品的模型，每天有50万免费token、API敏感信息过滤力度尚可接受、主打极速响应；Tavily 支持指定平台&地区检索，且每月有 1000 次免费调用。
4. 业务逻辑：生成内容前，需要批量导入信息"学习主题"、“班级”、“参会人员姓名”；进入生成逻辑，回忆一下人工完成会议纪要的流程：搜索学习主题对应的权威报道＋随机抽取同学发言 → 按照模板撰写会议纪要。生成内容后，为了可编辑＋保存，需要 LocalStorage；为了可导出＋打印，需要使用 Markdown转Word、调用浏览器打印服务。

好！思考完以上三个问题，相信你已经对这个项目"应该做成什么样"有了初步认知。让我们最后用一张图总结一下：

这三个问题对于所有项目开发都适用喔！记得常来复习，并在真实开发中加深印象。

有同学可能有疑问，上一章不是刚刚教我"对话"吗，怎么这里又开始自己想了？
因为我不希望大家"失去思考的能力"，想通了"应该怎么做，为什么这么做"，你才能更好地与 AI 合作共生，否则你甚至不知道它说的有无道理。

开发全流程

---

Call Back 环节

还记得《对话的艺术》吗，它非常重要！因为 AI 编程的本质就是与 AI 对话，如果你有所遗忘，请速速返回重读！

再回顾一下《快速上手》章节，不难发现，AI 编程遵循"从0到1，再从1到N"的开发流程，也就是先做原型后迭代的思想。

最后，假设你认真完成了《定义与概念》章节的学习，一定知道"前后端解耦"是什么意思，传统开发如此，AI 编程也是一样，前后端的解耦开发——也可以简单理解为"不在一次对话内同时做前后端"是系统健壮性的保障。

从0到1：抽卡环节

可靠的原型是后续迭代的基础，所以，AI编程中的"原型"值得用完整的规范约束、用好的模型生成。

用完整的规范约束：怎么样算"完整"呢？想想《快速上手》章节我们的第一段提示词，看着很不错了对吧。但我们只是说明白了自己的"需求"，却并不知道 AI 会如何实现，也就是一种"黑箱"。而"完整的规范约束"，就是尽可能地让"黑箱"变"白箱"，让 AI 把自己的实施计划、执行步骤列出来。在 Trae 中，我们可以直接使用solo-spec模式实现。

用好的模型生成：在大模型的世界，一分钱一分货，想要高效高质地达成目标，不要吝啬你的钱包。

在构思部分，我们已经理清了自己的设计要求，可以整理出下面的提示词：

我想要开发一个web项目。
项目主题："批量生成理论学习会议记录"
项目使用Next.js框架，采用shadcn UI
前端要求：
分为左中右三栏，
- 左侧区域为用户输入区，包括"学习主题输入"与"班级名单录入"两个部分，"学习主题输入"支持输入多行数据（要求格式类似"2025.9.19  学习高质量完成十四五规划系列主题发布会2025.9.26 学习《新时代党的治疆方略的成功实践》"），每行为一个元素，解析为列表；"班级名单录入"支持上传Excel文件（只要文件中包含"Name"（大小写任意）或"姓名"列即可）/直接输入文字（格式为"姓名1，姓名2"），统一解析为列表。底部显示用户设置，支持设置openai初始化模型的各项参数、Tavily key参数。
- 中间区域为文件编辑区（核心区域），提供markdown文件的基本编辑、保存功能，可以左右切换浏览不同文件。
- 右侧区域为辅助工作区，顶部显示当前处理进度，使用Grid布局展示所有样本的小方块，绿色：已浏览/已保存，红色：已修改未保存，灰色：未浏览，点击方块可跳转至对应样本。下部显示功能键"批量导出"、"批量打印"。
需要提供mock数据来验证实现效果。

我们来验证一下"用完整的规范约束、用好的模型生成"这句法则是否正确。

不守法则

直接在 Trae cn 的普通对话内输入以上提示词，使用 auto 模型生成。

直接看最终效果吧：

嗯……没话说。

遵守法则

在 Trae 中，使用solo-spec模式＋Gemini 3 PRO（MAX），输入同样的提示词。

可以看到，Trae 先为我们生成了tasks.md、spec.md、checklist.md三个文档，分别对应"开发说明"、“任务清单”、"验收清单"三个部分，确定无误后点击保留按键。

任务完成后，Trae 会向我们列出本次生成的代码清单。

最终效果如下：

怎么样？是不是好了太多太多。

---

从1到N：迭代完善

完成了"从0到1"的突破，接下来就正式进入"从1到N"的迭代完善环节了，我们通常可以按照迭代目的，将迭代操作分为以下五种类型：

类型	说明	示例
缺陷修复	修复不符合预期的行为	Bug修复、线上故障
功能迭代	改变产品能力边界	新功能、功能下线、逻辑变更
体验优化	提升使用感受（不改核心逻辑）	UI改版、交互优化、性能提升
质量加固	提升代码/系统健康度	重构、安全加固、债务清理
适配兼容	应对环境变化	依赖升级、API迁移、合规改造

让我们在本项目的迭代过程中进一步体会这些操作吧。

当前界面操作体验：

迭代1：缺陷修复与体验优化

经过简单体验后，发现以下问题：

• 只要切换文件前没有手动点击保存，当前文件都会被归类为"修改未保存"，即使浏览文件时没有进行任何操作。
• 所有填充区域的点击强调框都显示不完整
• 系统设置内的英文翻译多余，只需使用中文
• 系统设置内"数据库配置"多余，数据应该存储在浏览器的 LocalStorage

这些问题的解决都不算复杂，为了演示，我们不进行人工介入，直接将问题发送给AI即可，提示词模板如下：

当前界面存在以下问题，请为我修复：
【粘贴你发现的问题】

在模型能力足够、上下文充分的情况下，它们通常可以被顺利解决。

第一次迭代后界面操作体验：

如果问题较多/较复杂，请分批次处理。

迭代2：功能迭代

在简单试用后，考虑到实际需求，我们提出：

• 数据管理功能：文件导出后无法进行删除，应该支持分级的 LocalStorage 管理。
• 手动导入功能：当前"一键导入"对格式要求较高，应该提供手动导入的次选方案。
• 发言人数量选择功能：不同用户对发言人数量的要求可能并不相同，需要提供选择。

和问题解决一样，我们直接将简单的功能需求发送给 AI 即可：

我需要在当前项目的基础上增加新功能，请为我实现：
【你想要实现的功能】

至此，前端基本完善，第二次迭代后效果如下：

迭代3：后端开发（特殊）

注意，后端开发通常不是迭代内的步骤，但因为本示例项目逻辑简单+单人开发，可以在前端完善后再进行后端开发。

回忆一下我们敲定的"技术实现"，可以写出以下的后端开发需求文档：

# 输入处理
- 接收主题列表，格式为：`日期 主题内容`（如：`2025.10.26 学习主题1`）
- 接收班级名称
- 接收姓名列表
- 支持批量处理多个主题

# 处理流程
步骤 1：解析日期和主题
- 拆分输入字符串，提取日期和主题
- 将日期格式从 `2025.10.26` 转换为 `2025-10-26`

步骤 2-3：网络搜索
- 使用 Tavily 搜索学习主题相关资料
- 配置中国区域搜索，优先学习类域名
- 限制返回结果数量（最多 5 条）
- 提取搜索结果的 content 字段

步骤 4：随机抽取发言人
- 从姓名列表中随机抽取 2 名同学
- 作为后续交流感悟的发言人

步骤 5：LLM 内容生成
- 调用大语言模型生成 Markdown 格式的会议纪要
- 流式响应

可以把以上内容写入文档 backend.md，像这样将需求发给 AI （功能并不复杂，使用 /plan 模式即可）：

请依照后端开发需求 `# backend.md ` ，为我开发当前项目的后端，架构保持一致。

最好阅读一下生成的代码，尤其是调用大模型 API 的部分，因为提示词需要自己修改：

关于前后端联调：本项目的强后端联调非常简单，按下"开始生成"键观察输出就好了（甚至没必要跑单元测试），而 API 的获取直接看官方文档即可，所以不再赘述。

迭代4：质量加固

在项目设计时，我们就反复强调"使用 Vercel 等平台部署"，这是因为它们提供了免费的部署服务，而对于国内用户，最方便的部署平台就是 Edgeone Pages，感到陌生的同学请返回【快速上手-部署】重新研读！

由于我们需要部署到 Edgeone Pages，可以使用官方提供的最佳实践规则（rules）来要求 AI 进行代码质量审查，点击链接即可下载 mdc 文件并使用（上一章可才学过怎么用哦）。

你可以将以下提示词发给 AI ：

请参考 mdc 文件中的规则，保证项目代码符合 EdgeOne Pages 规范。

最终测试

---

让我们好好享受一下自己做的工具吧~

最终测试的生成效果：

再看一下导出的效果：

嗯~~满意之。

写在最后

---

恭喜！你已经完整经历了一个 AI 编程项目的从 0 到上线全过程，至此，你已经具备了使用AI编程工具进行项目开发的基本能力。

回顾一下本章的核心收获：

1. 项目开发的三问法
在开始任何项目前，思考「功能设计、界面设计、技术实现」这三个问题，能让你的开发思路更加清晰，与 AI 的沟通也更加高效。

2. 从 0 到 1 的原型法则
「用完整的规范约束、用好的模型生成」是获得可靠原型的关键。在 Trae 中使用 solo-spec 模式，让 AI 先输出实施计划，再执行代码生成，能大幅降低返工概率。

3. 从 1 到 N 的迭代思维
迭代不是盲目改代码，而是有目的、有分类的优化。缺陷修复、功能迭代、体验优化、质量加固、适配兼容——五种类型各司其职，让你的项目稳步成长。

4. 前后端解耦的开发原则
不在一次对话内同时做前后端，是保证系统健壮性的好习惯。复杂项目尤其需要遵守这一原则。

拓展开发练习

这个小工具虽然已经可用，但还有很大的提升空间。以下是一些你可以尝试的扩展方向：

• 模板系统：支持用户自定义会议纪要模板（定制提示词），而非固定格式
• 历史记录：添加生成历史的管理功能，支持查看、恢复、对比历史版本
• 快捷键支持：为常用操作添加快捷键，提升编辑效率
• 深色模式：适配系统主题，提供深色模式切换

项目已经开源在 Gitee-会议纪要生成器 上，你可以直接拉取代码自行修改，欢迎各位提交 PR 噢~

项目在线体验地址：https://meetsum.311factory.top/

---

动手是最好的学习，去创造属于你的项目吧！