---
# System prepended metadata

title: "\U0001F3C5 Day 21 - 期末大魔王：做一個解決身邊小痛點的 AI 網頁小工具！"
tags: [2025 VibeCoding 體驗營]

---


# 🏅 Day 21 - 期末大魔王：做一個解決身邊小痛點的 AI 網頁小工具！

恭喜你一路闖關到 Day 21 🎉
你已經玩過：

* 幫健忘校長設計 ChatGPT 專案（Day 05）
* 用 Prompt 做各種生活小幫手（Day 06）
* 用網頁做妙麗年齡計算機＋localStorage（Day 06, Day 12）
* 把網頁釘到手機桌面當 App（Day 13）
* 用 Google Sheet + CSV 讓 3C 商品自動上架（Day 18）
* 用 AI 問清楚資料流與專業資料庫（Day 19）

今天，輪到你自己出題給自己：

> ✅ 從你「最常遇到的煩惱／重複工作」出發
> ✅ 設計一個 **AI Prompt 專案模式**
> ✅ 做一個「AI 網頁小工具」
> ✅ 再用 AI 做一張 **期末完成封面圖**，當作領獎憑證 🎁

---

## 🎯 今日學習目標

1. 練習從「生活痛點」出發設計產品，而不是為了寫程式而寫。
2. 把這 21 天學到的：Prompt 設計、AI 專案模式、前端小工具，整合成一個作品。
3. 練習用圖片＋介面好好說明自己的作品，做出一個可以拿出來炫耀的「期末成果」。

---

## 一、先找一個「你真的在意」的問題（題目發想）

請從你**身邊常發生的事情**裡，挑一個你真的想被解決的：

* 生活類：

  * 每天中午要吃什麼？
  * 每週運動計畫怎麼排？
  * 一週的飲食想健康一點怎麼配？
* 學習／工作類：

  * 寫會議紀錄很痛苦？
  * 每週工作週報都在 copy paste？
  * 常常不知道今天要先做哪一件事？
* 興趣／副業類：

  * 寫社群貼文文案很卡？
  * 想設計課程介紹卻不知道怎麼寫？
  * 想幫客人回覆訊息，但每次都從零打？

👉 規則只有一條：

> **這個小工具，最好是「你自己會用」的，不是做來交差而已。**


## 二、設計一個 ChatGPT「專案模式」：你的 AI 夥伴

請為這個問題，設計一個 ChatGPT 專案模式（類似 Day 05、Day 06 那種）。

### 專案名稱（必填）

* 例如：

  * 「午餐選擇不內耗小幫手」
  * 「一週待辦整理秘書」
  * 「健身計畫教練」
  * 「會議紀錄整理官」

### 專案 Prompt（必須包含）

請在專案裡寫出一個完整指示，至少要有：

1. **角色設定**：

   * 例：你是一位懂營養的午餐顧問 / 溫柔但務實的專案經理 / 擅長整理資訊的筆記助教…
2. **使用者會提供什麼**：

   * 例：今天心情、預算、周遭地區；
   * 或是：今天待辦清單、預計下班時間…
3. **AI 要回什麼格式**：

   * 建議：用「表格」或「條列式」固定格式，方便貼到網頁 / Notion / Google Sheet。
   * 例：

     * 欄位包含：選項、理由、預估花費時間、難度…
     * 或：優先度、任務名稱、預計時間、備註…
4. **語氣與風格**：

   * 例：口語、輕鬆、像朋友；或是偏正式、有條理、像 PM。

---

## 三、做一個「AI 網頁小工具」

### 必做

1. 請你用 **GitHub Pages** 來開發自己想做個工具或計算機，或是直接拿期末天氣小幫手優化功能
2. 網頁要有自己的手機主畫面 icon（延續 Day 13）。

> 不一定要寫到很 Hard 的原生 JS，只要做到
> 「**我打一些東西 → 按按鈕 → 得到有用的回覆或指示**」
> 就是合格的網頁工具 ✅

### 加分
 1. 搭配一個 API 來整格(CWA 天氣服務、Google Sheet、其他)


---

## 回報格式（期末繳交）

請在 Discord 討論串，繳交以下內容：

1. 你的 ChatGPT 專案小幫手，並提供截圖與資訊，並取一個名字
2. 你的 GitHub Pages 網頁工具，並取一個名字
    * 提供 GitHub Pages網址
    * 截圖手機 app 畫面或照相你拿在手上操作 App 的畫面
2. **心得**
   * 這個工具對你有幫助的地方是？
4. 是否願意讓校長在脆/臉書分享您的小工具或截圖？或是您分享到社群讓我轉貼？
    * 選項1：沒問題可讓校長分享
    * 選項2：我會在社群寫貼文分享自己的 AI 服務
    * 選項3：先不用)
6. 做完後，截圖每日任務對話，點擊左上角編輯鉛筆模式，找到  校長 line id，line 訊息領取神秘小禮物 🙌 

<!-- 校長 line id：liao0512 -->


![截圖 2025-11-27 下午1.16.40](https://hackmd.io/_uploads/B1vpR8S-bl.png)

## 校長未來的行程

有許多學生詢問說，後續我的動向，以及追蹤我的開課通知

如果你想到現場和校長聊聊，你可以免費參與這兩個活動，尋找六角攤位

並和我分享你是參加過 Vibe Coding 的學生，我會很開心的~


* [WebConf 研討會 12/12~12/13](https://webconf.tw/)
* [Yourator 博覽會](https://yourator.co/events/2026-Yourator-AI-careerfair?utm_source=yourator&utm_medium=homepage&utm_campaign=hexschool)


### 明年我會開的營隊，會專注於「後端工程師培訓班」

1. 明年 2026/1 月：後端工程師體驗營(會有 docker、資料庫、完整商業型前後端專案)
2. 2026/3~2027/3：整年度的後端+雲端 AWS 工程師培訓營


如果你有意將軟體工程師做為自己未來的技能之一，歡迎來找六角進修 :D