用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></script>标签里的暗色模式切换逻辑——它已绑定系统偏好监听。
安装Tailwind并启用热重载
方法一：使用官方CLI（推荐）
终端中执行：npm install -D tailwindcss postcss autoprefixer → npx tailwindcss init -p → 自动生成tailwind.config.js和postcss.config.js。
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
方法二：跳过配置直接用CDN（仅限开发验证）
打开index.html → 找到 → 确保已有：<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等伪类也实时可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
