【Vibe Coding】老闆突然叫我做網站？兩小時刻出一個能上線的網站！（Claude Code + shadcn-ui + Vercel 實戰）

老闆今天開會忽然說：「我們下午前要有個網站原型（Prototype）喔！」

你不是前端工程師，也沒有設計稿。沒關係—照這份新手友善流程做，兩小時內你能端出一個「可點、可看、可分享」的網站雛形。

兩小時實戰流程總覽

【Vibe Coding】Codex 全新升級！GPT-5-Codex 新手教學｜2 個指令快速做出網站

Codex 全新升級！GPT-5-Codex 讓新手也能靠 2 個指令快速生出網站。本文教你安裝、操作、實測心得，手把手帶你入門 Vibe Coding。

AI郵報Vicky Tsai

需要知道、但不會難的 5 個名詞（一句話懂）

• 骨架（網站骨架 / 結構）：頁面分區與順序，如頂部選單、首頁大標、內容卡片、底部資訊。
• 元件庫（像積木的元件箱）：現成的按鈕、卡片、標題樣式。選好一個就像有一箱好看的積木。
• shadcn/ui：一種很乾淨、常被用來做「好看又不浮誇」網站的元件庫（不用背，記得它=乾淨好讀）。
• IDE（寫程式的編輯器）：像 Word 但給程式用的工具（例如 VS Code, Cursor, WindSurf）。就把它當「可以跑網站的筆記本」。

兩小時完整流程（逐步操作＋可複製話術）

Step 1｜找一個喜歡的網站，讓 AI 幫你「抄架構」

先找一個你覺得版面乾淨又順眼的網站（例如：紐約時報、Medium）。

打開 Claude Code，輸入這句話👇

我想要做一個跟這個網站功能類似的網站：[貼網址]
幫我分析它的網站架構（有哪些頁面、導覽列、內容區塊），
然後用同樣的結構生出一個可以跑的版本。

Claude 就會幫你拆出：

• 導覽列（Navigation bar）
• 首頁（Hero 區塊、三張卡片、按鈕）
• 文章列表頁（List）
• 單篇文章頁（Detail）
• 底部資訊（Footer）

這個階段不用在意內容。就像先蓋出骨架的房子，之後再裝潢。

【Vibe Coding】Claude Code 教學｜怎麼用一句話串連資料庫、建立全端網站？

用一句話指令，Claude Code 幫我把前端網站升級成能連資料庫的全端應用，從安裝到部署一次教會你！

AI郵報Vicky Tsai

Step 2｜讓網站「變好看」：shadcn-ui + 紐時風格

AI 生出骨架後，畫面通常會「還行但不美」。
這時候要用魔法詞：

幫我套用 shadcn-ui 元件庫，風格走 New York Times 報紙那種：
黑白簡潔、大標題、行距寬、很多留白。

什麼是 shadcn-ui？

它是一個開源的網頁元件庫，裡面有現成的：

• 按鈕（Button）
• 卡片（Card）
• 對話框（Dialog）
• 分隔線（Separator）
• 表單（Form）

就像一箱 LEGO 積木，直接組起來就能有漂亮的版面。

AI 幫你自動引入這個套件，整體視覺會瞬間「不醜了」。

Step 3｜Claude 額度爆了？切去 IDE + Codex 接手！

有時候 Claude 會突然罷工：「對不起，你今天的額度已滿」。
別慌。這時候代表你已經走到第二階段，該交棒給本機 AI 幫手了。

做法

1. 把 Claude 給你的程式碼整包複製。
2. 開啟你的 IDE（像 VS Code 或 Windsurf）。
3. 安裝 Codex 或其他 AI extension（這些能在你本地幫忙寫/改程式）。

對 AI extension 說：

幫我微調這個網站的細節：把首頁大標加大 1.2 倍卡片之間的留白多一點文章頁加上作者與發布時間加一個「延伸閱讀」區塊

這樣你就能在編輯器裡「邊看邊改」，比在 Chat 裡卡文字還快。

【Vibe Coding】Cursor 完整使用教學：2025 最新教學，10 分鐘做出一個 App

Cursor 是革命性的 AI 程式開發工具，讓新手也能在10分鐘內開發 App。透過自然語言對話即可生成程式碼，實現 Vibe Coding 體驗，大幅提升開發效率，是2025年程式設計師必學神器。

AI郵報Vicky Tsai

【Vibe Coding】Windsurf 教學｜ 在 60 秒內做出 MyFitnessPal 飲食追蹤 App？

想打造飲食紀錄 App 卻不會寫程式？這篇帶你用 AI 工具 Windsurf，只花 60 秒就做出 MyFitnessPal 的 MVP 雛型。從 prompt 編寫、AI 建構，到 QR Code 預覽與手機啟用，全流程零程式碼，適合初學者快速上手，也揭示 OpenAI 為何砸 30 億收購這套開發神器。

AI郵報Vicky Tsai

