不會寫程式，用 Claude Code 30 分鐘做出第一個網頁

你下載了 Claude Code，打開來，看著空白的畫面，不知道要說什麼。

這很正常。大多數人第一次打開都是這個感覺。

這篇文章帶你做一件具體的事：用 Claude Code 做出一個真的可以給別人看的個人網頁。

做完這篇，你有一個可以放上去說「這是我做的」的網頁。不需要懂 HTML，不需要懂 CSS，不需要懂任何程式語言。

在開始前，確認你有這三樣東西：

Claude Code（付費方案 $20/月，或免費版也能做這篇） → 下載：https://claude.ai/download

一個想法：你的網頁要放什麼？ → 最簡單的選項：自我介紹頁（名字、做什麼、聯絡方式） → 其他選項：作品集、活動報名頁、小工具介紹頁

一個空資料夾：在你的電腦上建一個新資料夾，叫做 `my-first-webpage`

準備好了？開始。

用 Claude Code 打開你剛建的空資料夾。

然後說這句話（把 XX 換成你的資訊）：

``` 幫我做一個個人介紹網頁。

內容： - 我叫 XX - 我是 XX（你的身份或工作） - 我喜歡 XX - 聯絡我：XX（email 或 IG）

要求： - 看起來簡單乾淨，不要花俏 - 手機上看也要好看 - 只用一個 HTML 檔案，不需要其他東西 ```

貼上去，送出。

Claude Code 會開始寫。你會看到它生成了一個 `index.html` 檔案。

這步做完的標誌： 你的資料夾裡出現了 `index.html`

找到剛剛生成的 `index.html`，用滑鼠雙擊打開它。

你的瀏覽器會顯示你的網頁。

這就是你第一個網頁的樣子。

如果你喜歡這個設計：太好了，繼續 Step 3。

如果你覺得有地方不對：告訴 Claude Code。例如：

``` 背景顏色改成深藍色 字體太小了，放大一點 把聯絡方式移到最下面 ```

Claude Code 會修改。重新整理瀏覽器，看更新後的版本。

可以改幾次，直到你覺得還不錯為止。

這步做完的標誌： 你在瀏覽器看到了自己的網頁，大致上滿意

現在網頁有了，試著加一個小功能。

選一個你覺得有趣的：

選項 A：深色模式切換按鈕 ``` 幫我加一個按鈕，點下去可以切換深色和淺色模式 ```

選項 B：點擊聯絡方式複製到剪貼板 ``` 幫我讓 email 那個地方可以點擊，點了自動複製 email 到剪貼板， 然後顯示「已複製！」的提示 ```

選項 C：名字會有打字動畫 ``` 幫我讓頁面載入的時候，我的名字是一個字一個字慢慢出現的效果 ```

貼上你選的那一句，讓 Claude Code 加上去。

這步做完的標誌： 你的網頁有了一個你自己選的功能，而且它運作了

現在你的網頁只在你的電腦上。要讓別人看到，需要「上線」。

最快的方法是用 Netlify Drop，免費，不需要帳號：

1. 打開：https://app.netlify.com/drop 2. 把你的 `my-first-webpage` 資料夾拖進去 3. 等幾秒鐘 4. 你會得到一個網址，像是 `https://sparkly-sunshine-123456.netlify.app`

這個網址可以分享給任何人，在任何裝置上打開。

這步做完的標誌： 你有一個可以分享的網址

你剛做出了一個真的可以給別人看的網頁。

你沒有寫一行程式碼，但你做出了一個有自訂設計、有功能、可以上線的網頁。

這就是 Claude Code 能做的事。

下一步可以做什麼：

- [加一個聯絡表單：讓訪客可以傳訊息給你](/posts/claude-code-contact-form) - [把網頁換成自訂網域（yourname.com）](/posts/custom-domain-netlify) - [用 Claude Code 做一個小遊戲](/posts/claude-code-first-game)

想知道 Claude Code 接下來能做什麼？訂閱電子報，每週一篇新手實戰。