用Cursor五步生成可运行前端页面：新建项目并初始化、AI生成含Tailwind的HTML、安装或使用CDN版Tailwind、配置本地服务器、实时预览修改。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor快速生成一个可运行的前端页面，从新建项目到本地预览只需五步，无需手动配置Webpack或Vite，所有依赖自动安装、代码实时补全、HTML/CSS/JS三端联动修改即时生效。
创建新项目并初始化前端结构
打开Cursor → 点击左上角「File」→「New Folder」→ 命名为my-landing-page → 按回车确认。
在侧边栏右键该文件夹 → 选择「Open in Integrated Terminal」→ 输入npm init -y生成package.json。
这一步必须执行，否则后续AI生成的脚本无法识别项目根目录，【缺少package.json会导致Cursor无法启用前端专属提示和自动import】。
立即学习“前端免费学习笔记（深入）”；
让AI生成完整页面代码
按Ctrl+K（Windows）或Cmd+K（Mac）唤出Cursor命令面板 → 输入「Generate full HTML page」→ 回车。
在弹出的输入框中描述需求，例如：“一个带响应式导航栏、三栏服务介绍、底部联系表单的科技风首页，使用Tailwind CSS类名，深色模式支持” → 按回车。
Cursor会在当前目录下新建index.html，并自动插入包含CDN版Tailwind、内联CSS变量、无障碍语义标签的完整单页代码。生成后不要手动删改<script>标签里的暗色模式切换逻辑——它已绑定系统偏好监听。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
安装Tailwind并启用热重载
方法一：使用官方CLI（推荐）
终端中执行：npm install -D tailwindcss postcss autoprefixer → npx tailwindcss init -p → 自动生成tailwind.config.js和postcss.config.js。
方法二：跳过配置直接用CDN（仅限开发验证）
打开index.html → 找到<head> → 确保已有：<script src="https://cdn.tailwindcss.com"></script> → 这行不能删，删了样式立即丢失。
注意：若选择方法一，必须在tailwind.config.js的content字段里加入"./index.html"，否则build后class会被清除。
启动本地服务器并实时调试
第一步：在package.json的scripts中添加："dev": "npx serve -s . -p 3000"
第二步：保存package.json → 终端运行：npm run dev → 浏览器自动打开http://localhost:3000。
第三步：在Cursor中任意修改index.html → 保存（Ctrl+S）→ 页面自动刷新，无需手动F5。如果没刷新，检查终端是否显示「Serving!」且无报错红字。
此时可直接在HTML里增删bg-gray-800或text-emerald-400等类名，保存即见效果。Tailwind的hover、focus等伪类也实时可用。