【Vibe Coding】Trae AI 教學：免費版怎麼修錯誤？Trae Solo 登場、支援多模型實測！

Trae Solo 登場，AI 進化成「上下文工程師」，可獨立完成全流程開發。本篇實測免費版 Trae AI，教你用中文指令修復後端錯誤，還能切換 Qwen3-Coder 模型！

AI郵報Vicky Tsai

【Vibe Coding】Kiro.dev 初學者超完整操作指南｜Amazon 推出免費 AI 編程神器，一次搞懂 Vibe vs Spec 模式！

Kiro.dev 是 Amazon 推出的免費 AI 編程神器，支援 Vibe 與 Spec 模式，從靈感到完整專案都能輕鬆實現，新手也能快速上手！

AI郵報Vicky Tsai

Step 4｜品牌化：換 Logo、改品牌名、統一主色

網站能跑不代表能給老闆看。這時候要補上「品牌感」。

1. 改網站名稱：替換成公司名稱。
2. 放 Logo：將原先不夠客製化的 Logo 改成品牌圖案。
3. 改主色：挑一個主色（通常是品牌色），其他用灰階即可。
4. 加入 OG 圖（分享封面圖）：方便貼到 Line、Threads 時顯示預覽圖。

小提示：
開 Canva 搜「website cover」模板，換字就能輸出一張好看的封面圖。

AI郵報

每日精選AI新聞、工具實測教學、技術趨勢與應用案例，讓你輕鬆掌握AI時代的知識與機會。

AI郵報

Step 5｜上線：用 Vercel CLI 一鍵部署！

最後一步，把網站丟上雲端。

Vercel 是一個免費又超快的網站部署平台。
你只要一行指令，就能拿到網址。

步驟：

【Vibe Coding】AI 生出網頁卻只能自己看？Vercel 免費部署完整教學指南

網站只能自己看太可惜！手把手教你用 GitHub + Vercel 免費部署，三步驟就能讓 AI 生成網站立即公開，快速分享作品。

AI郵報Vicky Tsai

成品檢查清單（Demo 前最後 5 分鐘）

老闆會問的 5 題 Q&A（現場應對腳本）

1. 為什麼用這種乾淨風格？
   →「因為目標是今天下午就能 Demo。這種排版大、留白多、閱讀舒服，能最穩定地承接之後的內容與品牌延伸。」
2. 為什麼先做三頁？
   →「首頁負責說清楚；列表頁負責導流；內容頁負責深度呈現。這三頁能完整展示走位，後面再加頁也不會亂。」
3. 能不能快速改成我們的品牌色？
   →「可以，我把主色集中設定，一個地方改，全站同步。」
4. 之後加表單／報名／電商要多久？
   →「骨架已經好了，新增功能只要補上對應的版塊就行，先排進下個迭代。」
5. SEO 會不會不好？
   →「我有填標題與描述，內容頁也有結構，後續再加站點地圖與更多文章就能慢慢起來。」

直接可複製的 AI 話術（集合包）

A. 建第一版骨架

幫我做三頁：首頁（大標＋三卡＋行動按鈕）、列表頁（10 張卡片佔位）、內容頁（標題＋作者/時間＋首圖＋正文＋延伸閱讀三卡）。
風格請做「報紙風，紐約時報感」，字大、留白多、細分隔線。完成首頁先停，我確認後再做下一頁。

B. 變好讀

標題放大 1.2 倍、段落行距加寬；卡片之間留白 +12px；段落左右邊界加寬一點。

C. 補品牌

把網站名稱改成「（你的品牌名）」；頂部左邊放文字 Logo；做一張 1200×630 的分享封面圖，寫上品牌名＋一句話標語。

D. 手機優化

手機寬度 375px 時，卡片改成一欄；標題大小自動縮小一級，行距維持舒適。

常見錯誤 & 立刻修法

• 塞太多顏色 → 留一個主色就好，其他用灰階。
• 想一次做完全部 → 先三頁跑通，再加。
• 字太小、資訊太擠 → 直接對 AI 說「字再大一號、段落更鬆」。
• 圖片亂、版面髒 → 先用灰色佔位圖，等定稿再換真圖。

為什麼這套流程能快又穩？

1. 從參考出發，不從零開始。
   減少 70% 架構規劃時間。
2. AI + 人工接力。
   Claude 負責生，Codex 負責修，效率最高。
3. 先跑得動，再談好看。
   有時候 Demo 比完，老闆根本不會注意字體。重點是先「有東西」。
4. Vercel 部署零門檻。
   不用伺服器、不用設定 DNS，一行指令就能展示成果。

結語：Vibe Coding 是一種「創造節奏」

這個流程不是讓你變成工程師，
而是讓你能在最短時間內「把想法變成能被看到的東西」。

Vibe Coding 的價值不只是產出速度，
而是讓「創意不再被技術卡住」。

下次老闆再說：「下午前要網站」，
你就能淡定地說一句：

「沒問題，我讓 AI 幫我蓋。」

想讓 AI 成為你團隊的一員？