綜合實戰:做一個作品集網站+聯絡表單,完整走一遍

寫一頁需求文件(動手前最重要的 20 分鐘)

第 5 課說過:AI 做歪,九成是需求講太糊。這次我們在開專案之前,先把需求寫成一頁文件。照這個格式填:

四個欄位缺一不可:目標(這個網站給誰看、看完希望他做什麼)、區塊(頁面由上到下有哪些段落)、風格(給 2~3 個形容詞加一個參考網站)、驗收條件(完成的定義,例如「手機直向瀏覽不跑版」)。把它存成 REQUIREMENTS.md,等一下直接餵給 Claude Code。花 20 分鐘寫這張,後面至少省兩小時的來回修改。

用 Claude Code 建出網站骨架

開一個新資料夾(例如 my-portfolio),把 REQUIREMENTS.md 放進去,在裡面啟動 Claude Code,然後:

請讀 REQUIREMENTS.md,用 Vite + 原生 HTML/CSS/JS 幫我做這個作品集網站(不要用框架,保持簡單)。
規則:
1. 先列出你的檔案結構規劃給我看,我確認後才動工。
2. 作品區先用 3 個佔位作品卡,文字用假資料,我之後自己換。
3. 聯絡表單先做畫面就好(姓名、Email、訊息三個欄位),送出功能下一步才接。
4. 做完幫我跑起來,告訴我用哪個網址預覽。

逐段解釋:指定 Vite + 原生三件套是因為作品集不需要 React 的複雜度,愈簡單的專案 AI 愈不容易做錯;「先列規劃再動工」是第 5 課的鐵律;表單「先畫面後功能」是刻意把工作切小——一次只改一件事。

網站跑起來、瀏覽器確認長得像樣之後,立刻建立兩個保命裝置:

1. 幫我 git init、加上 .gitignore(要含 node_modules 和 .env),commit 這個初始版本。
2. 幫我建一個 CLAUDE.md,寫入:本專案用原生 HTML/CSS/JS 不引入框架;設計風格見 REQUIREMENTS.md;每次改動前先說明計畫。

從現在起,每完成一小步就 commit 一次。改壞了,git restore . 一秒回到上一個存檔點。

換上真實內容

把佔位假資料換成你自己的:自我介紹、真實作品(沒有正式作品就放課程做過的東西:第 2 課的 Lovable 網站、第 3 課的個人品牌網站,都是作品)、社群連結。一樣用 prompt 代打:

把作品區第一張卡換成:標題「AI 個人品牌網站」、描述「用 Claude Code 從零打造,含深色模式與 RWD」、連結 https://xxx.vercel.app。只改這張卡,其他不要動。

注意最後那句「只改這張卡,其他不要動」——第 5 課教的畫紅線,避免 AI 順手「幫」你重排整個版面。每換完一個區塊,瀏覽器看一眼、commit 一次。

註冊 Formspree,拿到表單網址

到 formspree.io 用 email 註冊免費帳號(記得去信箱點驗證信,沒驗證的帳號收不到轉寄)。登入後點「+ New form」,取名 portfolio-contact,建立後你會拿到一個表單專屬網址(endpoint),長這樣:

https://formspree.io/f/mabcdxyz

f/ 後面那 8 碼是你的表單 ID。這個網址不是秘密——它本來就會出現在網頁原始碼裡,被看到也沒關係,Formspree 靠自己那端的垃圾信過濾和額度控管來防濫用。所以它不用進 .env,這是它跟 API 金鑰本質上的不同。

把表單接上 Formspree

回到 Claude Code:

把聯絡表單接上 Formspree,我的 endpoint 是 https://formspree.io/f/mabcdxyz。
要求:
1. 用 fetch 以 AJAX 送出,不要跳轉頁面。
2. 送出成功後,表單原地顯示「訊息已送出,我會盡快回覆!」;失敗顯示「送出失敗,請稍後再試」。
3. 三個欄位都要有 name 屬性和 required 驗證。

它產出的核心程式碼會長這樣(逐段看懂,以後自己就能改):

<form id="contact-form" action="https://formspree.io/f/mabcdxyz" method="POST">
  <input type="text" name="name" placeholder="你的名字" required>
  <input type="email" name="email" placeholder="你的 Email" required>
  <textarea name="message" placeholder="想說的話" required></textarea>
  <button type="submit">送出</button>
</form>

const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault(); // 攔下瀏覽器預設的跳轉行為
  const res = await fetch(form.action, {
    method: 'POST',
    body: new FormData(form),           // 把三個欄位打包
    headers: { Accept: 'application/json' }, // 告訴 Formspree:回我 JSON,不要回轉址頁
  });
  form.innerHTML = res.ok
    ? '<p>訊息已送出,我會盡快回覆!</p>'
    : '<p>送出失敗,請稍後再試。</p>';
});

三個重點:每個欄位的 name 屬性就是你收到信時的欄位名,沒寫 name 的欄位會整個消失(常見坑第 6 條);Accept: application/json 是讓 Formspree 用 JSON 回應而不是把使用者轉走;res.ok 為 true 代表 HTTP 狀態碼 2xx,送出成功。

接好之後立刻實測:在本機預覽頁填一筆假資料送出,回 Formspree 後台的 Submissions 頁看有沒有進來、你的信箱有沒有收到轉寄。測過才算完成,commit。

上線前資安掃描(第 7 課的肌肉記憶)

雖然這個專案沒有後端、沒有金鑰,風險本來就低,但「部署前必掃一次」的習慣要從第一個專案就養成。把第 7 課的檢查 prompt 拿出來用:

這個專案準備部署上線。請以資安 reviewer 的角色掃一次全部程式碼,逐項回報:
1. 有沒有任何金鑰、密碼、token 被寫死在程式碼裡?
2. 使用者輸入(聯絡表單)有沒有被直接塞進 innerHTML 之類會執行 HTML 的地方(XSS 風險)?
3. .gitignore 是否涵蓋 node_modules、.env、系統暫存檔?
4. 外部連結的 target="_blank" 有沒有加 rel="noopener noreferrer"?
每一項給我:通過/不通過 + 檔案位置 + 修法。

這個專案通常會全數通過或只有小修。重點不是這次掃到什麼,而是把「掃描」固定成部署前的必經站——以後專案變複雜、開始接 API 金鑰時,這個習慣會救你。

部署:GitHub → Vercel,這次不看筆記

流程和第 4 課一模一樣,這次試著不翻筆記做完:GitHub 建一個全空的 private repo(不要勾 README)→ git remote add origin ... → git push -u origin main → Vercel「Add New → Project」→ Import → Deploy。卡住的話才回去翻第 4 課,或把錯誤訊息直接貼給 Claude Code。

部署完成拿到 https://my-portfolio-xxxx.vercel.app,先做兩件驗收:用手機開一次(桌機沒跑版不代表手機沒跑版),在正式網址上再送一次聯絡表單(本機能送不代表線上能送,環境不同就要重測)。

綁網域 + 最終驗收

作品集網站值得一個自己的網域:.com 一年約 10~15 美元,到 Cloudflare Registrar 或 Namecheap 買,回 Vercel 的 Settings → Domains 加上網域,照後台指示到網域商加 A 紀錄和 CNAME(細節第 4 課實戰第 6 步)。等 DNS 生效、狀態打勾後,跑最後的上線檢查清單:

十項全過,恭喜——你完成了一次沒有任何人牽著手的從零到上線。這個流程你已經走得動第二次、第三次,以後不管是幫自己做、幫朋友做、還是接案做,都是同一套。