Claude Code新手：如何零基礎開發第1個網頁

Claude Code新手也可以零基礎開發網頁，不需要先學完 HTML 或 JavaScript，而是找到一個可以運作的具體起點。本篇以 PptxGenJS 在瀏覽器產生簡報下載為實作範例，示範 Claude Code 如何帶著新手從理解機制、看懂程式碼，一路走到按下按鈕、在近期下載記錄裡看到真實 .pptx 檔案的完整流程。

一、問出 PptxGenJS 瀏覽器下載的完整機制

贊贊小屋在先前的文章中提過，PptxGenJS 可以讓使用者點一個按鈕就下載簡報，因此這次直接在 Claude Code 的對話裡追問「這是怎麼做到的」。Claude 的回答是：整個流程透過瀏覽器的「Blob 加下載觸發」機制完成，不需要伺服器介入。具體路徑是：PptxGenJS 先在記憶體中建立 .pptx 檔案，轉成「Blob」（二進位大物件），再用「URL.createObjectURL()」產生暫時 URL，動態建立 <a> 標籤並觸發 click，最後由瀏覽器觸發下載流程，檔案會出現在下載記錄或預設下載資料夾中。

這一步最重要的不是馬上拿到程式碼，而是先把「網頁為什麼能下載檔案」問清楚。Blob、Object URL、動態 <a> 標籤這些名詞對新手來說初看陌生，然而它們只是瀏覽器裡一套固定的臨時下載流程，每個環節各司其職。先理解整體路線，後面看到程式碼時就知道每一行在做什麼，而不是把不懂的語法複製貼上再祈禱它能跑。這正是向 AI 要「解釋機制」而不是「給我程式碼」的學習效益所在，也是進入 Claude Code 教學最值得建立的第一個習慣。

二、學習網頁基礎：按鈕加上 PptxGenJS 腳本

理解機制之後，Claude 接著給出實際的程式碼。紅框標示的第一個區塊是 HTML 的按鈕：<button onclick="downloadPptx()">下載簡報</button>，點擊後觸發 downloadPptx() 函式。下方的 script 區塊先用 <script src="pptxgen.bundle.js"></script> 載入函式庫，再在函式內建立 PptxGenJS 物件，核心的兩行是「let slide = pptx.addSlide()」和「slide.addText(“Hello World”, { x: 1, y: 1, fontSize: 36 })」，最後呼叫「pptx.writeFile({ fileName: “my-presentation.pptx” })」觸發下載。

這段程式碼的結構很適合當作瀏覽器端互動網頁的最小模型：一個按鈕負責接收動作，一個函式負責執行任務，一個函式庫負責完成產出。掌握「按鈕觸發函式、函式呼叫函式庫」這個模式之後，未來換成產生 CSV 或圖片下載，替換的只有函式庫和內部邏輯，onclick 的觸發框架完全通用。另外值得注意的是，<script src> 可以從 CDN 載入函式庫，不需要 npm install，因此只要函式庫載入正常，這個範例就能在瀏覽器端直接執行，不必先安裝 Node.js 或 npm。這也是 AI 簡報生成器能在瀏覽器端即時產生簡報的底層邏輯。

三、writeFile() 在瀏覽器與 Node.js 的差異

同樣是 writeFile()，在不同環境下的行為並不相同，這張圖用一個表格把差異說清楚了。紅框標示的兩列分別是：瀏覽器環境下觸發下載（Blob → <a> click），Node.js 環境下則是寫入實體檔案到磁碟。PptxGenJS 內部會自動偵測執行環境，選擇對應的行為。圖的下方也補了一段說明：整個過程完全在瀏覽器記憶體中進行，不需要上傳到伺服器，所以速度很快，也不會有隱私疑慮。

這個差異反映了 JavaScript 一個更根本的特性：同一套 API，在不同執行環境下可以有完全不同的實作方式。PptxGenJS 內部偵測 window 物件是否存在來判斷環境，瀏覽器有 window 物件，Node.js 沒有，因此走不同的程式路徑。理解這個「環境感知」設計，往後閱讀其他函式庫的文件時，看到「Browser / Node.js」分欄說明，就已經知道這代表什麼了，這也是 Claude Code 玩法裡常會遇到的判斷點。

四、桌面的 output.pptx 可以直接拿來用

進到實作階段，手邊剛好有現成的素材。Finder 的預覽面板顯示一張投影片，中央是紅框標示的文字區域：「Hello! 這是我的第一份簡報」，字體粗黑、置中排列。下方資訊列顯示「output.pptx」、「Office Open XML 簡報 – 45 KB」，畫面底部的路徑則是「Macintosh HD > 使用者 > zanzan > 桌面 > output.pptx」，確認這份簡報就放在桌面上，內容清楚、路徑明確。

「拿現有的東西來用」是開發流程中很重要的思維。這份 output.pptx 是先前的產出，直接作為這次任務的素材，省去重新描述格式和內容的時間。在實際工作中，不管是舊的試算表、已有的 HTML 範本，還是寫到一半的程式碼，都可以成為 Claude Code 的起點。讓 AI 讀取現有資產再重建，比從空白開始更快，也更容易對齊實際需求，這正是 AI 生成簡報推薦系列文章一再強調的工作方式。

五、Claude Code 重建現有簡報成為下載網頁

