《零基礎學 Vibe Coding》線上補充教材

請幫我做一個簡單的待辦事項 App，
可以新增、完成、刪除待辦事項，
使用簡潔的白色介面，
請用一個 HTML / CSS 檔案完成。

基本句型：請幫我用〔技術〕做一個〔功能〕，要求〔條件〕
範例：請幫我用Python做一個CSV轉換工具，輸入銷售數據

幫我寫一個簡單的 HTML 網頁，顯示一個標題「我的第一個網頁」，
下面有一段文字「這是用 AI 幫我寫的！」，
再加上一個按鈕，按下去會跳出一個對話框說「恭喜你成功了！」

很好！請幫我加上以下功能：
1. 把背景改成淺藍色
2. 標題改成置中對齊
3. 加上一個文字輸入框和一個「送出」按鈕，
   按下送出時，在頁面上顯示使用者輸入的文字

請幫我做一個個人待辦清單的 Web App，需要以下功能：
1. 有一個輸入框和新增按鈕，可以新增待辦事項
2. 每個事項可以點擊標記為已完成（顯示刪除線效果）
3. 每個事項右邊有刪除按鈕可以移除
4. 資料用 localStorage 儲存，關閉瀏覽器後不會消失
5. 底部顯示「共 X 項，已完成 Y 項」的統計

介面風格：簡潔現代，白色背景搭配淺灰色卡片，
主色調用藍色。置中顯示，最大寬度 500px。

請幫我做以下修改：
1. 字體放大一點，主要文字用 16px。
2. 「新增」按鈕改成藍色背景、白色文字，更醒目一些。
3. 完成的事項移到列表最下方。
4. 加上一個清除全部已完成事項的按鈕。

請幫我建立一個待辦清單 Web App 的專案。需求如下：
- 使用 HTML + CSS + JavaScript
- 功能：新增事項、標記完成、刪除事項、localStorage 儲存
- 底部有統計（共 X 項，已完成 Y 項）
- 介面簡潔現代，白色背景、藍色主調
- 響應式設計，手機也能正常使用
- 請建立好完整的專案結構

我測試了一下，有幾個地方想修改：
1. 新增事項後，輸入框的文字沒有自動清空。
2. 希望按 Enter 鍵也能新增事項，不只是點按鈕。
3. 加上日期顯示，每個事項旁邊顯示新增的日期。

這次只改一件事，其他先不要動：
1. 功能修正：新增事項按下 Enter 也要能新增，不是只有點按鈕才有效。
2. 外觀最佳化：把「新增」按鈕換成藍色實心底、白色文字，讓它更醒目。
3. 功能增強：加一個「清除所有已完成事項」的按鈕。
4. 細節打磨：完成的事項移到列表最下面，並加上刪除線效果。

我點擊「新增」按鈕後，畫面上沒有出現新的待辦事項。
但是重新整理頁面後，剛才新增的事項又出現了。
我覺得可能是新增後沒有即時更新畫面。
瀏覽器的Console顯示這個錯誤：

TypeError: Cannot read property 'map' of undefined

請幫我修好。

【C - 背景】我是 ABC 科技公司的人資主管，我們是一間 50 人的軟體新創公司，
氣氛開放友善。下週一有一位新同事 Linda 報到，她是加入產品設計團隊的 UI 設
計師。

【L - 語言風格】請使用溫暖友善但不失專業的語氣，繁體中文。

【E - 範例】開頭可以類似這樣的感覺：「嗨 Linda，歡迎加入 ABC 大家庭！我們好
期待跟妳一起工作。」

【A - 對象】這封信是直接寄給新員工 Linda 的歡迎信。

【R - 要求】請包含以下內容：
1. 歡迎與期待
2. 第一天報到的時間地點（週一早上 9:30，臺北市大安區辦公室 5 樓）
3. 需要帶的文件（身分證、存摺影本、一吋照片兩張）
4. 第一週的安排簡述
5. 聯絡方式（有問題可以找我：分機 123）
信件長度 300 字以內。

【C / 背景】我是 3C 品牌 XYZ 的行銷專員，公司即將在 2026 年 Q4 推出一款新的
藍牙耳機（售價 NT$3,990，主打降噪功能和超長續航 40 小時），目標客群是 20-
35 歲通勤族。

【L / 語言】專業的行銷企劃書風格，繁體中文。

【A / 對象】這份企劃要給行銷總監審核，需要有數據支撐。

【R / 要求】
1. Q4 銷售目標：5,000 組
2. 行銷預算：新臺幣 50 萬元
3. 請規劃線上（社群、KOL）和線下（快閃店）活動
4. 包含時程表、預算分配、KPI 指標
5. 篇幅約 1500-2000 字

我是業務部主管，需要在下週一向公司高層報告 Q3 業績。
請幫我製作一份 10 頁的 PPT 簡報大綱，包含以下內容：
 1. 封面頁
 2. Q3 業績總覽（營收、毛利率，與 Q2 比較）
 3. 各產品線表現分析（附折線圖建議）
 4. 新客戶數和留存率（附柱狀圖建議）
 5–7. 三個重點客戶案例
 8. 競爭對手動態
 9. Q4 展望與目標
 10. 行動方案（含總步驟和負責人）

風格：專業、數據導向，每頁列出 3–5 個要點。
語言：繁體中文。

請幫我撰寫一封 [ 目的 ] 的電子郵件。

背景：[ 簡述事情的來龍去脈 ]
收件人：[ 姓名 / 職稱，與你的關係 ]
語氣：[ 正式 / 半正式 / 友善 ]
需要包含：
1. [ 重點一 ]
2. [ 重點二 ]
3. [ 重點三 ]
長度：[ 字數 ] 字以內
語言：繁體中文

請幫我規劃一份 [ 主題 ] 的簡報大綱。

