學習目標

• 學會「手繪稿」的設計方法
• 規劃簡報的版面配置
• 為每個元素標註 class 名稱

為什麼要用手畫？

• 先想清楚結構，再動手做
• 這是業界標準流程（Wireframe）
• 給 AI 看的「設計稿」

一般簡報頁面的區塊

┌────────────────────────┐
│                        │
│      【標題區】         │
│      【副標題區】       │
│                        │
├────────────────────────┤
│                        │
│      【內容區】         │
│   (文字、圖片、列表)    │
│                        │
├────────────────────────┤
│ 【頁碼】      【日期】  │
└────────────────────────┘

在草圖上標註說明

• 標題區：「大標題，置中，粗體」
• 副標題區：「比標題小」
• 內容區：「條列式重點，3-5 項」
• 頁尾區：「左邊頁碼，右邊日期」

範例格式

我的簡報頁面設計

===== 封面頁 =====
- 整頁置中對齊
- 大標題：頁面中央，字體很大，粗體
- 副標題：在大標題下方，字體較小
- 講者資訊：頁面下方，小字

===== 一般內容頁 =====
- 標題區：頁面上方，左對齊
- 內容區：條列式，3-5 個項目
- 頁尾：左邊頁碼，右邊日期

為什麼要寫成文字？

• 等一下要請 AI 幫忙把設計變成 HTML
• 文字描述是給 AI 看的「規格書」
• 描述越清楚，AI 生成的結果越好

學習目標

• 學會寫「讓 AI 寫程式碼」的 Prompt
• 把手繪稿描述給 AI
• 學會基本除錯流程
• 掌握追問/修改技巧

AI Prompt 的三要素

1. 角色：告訴 AI 它要扮演什麼
2. 任務：清楚說明要做什麼
3. 規格：具體的技術要求

驗證步驟

1複製 AI 給的 HTML 程式碼

2在 VS Code 按 Ctrl+N 新建檔案

3按 Ctrl+V 貼上程式碼

4按 Ctrl+S 儲存為 my-slides.html

5用瀏覽器打開，檢查結果

當樣式不滿意時...

追問技巧要點

• 具體描述：不要說「大一點」，要說「加大 1.5 倍」
• 提供色碼：給具體的顏色代碼更精確
• 一次多項：可以同時列出多個修改項目
• 說明原因：「因為在深色背景下看不清楚」

增加頁面

修改結構

學習目標

• 理解「模板」的概念
• 用標記標示可替換的內容
• 建立自己的簡報模板庫

模板化原則

• 用 【在此輸入】 標記可替換內容
• CSS 樣式、HTML 結構保留
• 存成 template.html

原本的簡報

<section>
  <h1>AI 工具入門</h1>
  <p>讓你的工作更有效率</p>
</section>

<section>
  <h2>為什麼要學 AI？</h2>
  <ul>
    <li>節省時間</li>
    <li>提升品質</li>
  </ul>
</section>

模板化後

<!-- ====== 封面頁模板 ====== -->
<section>
  <h1>【簡報標題】</h1>
  <p>【副標題】</p>
</section>

<!-- ====== 內容頁模板 ====== -->
<section>
  <h2>【章節標題】</h2>
  <ul>
    <li>【重點 1】</li>
    <li>【重點 2】</li>
  </ul>
</section>

步驟說明

1用 VS Code 打開你的簡報檔案

2按 Ctrl+F 搜尋 section

3把每頁的「範例文字」換成【預設文字】

4在每個 section 前加上註解說明

5按 Ctrl+Shift+S 另存為 template.html

註解格式

<!-- ====== 封面頁 ====== -->
<!-- ====== 內容頁 ====== -->
<!-- ====== 圖片頁 ====== -->
<!-- ====== 結尾頁 ====== -->