用 Claude Code 做出一頁課程成果展示頁的完整 6 步驟

這篇文章來跟你分享，我怎麼樣使用 Claude Code 做一個課程的成果 Demo 頁面，進而提升學員報名下單的意願。

事情是這樣的：

最近我都在準備一堂新的課程，叫做 四周 ChatGPT 日系視覺挑戰營。

在準備課程的時候我就想：「既然這都已經是在教學視覺相關的內容了，如果我還用文字來呈現那不是很沒有說服力嗎？」

所以我就開始思考，我可不可以使用 Claude Code 直接把我已經用這個挑戰營裡面要教同學的ChatGPT 指令所生成的圖卡，直接做成一個很炫砲的 Demo 頁面。

讓學員一看到，馬上就對參加這堂課程可以獲得的成果有一個具體的感受？

在和 Claude Code 經過一番 “搏鬥” 之後，我做出了相當滿意的成果

成品長這樣，你可以直接打開來看：

ChatGPT 日系圖卡 Demo 頁面

今天這篇文章，我會帶你走過 3 件事：

1. 為什麼多數人用 AI 做網頁都失敗
2. 我跟 Claude Code 協作的完整 6 步驟（附真實對話）
3. 一份你照填就能用的「開場規格對齊」對話範本

如果你也有一份成果想被看見，這篇會幫你省下大量試錯時間。廢話不多說，讓我們開始吧！

重點 1. 為什麼多數人用 AI 做網頁都失敗

先說一個我觀察 AI Vibe Coding 很久的現象。

大部分人用 AI 做東西，動作都長一樣：

• 丟一句話，等成品
• 覺得不對，再丟一句「再炫一點」
• 再等，再失望。

來回幾次之後，得到一個結論：「AI 還是不夠強。」

但問題真的是 AI 不夠強嗎？

我覺得將心比心啦...今天你請一位接案設計師，劈頭只跟他說一句「幫我做個好看的頁面」。他做出來的，會是「他以為你要」的東西。

AI 也一樣。你給它一句模糊的指令它只能用猜的，猜得再準也還是在猜。我從這次和 Claude 合作做網頁學到的 Lesson Learned 是：

真正的關鍵，是你有沒有把想法和規格講到 AI 聽得懂。

下面就是我跟 Claude Code 從 0→ 1 做出整頁的完整過程。

先講一個關鍵心態，不然你會跟多數人卡在一樣的地方

你可能會問：「為什麼不直接叫 Claude Code 一次做完就好？」

因為我試過，結果都做超爛：

• 一次叫它做完，它會自己亂設計跟偷工減料
• 會做出一個你其實不要，但又「看起來有做」的東西

所以這次我換了個做法。我把 Claude Code當成一個接案設計師：

1. 讓它先問清楚需求
2. 它思考後會提案給我規劃
3. 被我打槍回頭修改計畫
4. 計畫都正確後再開始動手實作

接下來這六步，你會看到我從頭到尾都在「跟它討論」。