目的：[ 這場簡報要達成什麼？ ]
對象：[ 聽眾是誰？ ]
時間：[ 預計報告幾分鐘？ ]
頁數：[ 大約幾頁投影片？ ]
必須涵蓋的內容：
1. [ 要點一 ]
2. [ 要點二 ]
3. [ 要點三 ]
每頁請建議：標題、重點內容、適合的圖表類型

我有一份 [ 數據描述 ] 的資料。

數據包含：[ 欄位說明 ]
時間範圍：[ 期間 ]

請幫我分析：
1. 整體趨勢（是成長、持平還是下降？）
2. 關鍵發現（有沒有異常值或轉折點？）
3. 可能的原因分析
4. 具體建議

輸出格式：請用條列式，搭配簡單的數字佐證。

以下是數據：
[ 貼上你的數據 ]

以下是 [ 會議名稱 ] 的逐字稿 / 筆記。

會議資訊：
- 日期：[ 日期 ]
- 參加者：[ 列出人名和職稱 ]
- 會議目的：[ 開這個會要討論什麼 ]

請整理成以下格式：
1. 會議摘要（3-5 句話概述）
2. 討論重點（依主題分類，每個主題列出關鍵結論）
3. 決議事項（條列式，寫清楚「決定了什麼」）
4. 待辦事項（表格：項目 / 負責人 / 截止日）
5. 下次會議安排

語氣：專業簡潔

逐字稿如下：
[ 貼上逐字稿內容 ]

請幫我撰寫一則 [ 平臺 ] 的貼文。

主題：[ 要推廣什麼？分享什麼？ ]
品牌 / 個人調性：[ 專業知性 / 幽默親民 / 溫暖勵志 ]
目標：[ 提高互動 / 導流 / 品牌曝光 ]
字數：[ 字數 ] 字以內
是否需要：
- Hashtag：[ 是 / 否，幾個 ]
- CTA（行動呼籲）：[ 是 / 否，引導做什麼 ]
- 表情符號：[ 多用 / 少用 / 不用 ]

請幫我撰寫 [ 產品名稱 ] 的 [ 文案類型 ] 文案。

產品特色：
1. [ 特色一 ]
2. [ 特色二 ]
3. [ 特色三 ]
目標客群：[ 年齡、職業、痛點 ]
與競品的差異：[ 你的產品好在哪裡 ]
文案目的：[ 吸引點擊 / 促進購買 / 品牌認知 ]
風格：[ 時尚簡約 / 溫暖故事 / 理性訴求 ]
長度：[ 字數 ] 字以內

請幫我寫一個 Google Sheets 的 Apps Script，自動將每週五下午 5 點前收到的訂單
匯總成一份報表，發送到我的 Email（vista@example.com）。

具體需求：
- 輸入：Sheet1 中的訂單資料（A 欄 = 日期、B 欄 = 客戶
  名稱、C 欄 = 金額、D 欄 = 狀態）
- 處理：篩選本週的訂單，計算總金額和訂單數
- 輸出：HTML 格式的 Email，包含訂單摘要表格

請加上中文註解。

我不是程式設計師，但我正在使用 Vibe Coding 工具。
請用非技術人員能理解的白話文，解釋以下程式碼：

1. 這段程式碼的主要功能是什麼？（一句話摘要）
2. 它包含哪幾個主要步驟？（用條列式說明）
3. 其中哪些部分是我可能需要修改的？
　（例如文字、數值、顏色等）

[ 在此貼上程式碼 ]

我想對以下程式碼做一個修改：[ 描述你的需求 ]

請告訴我：
1. 我應該修改哪個檔案的哪一行？
2. 原本的程式碼是什麼？
3. 我應該改成什麼？
4. 這樣修改會影響其他地方嗎？

[ 在此貼上程式碼 ]

我遇到一個問題，請幫我分析：
【我做了什麼】
在 ___________ 頁面，我 ___________（操作動作）

【預期結果】
應該要 ___________________________

【實際結果】
但是 ______________________________

【錯誤訊息】（完整複製貼上）
（把深色框的錯誤訊息貼在這裡）

【相關程式碼】（可選）
（如果知道哪段程式碼出問題，貼在這裡）

我遇到一個問題，請幫我分析：

【我做了什麼】
在待辦清單App中新增一筆項目「買牛奶」

【預期結果】
新增後清單應該立即顯示新的項目

【實際結果】
新增後清單沒有更新，需要手動重新整理才會顯示

【Console警告訊息】
State update detected but component did not re-render

請幫我做一個線上課程的銷售頁。目標受眾是想學AI但沒有程式基礎的上班族。頁面請包含七層結構：Hero、痛點、解決方案、你會得到什麼、社會證明、定價方案、FAQ+CTA。文案請用FAB法則，強調學員能得到的具體好處。設計風格走簡潔專業，主色用深藍。技術上請用RWD響應式設計，並確保基本無障礙標準。

請幫我用HTML + Chart.js做一個咖啡店儀表板：1. 最上方有日期篩選器和門市下拉選單 2. 接著四個KPI卡片：本月營收、來客數、客單價與月成長率 3. 左邊一個折線圖，顯示12個月的營收趨勢 4. 右邊一個長條圖，比較5家門市的業績 5. 下方一個表格，列出每家門市的詳細數據 6. 整體用淺灰白配色，圖表用深灰色系。數據先用假資料，格式如下：{ store: '信義店', revenue: 280000, visitors: 850, avgPrice: 329 } 五家門市：信義店、內湖店、中山店、南港店、松山店

我有過去一年的每日訂單資料在Excel裡，你可以幫我做一個可以預測明天訂單量的工具嗎？預測的時候，可以參考星期幾、天氣預報，還有附近最近是否有活動。