可上线的AI智能体训练营落地页30分钟内完成：用Cursor+自然语言指令生成React+Tailwind页面，含验证表单、Accordion FAQ及Vercel一键部署。

用自然语言指令驱动Cursor生成一个可上线的活动落地页，无需手写HTML/CSS/JS，从零到部署全程控制在30分钟内。

准备Cursor环境

访问cursor.sh正式，下载对应系统安装包，安装过程与微信一致，一路点击“下一步”即可完成。安装后打开Cursor，用GitHub账号注册并登录——这一步【必须完成】，否则后续无法连接Vercel或Git仓库进行部署。

首次启动时选择Agent Window界面，它像聊天窗口一样直观，适合快速输入需求、获取可运行页面。

用Bolt.new生成初始结构（可选但推荐）

打开bolt.new，在输入框粘贴如下提示词：

text 请帮我创建一个活动落地页，主题是“AI智能体实战训练营”。页面需包含：1. 主标题“AI智能体实战训练营——从零搭建你的Agent军团”；2. 副标题“4周线上训练 + 项目实战 + 作品集辅导”；3. 课程大纲列表（模型即服务、智能体即服务、Coze实战、Dify实战、n8n自动化、Vibe Coding）；4. 价格模块：“早鸟价 ¥999（原价 ¥1999）”，加删除线显示原价；5. 报名表单：姓名、邮箱、提交按钮；6. 底部版权信息；7. 技术栈要求：React + Tailwind CSS，适配移动端。

Bolt会在20～40秒内生成完整React项目，点击“Preview”即可实时预览。此时复制整个src/App.jsx代码，准备导入Cursor。

在Cursor中精细化调整

新建Agent对话 → 粘贴Bolt生成的App.jsx代码 → 输入指令：“把报名表单改成带验证的，邮箱格式错误时显示红色提示文字，提交后弹出‘已收到，24小时内邮件回复’toast。”

Cursor通常会顺手把React Hook Form或原生form的校验逻辑一并补上，再配合注入useEffect和useState，把toast提示这套效果搭起来。要是发现提交按钮还没有loading状态，只需再补一句：“点击提交时按钮变灰禁用，3秒后恢复”，它很快就会把对应的异步阻断逻辑完整补齐。

关键点：【不要手动删改已有结构】，所有修改都用自然语言描述行为，让Cursor重写整块组件，避免样式错乱或状态丢失。

添加FAQ折叠面板

在当前对话中继续输入：

方法一可以这样处理：在课程大纲下方加一个“常见问题”区域，用Accordion组件做成可折叠展示，放入3个高频问题。第1个问题是“训练营是否提供录播回放？”，答案为“全程直播+永久回放权限”；第2个问题是“没有编程基础能参加吗？”，答案为“课程从命令行起步，配套学前指南”；第3个问题是“结业是否有证书？”，答案为“完成全部作业+项目答辩后颁发电子证书”。

方法二：如果项目中已存在ui库（如shadcn），直接说：“用shadcn/Accordion组件实现，保持和现有Tailwind配色一致”。Cursor会自动引入组件、写props、绑定open状态。

一键部署到Vercel

第一步：点击Cursor右下角「Deploy」按钮 → 选择「Vercel」→ 登录Vercel账号（首次需授权GitHub权限）。

第二步：在部署配置中，将Build Command设为npm run build，Output Directory设为dist（若用Vite）或build（若用Create React App）。

第三步：勾选「Auto-assign domain」→ 点击「Deploy」。约90秒后，Vercel返回唯一URL，如ai-agent-training.vercel.app，该链接全球可访问。