border-box 防撐爆、NVDA 鍵盤除錯到 Vercel 全網震撼發布歡迎來到 24 小時總裁黑客松實境秀現場！我是你的黑客松導師與技術總顧問。
今夜，聚光燈將全部照亮在你身上。許多完全沒有寫過一行程式碼、看見 HTML 標籤就眼花撩亂的學員，在踏進這間黑客松會場時總會懷疑地問我：「總顧問，我連變數宣告都不會，我真的有可能在 24 小時內，憑空打造出一個能在全世界手機與電腦上執行的互動網站嗎？如果 AI 寫出來的程式碼有 Bug 怎麼辦？我做出來的作品要怎麼發布給全球使用者點擊？」
請在黑客松計時器啟動的這一刻，跟我一起向全世界宣告：完全可以！而且你根本不需要去死記硬背任何一行繁瑣的程式語法！
在生成式 AI 爆發的時代，軟體開發的規則已經被徹底改寫。你不需要把自己逼成苦力碼農，你在這場黑客松裡的新身分，就是這家新創公司的『CEO 總裁老闆』兼『產品總導演』！
而你的 AI 大副 agy，就是你手下那位讀過千萬卷書籍、打字速度每秒數百 Token、極度聰明但第一天上班的「實習工程師幫手」。
今天，我們將以倒數計時的黑客松實境秀形式，帶你從拉起總裁心態、下達第一份精準派工單、拆解網頁三要素與 border-box 防撐爆裝潢卡片，到 CMD 實體跑碼抓包 AI 自我修復，最後用 npx vercel 一鍵免費將你的作品發布到全世界！
在黑客松倒數計時器按下 start 之前，請在腦海中烙印這四項 CEO 總裁級黃金心法：
在黑客松會場上，新手最常犯的致命錯誤，就是試圖去讀懂大副產出的每一行 JavaScript 語法細節，結果把自己折磨得疲憊不堪，還失去了產品大局觀。 * 總裁核心精神：「不要關心大副怎麼劃槳，關心船有沒有正確朝目的地駛去！」 * 原生輕量防線（Vanilla First）：在下達命令時，始終要求大副——「優先採用純 HTML/CSS/JavaScript 原生寫法！除非極度必要，否則絕不隨意下載安裝幾百兆的第三方複雜套件庫！」保持產品極致羽量化與秒開體驗。 * 先寫考卷再作答（TDD 測試驅動開發）：命令大副：「先幫我寫好一段自動測試腳本，專門檢查按下按鈕時有沒有聲音輸出。寫好測試腳本後再去寫網頁，直到測試腳本顯示 Pass 通過為止！」這能讓大副在暗中自我校對 100 次，產出品質極高的程式碼。
border-box 防撐爆裝潢卡片很多新手看著資料夾裡的 .html、.css、.js 檔案覺得頭昏眼花，其實它們的關係非常直觀！我們用最簡單的「水泥建築裝潢」與「五星級餐廳點餐」雙軌比喻來剖析：
<h1>)、內文段落 (<p>)、按鈕 (<button>) 與外殼容器 (<div>)。box-sizing: border-box）：傳統 CSS 排版中，如果你幫一個寬度 300 像素的盒子加上 20 像素的內邊距（Padding）與 5 像素的邊框，盒子的實體總寬度會被自動無預警撐大到 350 像素，把隔壁的家具直接擠飛掉頁！而 border-box 就像買了一個尺寸固定的鋼鐵保險箱，不論內部裝飾多麼厚實，外在實體總寬度永遠嚴格固定在 300 像素，讓大副幫你寫響應式卡片排版時絕對不爆頁面！現在，黑客松計時器顯示倒數 15 小時，請大家跟著總顧問的步驟，打開你的電腦命令列視窗！
Win + R，輸入 powershell 按 Enter 開啟黑小窗。mkdir my-cardcd my-cardpwd 並按 Enter，螢幕或 NVDA 螢幕閱讀器會朗讀出當前的精準路徑（例如 C:\ai pro\agy\my-card）。確認你已經安全站在 my-card 資料夾內部。複製以下這段極度嚴謹的 CO-STAR 總裁派工單，貼給大副 agy：
總裁派工單（直接複製）： 「背景（Context）：我是一位完全不懂程式碼的新創 CEO，現在正在參加 24 小時黑客松，要製作第一個個人名片網頁原型。 目標（Objective）：請幫我在當前資料夾建立一個名為
index.html的單頁網頁。 風格（Style）：你現在是極具耐心的資深前端 UI 設計師。請採用現代 Vanilla CSS 美學，採用圓角矩形、柔和影子、box-sizing: border-box防撐爆設計與美麗的粉藍色主題（背景色#f0f8ff，按鈕色#4682b4）。 功能細節（Features）： 1. 主標題寫上『歡迎來到總裁的個人專屬網頁』。 2. 內文包含一段親切的 CEO 自我介紹與事業願景文字。 3. 畫面上要有一個圓角漂亮的粉藍色按鈕，按鈕文字寫『點我聽聲音問候』。 4. 使用 Web Audio API（絕不外連任何外部音效檔），當使用者點擊按鈕時，自動用代碼發出兩聲清脆的嗶嗶聲問候（800Hz 與 1000Hz 音調）。 格式限制（Constraints）：請將 HTML、CSS 與 JS 全部整合成單一index.html檔案寫入本機，全篇絕對禁止使用任何 markdown 表格或 HTML 的 table 標籤排版。」
大副接收指令後，會呼叫 write_to_file 工具建立 index.html。我們來看看大副在背後為你寫出的程式碼結構，讓你當個心知肚明的老闆：
<button id="soundBtn">點我聽聲音問候</button>，這就是我們在畫面上放的那張按鈕椅子。#soundBtn { background-color: #4682b4; border-radius: 10px; padding: 12px 24px; color: white; box-sizing: border-box; }，這就是把按鈕塗成粉藍色、加上圓角與白字衣服，並確保邊框不撐爆盒子。const audioCtx = new AudioContext(); 與 oscillator.start();，這就是利用瀏覽器內建的音效發聲器，當按鈕被點擊（addEventListener('click')）時，發出兩聲嗶嗶音！ls 或 dir，確認資料夾裡出現了 index.html。my-card 資料夾，雙擊點開 index.html（或在瀏覽器網址列輸入 my-card/index.html）。在黑客松進行到午夜時分，大副可能會自信滿滿地向你保證「報告總裁！程式碼完全無瑕，保證運作！」但你點擊按鈕時卻一片死寂。
這時候，請警惕這項大語言模型的底層特性——魔族喊『媽媽』效應！
cd my-card，對大副說：「大副，請幫我寫一個叫 read_data.py 的 Python 程式，去讀取一個叫 secret.txt 的檔案並印出文字。」python
with open('secret.txt', 'r', encoding='utf-8') as f:
print(f.read())python read_data.py 執行！
看！終端機立刻跳出了紅色的英文報錯：
Traceback (most recent call last):
File "read_data.py", line 1, in <module>
with open('secret.txt', 'r', encoding='utf-8') as f:
FileNotFoundError: [Errno 2] No such file or directory: 'secret.txt'secret.txt。read_data.py 第一行。write_to_file 建立 secret.txt，並在 Python 加入安全檢查！python read_data.py——報錯消失了，文字成功印出來了！在瀏覽器中如果按鈕點了沒反應： * 按下 F12（或 Ctrl + Shift + J）開啟開發者工具。 * 按下 Ctrl + 數字鍵 2 切換到 Console（主控台） 分頁。 * 用 NVDA 審閱游標朗讀並用 NVDA + F9 / F10 複製這裡記錄的隱形紅色報錯，貼給大副即可一秒修好！
npx vercel 1 鍵發布全流程黑客松倒數最後 1 小時！作品在自己電腦上完美運作還不夠，我們必須把它部署到全球網際網路上，讓評審與全世界使用者都能點擊造訪！
在終端機確定你位於 my-card 資料夾中，輸入以下指令：
npx vercel
(註：npx 是 Node.js 工具超市指令，會自動下載並執行 Vercel 部署工具，不需要手動繁瑣安裝！)
命令列會啟動互動式問答，請遵循以下 6 大問答引導：
Set up and deploy "~/my-card"? [Y/n]my-card 專案資料夾）。Which scope do you want to deploy to?Link to existing project? [y/N]What's your project's name?my-card 作為全球專案名稱）。In which directory is your code located? ././ 中）。Want to modify these settings? [y/N]看著命令列中的進度條跑完 5 到 10 秒，終端機將會印出耀眼的生產環境網址：
Production: https://my-card-xxxx.vercel.app
使用 NVDA+F9/F10 或滑鼠複製這串網址，貼到瀏覽器或手機上——看！你的個人名片網頁已經在全世界的網際網路上完美上線運作了！
在黑客松頒獎典禮上，我們來進行最後的總裁心態鞏固小測試：
border-box 防撐爆裝潢風格的是哪一個？恭喜你！總裁！你已經成功從一位連程式碼都看不懂的新手，完整經歷了「建立 CEO 心態 ➔ 指揮 AI 寫網頁 ➔ 實體跑碼抓包除錯 ➔ 免費一鍵部署發布全網」的全套黑客松實戰！
現在，你已經是一位具備實戰部署能力的 AI Side-Coding 總裁老闆了！
👉 下一堂課：Lecture 11.5 名偵探看診病例文體：收集三大金牌線索、解剖 F12 隱形病灶與 Agent Self-Healing 自我修復歷程 👉 回課程大綱：學習地圖
以下題目專為尋求真正硬核觀念與專家級實戰能力的學員設計。題目無法從講義表面抄寫解答，請嘗試獨立思考後再點擊展開解析。
【實戰情境問題】：在無障礙網頁設計中，為什麼 `box-sizing: content-box`（瀏覽器預設值）是導致高對比按鈕或放大字體時容器被「撐爆破版」的罪魁禍首？`border-box` 如何改變盒模型的計算公式？
【鑑別點說明】：測試學員是否真正理解 CSS 盒模型（Box Model）幾何計算與無障礙字體放大下的彈性適應。
【專家級解答與深度剖析】： * **`content-box` 公式**：`元素的實體總寬度 = width + padding + border`。如果設定 `width: 100%` 又加上 `padding: 10px`，總寬度會變成 `100% + 20px`，直接超出父容器引發橫向滾動條或破版。 * **`border-box` 公式**：`width` 直接包含了 `padding` 與 `border`。設定 `width: 100%` 時，增加內邊距只會壓縮內部的文字區域，元素總寬度嚴格保持 100%，徹底封殺破版風險。
【實戰情境問題】：當視障學員使用 NVDA 開啟瀏覽器 F12 檢視器時，如何利用 NVDA 審閱游標 (Review Cursor) 抓取 Console 紅字錯誤，並將其轉化為 Agent 能秒速修復的「三大金牌線索」？
【鑑別點說明】：考驗學員將無障礙輔助工具（NVDA 審閱游標）與 Agent Self-Healing 閉環相結合的實戰技巧。
【專家級解答與深度剖析】： 視障學員按 `NVDA + Numpad 7` 進入螢幕審閱模式，使用 `Numpad 8`（上一行）與 `Numpad 2`（下一行）在 F12 Console 區域精確移動審閱游標，找到帶有 `Uncaught ReferenceError` 的紅字行。按 `NVDA + F9` 標記起點，`NVDA + F10` 標記終點並複製 Traceback。將此 Traceback 貼給 Agent，Agent 即可取得檔名、行號與錯誤型別三大金牌線索，觸發自癒修復閉環。