學生教學 · 進階教學 03

一句說話，
整好一個 Website

你完全唔需要識寫 code。喺 VSCode 入面打一句說話，Claude 就會由零幫你整好一個完整、靚仔嘅 website；然後你再一句一句叫佢改，改到啱你心水為止。你嘅角色係「老闆」，唔係「工人」。

難度 ★★☆☆☆ 需時 約 15 分鐘 適用 Mac 同 Windows
⚠️ 開始之前

要先喺 VSCode 入面裝好 Claude Code。如果未裝 → 睇返上一份教學「喺 VSCode 入面用 Claude Code」

先講個重要觀念

好多人以為整網站要識 HTML、識設計、識砌嘢。其實而家唔使。

😣 以前嘅做法

搵設計師、等報價、改幾輪、講唔清想要咩、最後出嚟唔似預期 — 兩星期都未搞掂。

✅ 而家嘅做法

你用一句說話講清楚你想要咩，Claude 即刻整好俾你睇。唔啱？再講一句改。整個過程好似同一個設計師傾偈，但佢秒速交貨。

記住一句：你嘅工作係「形容你想要嘅結果」，唔係「自己郁手做」。形容得愈清楚，出嚟愈靚。

第一步準備你嘅工作枱

同上一課一樣 — Claude 要有一個 folder 先可以喺度幫你做嘢。

STEP 1

開一個新 folder

喺桌面整個新 folder，可以叫做：

我的網站 或者 landing-page

STEP 2

用 VSCode 打開佢

打開 VSCode → 頂部 menu File → Open Folder... → 揀你頭先整嘅 folder → 「開啟 / Open」。

右邊撳開 Claude 對話面板（Mac：⌘ + Esc／Windows：Ctrl + Esc）。準備好喇。

第二步落你嘅第一句說話

而家最爽嘅部分 — 將下面呢句直接 copy 入去 Claude 對話框，按 Enter。

範例指令

整一個個人品牌 landing page

幫我整一個一頁式 website，主題係我嘅個人品牌。我係教專家同老闆用免費流量網上變現嘅教練。要有：一個吸睛 hero 標題、3 個我可以幫到客戶嘅好處、學生見證區、同埋一個「立即預約諮詢」嘅按鈕。設計要簡約、專業、手機睇都靚。用 HTML 同 CSS 寫喺一個檔案，叫 index.html。

按 Enter 送出。Claude 會喺你 folder 入面建好 index.html，幾十秒就完成。

呢句嘢勁喺邊？佢同時講咗：要乜（landing page）、主題（你嘅品牌）、要邊幾個區塊、設計風格、要手機啱睇。愈具體，Claude 愈唔使估。

一句好說話嘅公式

唔知點開口？跟呢個公式填空就得：

整咩「幫我整一個 ___（landing page／報名表／作品集）」
俾邊個「對象係 ___（我嘅潛在客戶／學生／報名嘉賓）」
要有咩「要有 ___（標題、好處、見證、按鈕……）」
咩風格「設計要 ___（簡約／高級／活潑），手機睇都靚」

第三步即刻睇你個 website

整好咗，點睇？兩個方法。

最簡單

直接雙擊個檔案

去你個 folder（桌面嗰個），搵到 index.html，雙擊佢。

佢會用你嘅瀏覽器（Chrome／Safari／Edge）打開 — 你即刻見到自己個 website。

更方便

叫 Claude 直接幫你開

喺對話框打：

幫我喺瀏覽器打開頭先整好嘅 index.html

Claude 會自動幫你彈出嚟。之後你每次改完，refresh 個瀏覽器就見到最新版。

第四步一句一句，改到啱心水

第一版好少一次到位，呢個先係真正威力 — 你淨係用講嘅，就改到。

例子 1

改顏色／風格

將主色由橙色改成深藍色，成個感覺要再高級啲、再專業啲。
例子 2

改文字

hero 標題改成「3 個月由零做到月入 6 位數」，副標題講返我哋係教免費流量變現。
例子 3

加新區塊

喺見證下面加多一個「常見問題」區，放 4 條學生最常問嘅問題，可以撳開收埋。
例子 4

加相／影片

幫我喺 hero 區加一個位放我嘅頭像相，我陣間會將張相放入個 folder。
貼士：將相片／影片檔直接拖入 VSCode 左邊個 folder，再叫 Claude「用啱啱放入嘅 photo.jpg」就得。

就係咁一句一句講，改到你滿意為止。唔啱再講，唔使驚整壞 — 你係老闆，佢係即時改稿嘅設計師。

🎁 萬能起手 Prompt（收藏呢句）

下次想快速起一個 website，直接抄呢個範本，填返中括號入面嘅嘢：

幫我整一個一頁式 website，叫 index.html。 主題：【你嘅產品／服務】 對象：【你想吸引邊類客戶】 要有：吸睛標題、3 個核心好處、見證區、一個明顯嘅行動按鈕（連去【你嘅連結】）。 風格：簡約專業、配色【你想要嘅顏色】、手機睇都靚。 整好之後幫我喺瀏覽器打開俾我睇。

第五步想出街俾人睇？

個 website 喺你電腦睇到，但要俾客戶／學生睇，就要放上網有條連結。

下一階段

免費發佈，攞一條公開連結

同樣係一句說話可以做到 — 不過呢部分要先連接好發佈工具，我哋會喺下一份教學專門教你「點樣將你個 website 一鍵放上網，攞返一條可以 send 俾人嘅連結」。

而家你已經學識最核心嘅一步：用講嘅，就整到一個 website。

常見問題

學生喺呢一步最常 stuck 嘅位。

我真係完全唔識 code，得唔得？

完全得。呢套做法就係專為唔識 code 嘅人設計。你由頭到尾只係用中文打字、講你想要咩。所有技術嘢 Claude 自己搞掂。

Claude 整完話搵唔到個檔案？

99% 係因為你冇 File → Open Folder，Claude 唔知放邊。先打開個 folder，再問多次。

改咗之後，瀏覽器冇變？

個瀏覽器顯示緊舊版。喺瀏覽器撳 refresh（Mac：⌘ + R／Windows：Ctrl + R）就會見到最新版。

我可唔可以叫佢整唔止一頁？

可以。直接講「再幫我加一頁『關於我』，叫 about.html，喺主頁加個連結去嗰度」就得。

整壞咗 / 唔鍾意，想返返上一版？

直接講「將頭先嗰個改動還原返」或者「我唔鍾意呢版，返返加深藍色之前嗰版」。Claude 記得你哋傾過嘅嘢。

我冇靈感，唔知個 website 寫咩內容？

叫 Claude 幫你諗：「我係教免費流量變現嘅教練，幫我諗一個 hero 標題同 3 個賣點」。佢會俾幾個方案你揀。

下一步

你而家識用一句說話整好一個 website。下一份教學會教你點樣將佢放上網、攞一條可以 send 俾客戶嘅公開連結。返去學員群組／課程繼續跟住睇。

🎖️ 下一步

想學識用 AI 打造你嘅賺錢系統？

「AI 賺錢軍隊」課程即將開班。加入候補名單，一開班即第一時間通知你，仲有候補限定早鳥優惠。

🎖️ 加入候補名單 →