Augment实战：从零构建AI菜谱生成器并部署到Cloudflare

项目概览：一个AI驱动的智能菜谱生成器

B站UP主Kate分享了一个完整的全栈开发实战案例——使用Augment Code作为AI编程助手，从零构建一个智能菜谱生成器，并最终部署到Cloudflare Workers上。这个项目的技术栈相当前沿：Next.js 15 + Tailwind CSS v4.1 + OpenNext + Cloudflare Workers，后端调用Google Gemini 2.0 Flash模型生成菜谱内容。

用户只需输入食材（如"带鱼、黄鳝"），选择口味偏好、难度和菜系，系统就能生成包含食材清单、制作步骤、营养信息和小贴士的完整菜谱，甚至能创造"香辣菠萝鸡爪"这样的创新菜品。

AI菜谱生成器应用展示

Augment的核心优势：提示词增强与代码库理解

提示词增强功能

整个开发过程中，Kate最推崇的是Augment的提示词增强功能。在编辑器右下角有一个星星标志，点击后Augment会自动增强用户输入的提示词。这个功能的价值体现在三个层面：

减少输入工作量：自动提取相关上下文，无需手动复制粘贴代码
智能识别关联：利用代码库理解能力，自动包含相关文件、函数和模式的上下文信息
暴露理解偏差：让用户看到模型对提示词的理解，便于及时纠正

例如在要求修改UI界面时，Augment自动将提示词细化为"保持功能完整性、设置一致性、优化主页面布局和视觉层次、表单组件样式、菜谱展示卡片设计、色彩搭配"等多个维度，远比用户原始输入精准得多。

Augment提示词增强效果

代码库上下文引擎

Augment的另一大杀手锏是其上下文引擎。在修改代码时，它会频繁调用这个引擎来定位需要修改的位置，做到"又快又准"。Kate特别提到，整个开发过程中很少出现"修了这个地方，另一个地方又坏了"的连锁问题。

虽然Augment单个任务的处理速度可能不如Cursor那么快，但它的修改精度更高——给一个需求后修改多个位置，基本不需要就同一个问题反复调整。用Kate的话说："他可能单个任务花的时间更长，但效果是真的给你处理好了。"

开发过程中的关键挑战与解决方案

新版SDK的认知偏差

开发过程中暴露了AI编程助手的一个典型短板：对最新技术栈版本的认知滞后。Augment在技术调研时搜索的都是过时的信息，并且错误地认为最新的Gemini SDK仍是旧版generative-ai包，还声称Shadcn UI和Tailwind v4存在兼容性问题。

Kate的解决方案很巧妙：

在Augment设置中注明当前日期，避免搜索过时信息
引入GPT O3作为搜索验证工具，交叉确认技术信息的准确性

O3帮她确认了最新的Gemini SDK是@google/genai v1.5版本，并指出Shadcn UI与Tailwind v4的兼容性问题"属于过时一半的说法"，新版本已经解决。这些精准信息反馈给Augment后，开发才得以顺利推进。

项目文档与架构规划

水合（Hydration）错误的排查

Next.js 15的水合问题也是一大拦路虎。有趣的是，O3在排查时发现了一个意想不到的原因——浏览器安装的"Super Copy"之类的插件会导致水合报错。Kate排查后确认自己确实安装了这类插件，关闭后问题消失。这个案例说明，有时候bug的根源并不在代码本身。

安全审计与迭代优化

Augment还承担了安全审计的角色。初次审计发现了几个严重问题：API密钥直接存放在.env.local文件中、CORS配置过于宽松等，安全评分仅7.5分。

Kate让Augment将API密钥的获取方式改为通过用户界面设置，保存到浏览器的localStorage中，并修复了其他安全问题。经过多轮优化，安全评分从7.5提升到9.2，最终部署到生产环境后达到9.5分。

调试信息展示

多工具协作的开发范式

这个项目最有价值的经验并非某个单一工具的使用，而是展示了一种多AI工具协作的开发范式：

工具	角色定位	擅长领域
Augment	主力编码助手	代码库理解、提示词增强、文档生成
GPT O3	搜索验证工具	最新技术信息检索、问题诊断
Gemini 2.0 Flash	业务API	菜谱内容生成

Kate反复强调"人的参与非常重要"——需要时刻关注AI对哪些内容做了修改，在关键节点（如SDK版本选择、安全配置）做出正确判断。AI编程助手并非万能，但善于利用不同工具的优势互补，可以显著提升开发效率。

部署与文档：Augment的额外价值

值得一提的是，Augment在文档生成方面表现出色。整个项目中它自动生成了十几份Markdown文档，包括：

完整的技术文档（含Mermaid可视化图表）
项目架构图和数据流程图
API调用时序图
开发者快速入门指南
部署成功报告和健康检查脚本

在部署环节，Augment完成了OpenNext配置、Cloudflare Workers配置、兼容性调整和测试验证的全流程，并创建了监控脚本来验证生产环境状态。

项目初始界面

总结与建议

这个实战案例给AI编程领域带来几个重要启示：首先，Augment的代码库理解能力确实是其差异化优势，特别适合需要跨文件修改的复杂项目；其次，面对前沿技术栈，单一AI工具的信息可能滞后，引入O3等搜索工具做交叉验证是明智之举；最后，AI编程的效率提升不在于完全放手，而在于人机协作中找到最佳分工点。