【Vibe Coding】老闆突然叫我做網站？兩小時刻出一個能上線的網站！（Claude Code + shadcn-ui + Vercel 實戰）
老闆臨時要網站別慌！教你用 AI 生骨架、換風格、手動品牌化、Vercel 一鍵上線。完全新手也能完成的 Vibe Coding 實戰。
老闆今天開會忽然說：「我們下午前要有個網站原型（Prototype）喔！」
你不是前端工程師，也沒有設計稿。沒關係—照這份新手友善流程做，兩小時內你能端出一個「可點、可看、可分享」的網站雛形。
0:00
/0:07
💡
核心精神：先有骨架，再微調外觀，最後加上品牌名與封面圖。
兩小時實戰流程總覽
| 時間 | 步驟 | 工具 | 產出 |
|---|---|---|---|
| 0–20 分鐘 | 找一個喜歡的網站，交給 AI 分析架構 | Claude Code | 網站骨架 |
| 20–60 分鐘 | 套上好看的版面（shadcn-ui + 紐時風格） | Claude Code | 初版網頁 |
| 60–90 分鐘 | 換到 IDE，用 Codex extension 微調細節 | VS Code / Windsurf | 可讀又穩定的網站 |
| 90–110 分鐘 | 手動加上品牌 Logo、名字、主色 | 手動 | 品牌感網站 |
| 110–120 分鐘 | 用 Vercel CLI 部署上線 | Vercel | 一個可以 Demo 的真實網址 |
【Vibe Coding】Codex 全新升級！GPT-5-Codex 新手教學｜2 個指令快速做出網站
Codex 全新升級！GPT-5-Codex 讓新手也能靠 2 個指令快速生出網站。本文教你安裝、操作、實測心得，手把手帶你入門 Vibe Coding。
Vicky Tsai
需要知道、但不會難的 5 個名詞（一句話懂）
- 骨架（網站骨架 / 結構）：頁面分區與順序，如頂部選單、首頁大標、內容卡片、底部資訊。
- 元件庫（像積木的元件箱）：現成的按鈕、卡片、標題樣式。選好一個就像有一箱好看的積木。
- shadcn/ui：一種很乾淨、常被用來做「好看又不浮誇」網站的元件庫（不用背，記得它=乾淨好讀）。
- IDE（寫程式的編輯器）：像 Word 但給程式用的工具（例如 VS Code, Cursor, WindSurf）。就把它當「可以跑網站的筆記本」。
兩小時完整流程（逐步操作＋可複製話術）
還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～
![[AI郵報新年特輯] 2025 - 26 Top 5 AI 工具 & 大事件回顧](/content/images/size/w600/2026/02/image-33-1.png)
