📊 課程總覽

🎯 課程目標

• 學會如何用自然語言與 AI 協作開發
• 理解「提示詞工程」的重要性與技巧
• 完成兩個實際可展示的作品
• 建立對程式設計的基本理解與信心

💡 為什麼提示詞這麼重要？

在 AI 時代，提示詞工程就是新的程式語言。

🔑 提示詞工程入門

什麼是提示詞 (Prompt)？

提示詞就是你給 AI 的「工作指令」。

📝 好提示詞的五大要素

1. 明確的目標：你要做什麼？

   做一個網頁版貪食蛇遊戲

2. 具體的細節：它長什麼樣子？有什麼規則？

   用方向鍵控制，吃到食物會變長

3. 格式要求：給我什麼樣的檔案？

   生成一個 HTML 檔案，包含 CSS 和 JS

4. 範例或參考：像什麼一樣？

   像 Apple 官網那樣的簡約風格

5. 約束條件：有什麼限制？

   不要使用外部框架，程式碼要有註解

🚫 提示詞常見錯誤

✨ 範例的力量：圖像生成

一個好的提示詞，可以創造出驚人的細節。

複製

    A hyperrealistic cinematic photograph capturing a fleeting, intimate moment
    on a dimly lit underground platform. The central subject is a stunning young
    Asian man, body positioned at a slight slant angle - not fully in profile
    and not fully frontal - with his face turned slightly, giving subtle intrigue.
    He stands perfectly still, a serene figure amidst the chaos, dressed in an
    elegant long black coat. In stark contrast, a vibrant yellow train rushes past
    in the background, its speed rendered as a brilliant, dynamic streak of motion blur.
    The scene is enveloped in warm, moody atmospheric lighting from the station,
    casting soft golden glows onto the arched tiled ceiling.

**(此處展示由提示詞生成的精緻圖像)**

🎮 實戰一：貪食蛇遊戲開發

目標： 從零到有，打造一個經典的貪食蛇遊戲。

步驟：

1. 需求分析：拆解遊戲規則
2. 撰寫提示詞：將規則變成給 AI 的指令
3. 生成程式碼：讓 Claude 幫我們寫程式
4. 測試與修改：客製化你的遊戲！

✍️ 貪食蛇：提示詞範例

請幫我建立一個網頁版貪食蛇遊戲：

遊戲規格：
- 遊戲區域：20x20 的格子
- 控制方式：鍵盤方向鍵（↑↓←→）
- 蛇的初始長度：3 格
- 移動速度：每 150 毫秒移動一格

遊戲規則：
1. 蛇自動持續移動
2. 吃到食物後身體變長 1 格，分數 +10
3. 撞到牆壁或自己的身體時遊戲結束
4. 食物隨機出現在空格上

