免费 AI IDE
零基础也能做出高颜值网页 | GPT-5 前端实战速通
不会 HTML？不懂 React？没关系！跟着本文 3 步，用 GPT-5 一句话生成可上线的 完整前端页面，再教你 中文改样式、上传自己的图片 继续迭代。
一、准备工作（3 分钟）
| 工具 | 作用 | 下载地址 |
|---|---|---|
| Node.js ≥ 18 | 运行 JavaScript 环境 | nodejs.cn |
| VS Code | 代码编辑器 | code.visualstudio.com |
| Cursor（推荐） | 自带 GPT-5 的智能 IDE | cursor.com |
安装完后，在终端输入
node -v看到版本号即可继续。
二、3 步生成你的第一个网页
① 一行命令，让 GPT-5 写代码
打开 Cursor，新建文件 prompt.txt，输入中文提示词：
帮我做一个「甜品店」首页，粉色少女风，顶部有大 Banner，产品卡片带悬停放大效果按 Ctrl+K → 选择 GPT-5 → 回车，30 秒后自动生成 index.html。
② 本地预览
Cursor 会自动保存文件。双击 index.html 即用浏览器打开查看效果。
③ 想换颜色？一句话就行
回到 prompt.txt 追加：
把主色调换成薄荷绿，字体用「阿里妈妈体」再次 Ctrl+K，增量修改完成，无需手动改 CSS。
三、进阶玩法：上传截图继续改
场景 1：已有设计稿
- 把设计稿截图
design.png放到项目根目录 - 在
prompt.txt写：参考 design.png 的风格，生成登录页，保留渐变按钮 - GPT-5 会 识图 并输出匹配的 HTML。
场景 2：把静态页变互动
继续追加提示：
给产品卡片添加“加入购物车”按钮，点击后弹出提示“已添加”GPT-5 自动补充 JS 代码，无需你写一行交互逻辑。
四、技术栈推荐（GPT-5 默认就用它们）
| 分类 | 库 | 中文说明 |
|---|---|---|
| 框架 | Next.js (TS) | 服务端渲染 + 类型安全 |
| 样式 | Tailwind CSS | 原子化类名，改色最快 |
| 组件 | shadcn/ui | 高颜值、可拷贝即用 |
| 图标 | Lucide | 2000+ 矢量图标 |
| 动画 | Motion | 丝滑过渡，一行搞定 |
五、一键部署上线
方案 A：Vercel（免费）
npm i -g vercel # 安装 CLI
vercel --prod # 30 秒完成部署得到 .vercel.app 域名，可分享给朋友。
方案 B：GitHub Pages（免费）
- 把项目推到 GitHub
- 仓库 → Settings → Pages → 选择
main / docs - 得到
https://你的用户名.github.io/仓库名
六、常见疑问 FAQ
| 问题 | 一句话答案 |
|---|---|
| 不会写提示词？ | 用“场景 + 风格 + 功能”模板，示例见下 |
| 中文乱码？ | 在 <head> 加 <meta charset="UTF-8">，GPT-5 已自动包含 |
| 体积太大？ | 使用 npx @vercel/nft 打包，只保留用到的 Tailwind 类 |
七、中文提示词万能模板
做一个【场景】网站，【主色调】风格，需要【功能列表】，参考【图片/网址】示例
做一个「个人博客」网站，莫兰迪色系，需要暗黑模式切换和文章搜索，参考 cnblogs.com免费继续学
- 免费教程：w3cschool.cn 搜索《GPT-5 提示词指南》