贊贊小屋輸入「以現在有的 output 簡報做看看。」這句話清楚點出了起點和目標，Claude Code 立刻開始行動。它先列出桌面上的現有檔案，找到 output.pptx，再呼叫工具讀取簡報內容。確認完成後，Claude Code 回報：「桌面上有 output.pptx，讓我先讀取它的內容，再用 pptxgenjs 重建成可在瀏覽器點擊下載的版本。」接著跑了三個指令、使用了一個工具，隨即確認簡報只有一張投影片，內容是「Hello! 這是我的第一份簡報」，並宣告下一步要建立 HTML 頁面讓使用者點按鈕就能下載。

這個操作示範了一個很實用的指令設計原則：「以現有的 X 為基礎，做出 Y」。這類指令把範圍限縮得清楚，讓 Claude Code 先確認手邊有什麼，再決定要建構什麼，整個流程沒有多餘的猜測。給 AI 任務時，「有什麼、要變成什麼」的格式往往比模糊的「幫我做一個……」更能產出貼近需求的結果，這也呼應 CLAUDE.md 範例裡關於 CLAUDE.md 指令設計的核心原則：給的資訊越具體，AI 的行動就越準確。

六、Claude Code 建立下載頁面與即時預覽

Claude Code 建立了 download-pptx.html，新增 85 行、刪除 0 行。左側面板顯示「檔案已建立，可以在右側預覽面板看到了。讓我截圖確認畫面正常。」隨後的工具清單記錄了完整過程：三次 ToolSearch、讀取預覽清單、啟動預覽伺服器、截圖確認，過程中也建立了 .claude 目錄與 launch.json 設定檔。右側預覽面板（localhost:8765）已顯示完整的下載頁面：標題「我的第一份簡報」、說明文字「點擊按鈕即可下載 .pptx 檔案」、藍色的「⬇ 下載簡報」按鈕，以及底部的「使用 PptxGenJS 在瀏覽器端產生，不需伺服器」說明。

這一步特別值得觀察 Claude Code 的工作方式，因為它不只是產生程式碼，而是建立檔案、啟動預覽、再截圖確認畫面正常之後才繼續。每一個動作背後都是開發實務中的基本習慣，其中「截圖確認再繼續」就是前端開發常說的視覺驗證。透過觀察 AI 的操作流程，可以反過來學到專業開發者如何一步一步確認自己沒走錯方向，這也是 Claude Code 自動模式執行多步驟任務時最重要的能力之一。

七、Claude Code新手成果：可點擊下載的網頁

對 Claude Code 新手來說，這次最重要的成果不是寫出多複雜的程式，而是做出一個有按鈕、可點擊下載簡報的網頁。最後測試在 Chrome 瀏覽器裡進行。標籤列顯示「下載簡報」，網址列是「/Users/zanzan/Desktop/download-pptx.html」，這代表最後測試時，已經不是透過前面 Claude Code 預覽用的 localhost 頁面，而是直接打開桌面上的 HTML 檔案。點擊頁面上紅框標示的藍色「⬇ 下載簡報」按鈕後，瀏覽器右上角彈出近期下載記錄：「output (1).pptx，43.8 KB，完成」，以及稍早測試留下的「output.pptx，43.8 KB，7 小時前」，兩份檔案都已順利下載到本機。

近期下載記錄裡的 output.pptx，是這整個流程最具體的終點。從追問下載機制、理解 Blob 原理、看懂按鈕加腳本的程式結構、理清 writeFile() 的環境差異，到把現有簡報交給 Claude Code 重建、看著 HTML 頁面在預覽面板成形，最後在自己的電腦上按下按鈕、真的下載出一份可以打開的 .pptx 檔案，每一步都留下了可以驗證的產出。這代表整個流程已經跑通：HTML 可以開啟，按鈕可以觸發，PptxGenJS 可以在瀏覽器端產生檔案，瀏覽器也完成下載，對零基礎開發來說，這就是第一個重要的里程碑，更完整的 Claude Code 可以做什麼，則是下一步想探索的方向。

從提問到網頁：零基礎做出第一個 HTML

幾十年前，第一批工程師用 C 語言在終端機跑出「Hello, World!」，那時候能做到這件事的都是世界最頂尖人才，需要熟悉最先進的電腦資訊科學，才能透過程式碼讓一行文字出現在螢幕上。短短幾十年過去，AI 最偉大的貢獻，或許正是徹底降低了這道門檻。

如同文章所言，不需要任何程式基礎，只要向 Claude Code 簡單提問，甚至是透過免費網頁版 AI 也可以，很快就能做出一個看得到、點得了、能下載檔案的功能性網頁。有興趣繼續深入的話，Claude Code 大全集整理了從安裝到進階用法的完整路線；想直接查閱技術細節，Claude Code 概述是很好的第一手文件。所以赤手空拳的人類，仍然有無窮無盡的想像力與創造力，現在有 AI 的幫忙，道路更平坦了，天空也更高了。

學會計、學Excel、學習AI工具，歡迎加入贊贊小屋社群。

AI對未來工作的影響：黃仁勳GTC 2026十大啟示

Claude Code是什麼、ChatGPT怎麼用？、ChatGPT Excel教學、ChatGPT寫ExcelVBA、Gemini是什麼？、Notion教學、AI對會計的影響。

贊贊小屋AI課程：Claude Code、ChatGPT課程、AI工具全攻略、Notion課程。