用 Coding Agent 做個人作品集網站

為什麼做這個專案

不管你是設計師、行銷、學生還是想轉職的人，一個自己的作品集網站都很有用。但很多人卡在「不會寫網頁」。

在 Coding Agent 的時代，你不必先學會所有 HTML 和 CSS 才能開始。這個專案練的是另一種能力：把需求講清楚、分步驟交辦、檢查成果。這也是之後做任何 AI 專案最核心的能力。

這個循環會跑很多次，每一次都只前進一小步。

開始前的準備

• 完成「AI 寫程式入門」，知道怎麼描述需求、怎麼驗證 AI 的產出
• 讀過「AI Coding Agent」單元，了解 Chat 和 Agent 的差別
• 安裝好一個 Coding Agent。這裡以 Claude Code 示範，Cursor 或 GitHub Copilot 也可以
• 準備好素材：自我介紹、三到六個作品（圖片和一段說明）、聯絡方式

素材是你自己的，Agent 沒辦法幫你生出來。花點時間把它們整理好，網站成果會差很多。

實作指南

里程碑 1：寫下作品集規格

規格寫得越清楚，Agent 越不用猜。不需要很長，一頁就夠：

# 作品集網站規格

## 給誰看
想找 UI 設計師的台灣新創公司招募負責人

## 頁面
1. 首頁：一句話介紹、照片、三個精選作品
2. 作品列表：卡片排列，點進去看詳細
3. 作品詳細頁：圖片、我負責的部分、成果
4. 關於我與聯絡方式

## 風格
簡潔、白底、一個主色，字要大、好讀

## 不要做
不要動畫特效、不要聯絡表單（先放 Email 就好）

寫完先請 AI 幫你挑毛病，而不是直接開工：

里程碑 2：建立專案與說明檔

建立資料夾後，在裡面寫一份 CLAUDE.md。它是給 Agent 看的「工作守則」，每次開始工作時 Agent 都會先讀它：

# 專案說明
個人作品集網站，規格見 SPEC.md。

## 技術
- 純 HTML 與 CSS，不使用框架
- 圖片放在 images 資料夾

## 規則
- 一次只做一個頁面，做完先停下來讓我檢查
- 文字內容以我提供的為準，不要自行編造經歷或數字
- 必須在手機寬度下也能正常閱讀

接著用 Git 建立第一個存檔點。不熟 Git 也沒關係，可以直接請 Agent 幫你初始化，並解釋它執行了哪些指令。

里程碑 3：讓 Agent 做出首頁與作品頁

不要一句「幫我做整個網站」。一次交辦一頁：

打開瀏覽器看結果，給具體回饋。「不好看」很難改，「標題太小，作品卡片之間的間距再大一點」就很好改。滿意了就 commit，再交辦下一頁。

里程碑 4：審查、修改與手機版檢查

Agent 每次修改後，看一下它改了哪些檔案、哪些地方。重點檢查：

• 文字有沒有被改掉，或多出你沒寫過的經歷
• 圖片路徑對不對、能不能顯示
• 在瀏覽器的開發者工具切換成手機尺寸，看看會不會跑版

里程碑 5：部署上線

純 HTML 網站可以放在免費的靜態網站服務，例如 GitHub Pages、Netlify 或 Cloudflare Pages。各服務的操作畫面常改版，建議直接問 Agent：

拿到網址後，用手機打開，也傳給一位朋友，請他告訴你第一眼的感覺。

延伸挑戰

• 加上深色模式
• 加一個「最新文章」區塊，內容從 Markdown 檔讀取
• 請 Agent 幫你檢查網站的無障礙問題，例如圖片替代文字
• 把網站改用 Astro 這類靜態網站框架重寫，比較兩者的差別