視覺設計：
- 蛇的顏色：綠色 (#4CAF50)
- 食物顏色：紅色 (#F44336)
- 背景：淺灰色 (#F5F5F5)
- 格線：淡灰色邊框

介面元素：
- 遊戲標題
- 分數顯示
- 遊戲結束時顯示最終分數和重新開始按鈕

技術要求：
- 使用純 HTML + CSS + JavaScript
- 響應式設計
- 程式碼要有清楚的註解
- 確保在 Chrome/Firefox/Safari 都能執行

🎨 貪食蛇：客製化時間！

你可嘗試...

📝 實戰二：個人部落格開發

目標： 打造一個可以展示自己的個人網站。

步驟：

1. 內容規劃：決定網站需要哪些區塊
2. 設計風格：選擇你喜歡的樣子
3. 撰寫提示詞：告訴 AI 你要的網站樣貌
4. 內容客製化：換上你自己的資訊！

✍️ 部落格：提示詞範例 (簡約專業風)

請幫我建立一個專業的個人部落格網站：

網站架構：
1. 頂部導航列（固定）：首頁、關於我、作品集、聯絡
2. 首頁區塊：
   - 大型橫幅區：顯示姓名「李明華」和標語「全端工程師 | 熱愛創造美好的數位體驗」
   - 個人照片（圓形頭像，尺寸 200x200px）
   - 簡短介紹（3-4 行）
3. 關於我區塊：
   - 詳細自我介紹（200 字）
   - 技能標籤：JavaScript, React, Node.js, UI/UX Design
   - 興趣愛好：閱讀、攝影、登山
4. 作品集區塊：
   - 3 個作品卡片（圖片 + 標題 + 簡介 + 連結）
5. 聯絡區塊：
   - Email、GitHub、LinkedIn 圖示連結

設計風格：
- 配色：主色 #2C3E50（深藍灰）、輔助色 #3498DB（亮藍）、背景 #FFFFFF（白色）
- 字體：標題用粗體，內文用 16px 易讀字體
- 版面：現代簡約風格，留白充足

互動效果：
- 點擊導航連結平滑捲動
- 按鈕和連結有 hover 效果
- 作品卡片 hover 時會稍微放大

技術要求：
- 純 HTML + CSS
- 響應式設計
- 程式碼要有清楚的註解
- 圖片使用 placeholder
- 使用語意化 HTML 標籤

✏️ 部落格：客製化時間！

動手把網站變成你自己的！

✅ 實戰三：待辦事項 App 開發

目標： 打造一個實用的待辦事項管理工具。

步驟：

1. 功能規劃：新增、刪除、完成標記
2. 介面設計：清單顯示、輸入框、按鈕
3. 撰寫提示詞：告訴 AI 完整的功能需求
4. 擴充功能：加入你想要的客製化功能！

💡 靈感參考：

就像遊戲的任務系統！

📝 我的待辦清單

✓ 學習 AI 協作開發

○ 完成待辦事項 App

○ 部署到網路上

✍️ 待辦事項：提示詞範例

請幫我建立一個待辦事項管理 App：

核心功能：
1. 新增待辦事項
   - 輸入框 + 「新增」按鈕
   - 按 Enter 鍵也能新增
2. 顯示待辦清單
   - 每個項目顯示文字內容
   - 每個項目有「完成」和「刪除」按鈕
3. 完成待辦事項
   - 點擊「完成」按鈕，文字加上刪除線
   - 項目變成灰色
4. 刪除待辦事項
   - 點擊「刪除」按鈕，項目從清單移除
5. 顯示統計資訊
   - 顯示總任務數量
   - 顯示已完成數量
   - 顯示未完成數量

視覺設計：
- 主色調：藍色 (#2196F3)
- 背景：淺灰色 (#F5F5F5)
- 卡片：白色背景，圓角，陰影效果
- 完成的項目：灰色 + 刪除線
- 按鈕：完成按鈕（綠色）、刪除按鈕（紅色）

介面佈局：
- 標題：「📝 我的待辦清單」
- 輸入區域在上方（輸入框 + 新增按鈕）
- 統計資訊（總數/已完成/未完成）
- 待辦清單區域（可捲動）

技術要求：
- 使用純 HTML + CSS + JavaScript
- 響應式設計（手機、平板、電腦都適用）
- 使用 LocalStorage 儲存資料（重新整理後資料不會消失）
- 程式碼要有清楚的註解
- 加入適當的過渡動畫效果

🎨 待辦事項：客製化時間！

把它變成你專屬的待辦工具！

🚀 接下來可以做什麼？

優化現有作品：

• 貪食蛇：加入最高分紀錄、穿牆模式、難度選擇
• 部落格：加入更多動畫、聯絡表單、深色模式
• 待辦事項：加入優先級、分類標籤、資料匯出功能

嘗試新專案：

• 翻牌配對遊戲
• 天氣查詢網站
• 番茄鐘計時器
• 個人記帳 App

部署你的作品：

使用 GitHub Pages 等免費服務，讓全世界看到你的作品！