Cursor可一键生成并实时预览响应式前端页面：新建空工作区→启用AI→用“Ask Cursor”生成含Tailwind的index.html→通过Live Server启动预览→编辑即自动刷新。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
新手想用Cursor快速搭建一个可运行的前端页面，不需要从零配置环境、不用手动创建HTML/CSS/JS文件结构，也不用安装Node或Webpack——Cursor能直接生成带实时预览的完整页面，且所有代码可立即编辑调试。
创建新项目并启用AI辅助
打开Cursor → 点击左上角 【File → New Workspace】 → 选择“Empty Workspace” → 在弹出的文件夹中右键 → “Reveal in Finder/Explorer” → 手动新建一个空文件夹（例如 my-landing-page）→ 回到Cursor，用 【File → Open Folder】 重新打开该空文件夹。
确认左下角状态栏显示“Powered by Cursor”且AI图标亮起；若未激活，点击状态栏AI图标 → 登录GitHub账号并同意权限 → 等待右下角出现“Ready”提示。
让AI生成首页HTML结构
按下 Cmd+L（Mac）或 Ctrl+L（Windows/Linux）唤出命令面板 → 输入“Ask Cursor” → 回车 → 输入：“生成一个响应式产品落地页HTML，含顶部导航、主标题‘SmartApp’、副标题‘One click to launch’、三个功能卡片、底部版权信息，使用Tailwind CSS类名，不要引入外部CDN，用CDN链接必须是https://cdn.tailwindcss.com”。
立即学习“前端免费学习笔记（深入）”；
等待AI输出完整HTML代码 → 全选 → 按 Cmd+S 保存为 index.html → 自动在编辑器中打开该文件。
这一步不能跳过保存动作，否则后续预览无法识别文件类型；【务必确保文件名是 index.html，且扩展名小写】。
启动本地服务器实时预览
方法一：快捷命令启动
光标聚焦在 index.html 编辑区 → 按 Cmd+K → 输入“Live Server: Start Live Server” → 回车 → 右下角弹出“Server is running on http://127.0.0.1:5500” → 点击链接自动在默认浏览器打开预览页。
方法二：终端手动运行（备用）
按 Cmd+Shift+P → 输入“Terminal: Create New Terminal” → 回车 → 输入：npx serve -s . → 回车 → 浏览器访问 http://localhost:5000。
注意：Live Server插件需提前启用——若提示“command not found”，先在Extensions面板搜索“Live Server”并安装重启。
修改文字内容并即时生效
第一步：在 index.html 中找到 <h1>SmartApp</h1> → 改为 <h1>NovaDash</h1> → 保存（Cmd+S）→ 浏览器标签页自动刷新，新标题立刻显示。
第二步：找到第一个功能卡片中的 <p>Seamless integration</p> → 改为 <p>Real-time analytics dashboard</p> → 不用再次保存，只要光标离开该行（比如按一次↓箭头），Cursor会自动触发保存并刷新。
第三步：添加一个新按钮 → 在第二个卡片下方插入一行：<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Try Free</button> → 浏览器立即渲染出蓝色按钮，悬停有颜色变化。
这三步操作全程无需重启服务、不碰命令行、不查文档——改完即见效果。
