免費(fèi) AI IDE
零基礎(chǔ)也能做出高顏值網(wǎng)頁(yè) | GPT-5 前端實(shí)戰(zhàn)速通
不會(huì) HTML？不懂 React？沒(méi)關(guān)系！跟著本文 3 步，用 GPT-5 一句話生成可上線的 完整前端頁(yè)面，再教你 中文改樣式、上傳自己的圖片 繼續(xù)迭代。
一、準(zhǔn)備工作（3 分鐘）
| 工具 | 作用 | 下載地址 |
|---|---|---|
| Node.js ≥ 18 | 運(yùn)行 JavaScript 環(huán)境 | nodejs.cn |
| VS Code | 代碼編輯器 | code.visualstudio.com |
| Cursor（推薦） | 自帶 GPT-5 的智能 IDE | cursor.com |
安裝完后，在終端輸入
node -v看到版本號(hào)即可繼續(xù)。
二、3 步生成你的第一個(gè)網(wǎng)頁(yè)
① 一行命令，讓 GPT-5 寫(xiě)代碼
打開(kāi) Cursor，新建文件 prompt.txt，輸入中文提示詞：
幫我做一個(gè)「甜品店」首頁(yè)，粉色少女風(fēng)，頂部有大 Banner，產(chǎn)品卡片帶懸停放大效果按 Ctrl+K → 選擇 GPT-5 → 回車，30 秒后自動(dòng)生成 index.html。
② 本地預(yù)覽
Cursor 會(huì)自動(dòng)保存文件。雙擊 index.html 即用瀏覽器打開(kāi)查看效果。
③ 想換顏色？一句話就行
回到 prompt.txt 追加：
把主色調(diào)換成薄荷綠，字體用「阿里媽媽體」再次 Ctrl+K，增量修改完成，無(wú)需手動(dòng)改 CSS。
三、進(jìn)階玩法：上傳截圖繼續(xù)改
場(chǎng)景 1：已有設(shè)計(jì)稿
- 把設(shè)計(jì)稿截圖
design.png放到項(xiàng)目根目錄 - 在
prompt.txt寫(xiě)：參考 design.png 的風(fēng)格，生成登錄頁(yè)，保留漸變按鈕 - GPT-5 會(huì) 識(shí)圖 并輸出匹配的 HTML。
場(chǎng)景 2：把靜態(tài)頁(yè)變互動(dòng)
繼續(xù)追加提示：
給產(chǎn)品卡片添加“加入購(gòu)物車”按鈕，點(diǎn)擊后彈出提示“已添加”GPT-5 自動(dòng)補(bǔ)充 JS 代碼，無(wú)需你寫(xiě)一行交互邏輯。
四、技術(shù)棧推薦（GPT-5 默認(rèn)就用它們）
| 分類 | 庫(kù) | 中文說(shuō)明 |
|---|---|---|
| 框架 | Next.js (TS) | 服務(wù)端渲染 + 類型安全 |
| 樣式 | Tailwind CSS | 原子化類名，改色最快 |
| 組件 | shadcn/ui | 高顏值、可拷貝即用 |
| 圖標(biāo) | Lucide | 2000+ 矢量圖標(biāo) |
| 動(dòng)畫(huà) | Motion | 絲滑過(guò)渡，一行搞定 |
五、一鍵部署上線
方案 A：Vercel（免費(fèi)）
npm i -g vercel # 安裝 CLI
vercel --prod # 30 秒完成部署得到 .vercel.app 域名，可分享給朋友。
方案 B：GitHub Pages（免費(fèi)）
- 把項(xiàng)目推到 GitHub
- 倉(cāng)庫(kù) → Settings → Pages → 選擇
main / docs - 得到
https://你的用戶名.github.io/倉(cāng)庫(kù)名
六、常見(jiàn)疑問(wèn) FAQ
| 問(wèn)題 | 一句話答案 |
|---|---|
| 不會(huì)寫(xiě)提示詞？ | 用“場(chǎng)景 + 風(fēng)格 + 功能”模板，示例見(jiàn)下 |
| 中文亂碼？ | 在 <head> 加 <meta charset="UTF-8">，GPT-5 已自動(dòng)包含 |
| 體積太大？ | 使用 npx @vercel/nft 打包，只保留用到的 Tailwind 類 |
七、中文提示詞萬(wàn)能模板
做一個(gè)【場(chǎng)景】網(wǎng)站，【主色調(diào)】風(fēng)格，需要【功能列表】，參考【圖片/網(wǎng)址】示例
做一個(gè)「?jìng)€(gè)人博客」網(wǎng)站，莫蘭迪色系，需要暗黑模式切換和文章搜索，參考 cnblogs.com免費(fèi)繼續(xù)學(xué)
- 免費(fèi)教程：w3cschool.cn 搜索《GPT-5 提示詞指南》
