學生教學 · 進階教學 03

一句說話，
整好一個 Website

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

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

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

📦 想 save 低成份教學得閒慢慢跟？留低即攞完整教學包 →

先講個重要觀念

好多人以為整網站要識 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，叫 index.html。 主題係我嘅個人品牌 — 我係教專家同老闆用免費流量網上變現嘅教練。 要有：一個吸睛 hero 標題、3 個我可以幫到客戶嘅好處、學生見證區、一個「立即預約諮詢」按鈕。 設計要求（呢部分好重要，唔好求其）： 1. 唔好用預設嗰種 AI 網站樣。字體去 Google Fonts 揀有性格嘅，唔准用 Inter、Roboto、Arial、系統預設字體；中文用 Noto Serif TC 或者 Noto Sans TC。 2. 揀一個明確風格方向（例如：高級雜誌感），成頁由頭跟到尾。 3. 配色：一隻主色打天下 + 一隻搶眼撞色做重點，唔准紫色漸變配白底。 4. Hero 標題要夠大夠狼（字級用 clamp，最大去到 80px 以上），排版唔好齊頭齊尾 — 要有留白、有嘢疊住、有唔對稱。 5. 背景唔好淨係一隻純色 — 加漸變光暈、幼線格仔或者噪點質感，整到有層次。 6. 一打開頁面，各個區塊要順序淡入上升（用 CSS animation-delay 錯開）；按鈕同卡片要有 hover 反應。 7. 手機打開一樣要靚。 用 HTML 同 CSS 寫晒喺同一個檔案。

按 Enter 送出。Claude 會喺你 folder 入面建好 index.html，一兩分鐘完成。

點解要寫咁長？你唔講清楚，Claude 就會出「最安全」嗰版 — 即係最普通嗰版。上面 7 條，每一條都係喺度封住一個佢會偷懶嘅位。呢啲嘢你唔使記，下面有得抄。

一句好說話嘅公式

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

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

關鍵一步點解你整出嚟嗰個唔靚

同一個 Claude，有人整出嚟似 2010 年嘅網頁，有人整出嚟似得獎作品。分別唔喺技術，喺你有冇落設計指令。

真相

「簡約專業」= 叫佢出最普通嗰版

如果你淨係講「設計要簡約、專業、靚啲」，Claude 收到嘅訊息係「唔好冒險」。結果就係人人都見過嗰款：白底、紫色漸變、Inter 字體、三個一模一樣嘅卡片排成一行。唔係佢做唔到靚，係你冇叫佢做。

要靚，就要俾佢一個明確方向，再封死佢偷懶嘅位。

抄呢段

🔥 靚仔開關（貼喺任何指令最尾）

唔理你叫佢整咩頁，將呢段照抄貼喺你句嘢後面：

設計要求： 唔好用預設嗰種 AI 網站樣。字體去 Google Fonts 揀有性格嘅（唔准 Inter、Roboto、Arial、系統預設），中文用 Noto Serif TC 或 Noto Sans TC。 先揀定一個明確風格方向，成頁跟到底。 配色一隻主色 + 一隻撞色做重點，唔准紫色漸變配白底。 標題要夠大夠狼，留白夠多，排版唔好齊頭齊尾。 背景加層次（漸變光暈／幼線格仔／噪點質感），唔好淨係純色。 一打開頁面各區塊順序淡入上升，按鈕同卡片有 hover 反應。 手機睇一樣要靚。
用法：你原本嗰句照寫（要乜、俾邊個、要有咩），最尾貼呢段。一句嘢嘅分別，出嚟係兩個世界。
揀一個

風格選單 — 唔好再講「簡約專業」

喺上面「先揀定一個明確風格方向」嗰度，直接指名你想要邊隻：

高級雜誌大量留白、超大襯線標題、黑白灰 + 一隻紅。似 Vogue 內頁。
科技暗黑深黑底、螢光青或橙做重點、發光邊框、數據感。似高端軟件官網。
極簡日系米白底、極幼線條、大留白、克制到極點。似無印良品。
大膽張揚撞色、超粗字、斜向排版、元素疊住元素。似潮牌。
復古印刷牛皮紙色、油墨質感、老式襯線字、粗黑邊框。似舊書封面。
柔和自然奶油色、圓角、大自然相片、柔和陰影。似生活品牌。
貼士：唔知揀邊個？直接打「你係得獎級設計師，幫我揀 3 個唔同風格方向，每個講一句，我揀完你先做。」佢會俾三個方案你揀。
最後一擊

震撼三連招（整好之後再落）

第一版出嚟已經有樣，但仲可以推高一個層次。逐句落：

再狠啲：標題再大一倍，留白再多，刪走所有唔重要嘅嘢。 加返一個開場動畫，成頁由上到下順序出現，每個區塊錯開零點幾秒。 當你係得獎設計師，將呢一頁重新設計到可以放上 Awwwards，文字內容一個字都唔好改。
最後嗰句係殺著。你唔使識講設計術語 — 直接俾佢一個「要贏獎」嘅標準，佢自己會知點做。
睇下分別

同一段文字，兩個世界

呢一頁就係用上面「靚仔開關」整出嚟嘅（高級雜誌風）：

→ 打開震撼版示範頁

文字內容同你平時寫嘅一模一樣，分別只係尾嗰段設計要求。

第三步即刻睇你個 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 個核心好處、見證區、一個明顯嘅行動按鈕（連去【你嘅連結】）。 設計要求： 風格方向：【高級雜誌／科技暗黑／極簡日系／大膽張揚／復古印刷／柔和自然，揀一個】，成頁跟到底。 字體：去 Google Fonts 揀有性格嘅，唔准 Inter、Roboto、Arial、系統預設；中文用 Noto Serif TC 或 Noto Sans TC。 配色：一隻主色 + 一隻撞色做重點，唔准紫色漸變配白底。 排版：標題夠大夠狼（clamp 到 80px 以上），留白夠多，唔好齊頭齊尾，可以有嘢疊住。 背景：加漸變光暈／幼線格仔／噪點質感，唔好淨係純色。 動態：一打開各區塊順序淡入上升（CSS animation-delay 錯開），按鈕同卡片有 hover 反應。 手機睇一樣要靚。 整好之後幫我喺瀏覽器打開俾我睇。

第五步想出街俾人睇？

個 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 俾客戶嘅公開連結。返去學員群組／課程繼續跟住睇。

🎁 想 save 低慢慢跟？

留低即攞完整教學包，得閒慢慢跟

呢份 demo 想自己一步步試？留低聯絡即刻解鎖全套教學（可 save 低手機），開班仲會第一時間通知你 + 候補限定早鳥優惠。

🎁 即刻攞完整教學包 →