一句話做出個人網站：Claude Code 新手作品集教學

做了遊戲、設了規矩，卻沒有一個地方能把作品拿給別人看？這篇用一句話做出你的個人網站：首頁、關於我、作品區，作品區直接放上第一篇做的貪食蛇，手機也能玩。這次換個做法：先切到 plan 模式，讓它把計畫寫給你看，你點頭了它才動手。

快速回答 在一個空資料夾啟動 Claude Code，按 Shift+Tab 切到 plan 模式，用一句話說你要的網站：有哪些區塊、放什麼作品、手機要好看。plan 模式下它只會讀檔、提問、寫計畫，不會改檔；你核准計畫後它才開始做，選 Yes, and use auto mode 中途問得最少。2026-10-21 用 Claude Code 2.1.305 實測，沿用之前做的貪食蛇，核准後 3 分 11 秒做好網站，手機也能玩。之後想換風格，再一句話就好。

做完這篇，你會有

• 一個 my-site 資料夾：首頁、關於我、作品區，電腦和手機都好看
• 作品區的貪食蛇，點了就能玩，手機上可以滑動或按螢幕方向鍵
• 會用 plan 模式：先看計畫，再決定要不要動手

開始之前要準備：第一篇做的 snake-game 資料夾。沒有也沒關係，把句子裡放遊戲的部分刪掉就好。

步驟 1：開資料夾，切到 plan 模式

在 snake-game 旁邊建一個新資料夾 my-site，在裡面啟動 Claude Code：

mkdir my-site
cd my-site
claude

按 Shift+Tab 幾次，直到狀態列出現 ⏸ plan mode on。順序是 auto、manual、accept edits、plan，再回到 auto。

plan 模式下，Claude Code 會讀檔、查資料、寫計畫，但不會改你的檔案，要等你核准。

步驟 2：用一句話說你要的網站

輸入：

幫我做一個個人作品集網站：首頁有大標題和一句自我介紹、關於我、作品區；作品區放上隔壁 ../snake-game 的貪食蛇遊戲（複製進來，點了可以玩）。只用 HTML、CSS、JavaScript，手機也要好看。

它先看了兩個資料夾，然後停下來問你。

用方向鍵選、按 Enter 確認。這次兩題都選推薦的：手機加上觸控操作；名字和自我介紹先放「你的名字」這類佔位文字，之後自己改。最後選 Submit answers。

步驟 3：看計畫，核准才動手

它把計畫寫出來：要建哪些檔案、每一區長怎樣、遊戲要加什麼、怎麼驗證。

讀一遍，看有沒有你不要的。三個選項：

計畫沒問題就選第一個。想在計畫裡直接改幾個字，按 Ctrl+G 用編輯器打開它。

步驟 4：等它做完，打開來看

選了之後它離開 plan 模式開始做：建檔、複製遊戲、加上觸控操作，最後自己用瀏覽器開起來看版面。

打開 my-site/index.html 就能看。想用手機看，在 my-site 裡執行 python3 -m http.server 8000，手機連同一個 Wi-Fi，打開 http://電腦的IP:8000。

把「你的名字」、自我介紹和頁尾的 Email 換成你的，可以自己改 index.html，也可以叫它改。

步驟 5：一句話改版

第一版用了遊戲的深色配色。想換個感覺，直接說：

整個網站改成米白底、深綠色點綴的淺色風格，作品卡片滑鼠移上去會微微浮起來

這種小改動不用回 plan 模式，現在的 auto 模式就可以。

這次保留原本的版面，只換了配色和卡片效果；改動都在 style.css，index.html 沒有動。

換你做

用你自己的一句話改一次：換配色、換字體大小、在作品區多放一張卡片都可以。寫的時候說清楚三件事：

• 改哪裡：整個網站、首頁標題、作品卡片
• 改成什麼樣：顏色、大小、動作
• 哪裡不要動：例如「遊戲頁維持原樣」

常見卡關

• 按了 Shift+Tab 沒看到 plan mode：多按幾次，狀態列會依序換成 auto、manual、accept edits、plan。
• 在 plan 模式說了需求，它卻沒改任何檔案：這是正常的，plan 模式只寫計畫。等它跳出 Ready to code?，選一個 Yes 才會動手。
• 計畫太長看不完：先看「檔案結構」和「已確認」兩段，知道它要建哪些檔、照你哪些回答做，就夠決定要不要核准。
• 它複製遊戲時要讀上一層資料夾：auto 模式會自己判斷能不能做；在 manual 模式會先問你，選 Yes 就好。
• 手機打開是空白或連不上：電腦和手機要連同一個 Wi-Fi；手機的網址填 http://電腦的IP:8000。

你做到了

• 用 plan 模式讓它先問問題、寫計畫，你核准了才動手
• 一句話做出有首頁、關於我、作品區的個人網站，手機也能玩貪食蛇
• 一句話改版，換成自己喜歡的風格

下一篇幫這個網站加上會動的 Logo 和載入動畫。

常見問題

什麼時候該用 plan 模式？

要建很多檔、或你還沒想清楚細節的時候。從零做網站時，它會在 plan 模式先跟你確認細節，例如手機要怎麼操作、名字要放什麼。改一句文案、換個顏色這種小事，直接說就好。

我只想這一次用 plan 模式，有更快的方法嗎？

在需求前面加 /plan，只有這一句會先寫計畫。例如 /plan 幫我在作品區多加一張卡片。

核准之後還能改計畫嗎？

它已經開始做了。可以按 Esc 停下來，再告訴它要改哪裡；或按 Shift+Tab 切回 plan 模式，請它重新規劃。

網站要怎麼給別人看？

對方和你連同一個 Wi-Fi 的話，用步驟 4 的 python3 -m http.server 8000，請對方打開 http://電腦的IP:8000。要拿到一個任何人都打得開的網址，需要把網站部署到網路上的主機。

下一步

• 裝好 Claude Code，一句話做出你的第一個小遊戲：還沒有貪食蛇，先做這篇。
• Claude Code 權限設定懶人包：該自動的自動、該問的一定問：想讓它改網站時不用每次問，看這篇。

參考資料

• Anthropic, Choose a permission mode（Claude Code 文件，plan 模式只讀不改、Shift+Tab 與 /plan、核准計畫的選項、Ctrl+G 編輯計畫） https://code.claude.com/docs/en/permission-modes