本章目錄

為什麼選 LINE 貼圖工具？

LINE 貼圖 AI 製作工具的首頁畫面

工具的功能流程

這個工具讓你只要幾個步驟，就能用 AI 生成一整套 LINE 貼圖：

GitHub 專案頁面

我們的 LINE 貼圖工具，完整的程式碼都放在 GitHub 上，任何人都可以：

• 查看：瀏覽所有的程式碼檔案
• 下載：把整個專案下載到自己的電腦
• 複製：Fork（分叉）一份到自己的帳號下
• 部署：透過 GitHub Pages 讓它變成網站

GitHub 上的專案頁面，可以看到所有檔案和說明文件

專案檔案結構

打開專案，你會看到這些檔案和資料夾：

line-sticker-ai/
  index.html          ← 網站入口（大門）
  src/
    App.jsx           ← 主畫面（客廳）
    components/
      StickerForm.jsx ← 表單元件（填寫區）
      StickerGrid.jsx ← 貼圖展示（展示區）
    utils/
      gemini.js       ← AI 連線（和 AI 對話的電話）
      imageProcess.js  ← 圖片處理（去背工具）
  package.json        ← 專案設定（說明書）

在 GitHub 上瀏覽專案的檔案結構

技術架構認識

這個專案用到了以下四種主要技術，不需要全懂，知道各自扮演什麼角色就好：

整理專案重點筆記

用你習慣的方式（記事本、Markdown、手寫都行），整理以下三個重點：

## LINE 貼圖 AI 工具 - 專案筆記

### 功能流程
輸入 API Key → 選張數 → 描述角色 → AI 生成 → 自動去背 → 打包下載

### 使用技術
- 前端框架：React（做介面元件）
- AI 服務：Gemini API（生成圖片）
- 圖片處理：Canvas API（去背）
- 部署平台：GitHub Pages（免費網站）

### 重要檔案
- index.html：網站入口
- App.jsx：主畫面
- gemini.js：AI 連線
- imageProcess.js：圖片去背

小成品 15 完成確認

確認你已經完成以下項目：

規劃 8 張卡片的內容架構

我們的卡片網頁由 Hero（首區）+ 8 張卡片 + Footer（頁尾）組成：

用 AI 生成各卡片的文字

把以下 Prompt 丟給 AI（ChatGPT / Gemini / Claude），讓它幫你生成所有卡片內容：

請幫我生成一個介紹「LINE 貼圖 AI 製作工具」的網頁文字內容。
我需要 10 個區塊，每個區塊包含：
1. 區塊標題（10 字以內）
2. 區塊內容（50-100 字的說明文字）

10 個區塊分別是：
- Hero 主標題 + 副標題
- 卡片 1：工具介紹
- 卡片 2：核心功能
- 卡片 3：操作流程
- 卡片 4：技術架構
- 卡片 5：API Key 申請教學
- 卡片 6：使用小技巧
- 卡片 7：常見問題
- 卡片 8：延伸應用
- Footer：版權資訊

風格要求：口語化、易懂、適合初學者閱讀。

AI 生成的卡片文字內容，可以直接複製使用

VS Code 搜尋替換功能

這是 VS Code 最實用的功能之一，可以快速找到並修改模板中的佔位文字：

VS Code 的搜尋替換功能，支援逐一替換或全部替換

修改 Hero Section

首先替換卡片模板中的 Hero 區塊內容：

替換後的 HTML 程式碼看起來像這樣：

<section class="hero">
  <h1>LINE 貼圖 AI 製作完全攻略</h1>
  <p>用 AI 自動生成一整套 LINE 貼圖，免費、快速、超簡單</p>
  <a href="#cards" class="btn">開始探索</a>
</section>

修改 Footer

最後別忘了修改頁面底部的 Footer 區塊：

加入專案連結

<footer>
  <p>LINE 貼圖 AI 製作工具 &copy; 2025</p>
  <p>
    <a href="https://github.com/your-repo" target="_blank">
      GitHub 專案頁面
    </a>
  </p>
</footer>

常用的連結屬性

存檔並預覽

替換完所有內容後，存檔並檢查成果：

替換完成後的卡片網頁預覽畫面

練習時間

在手機上預覽你的卡片網頁效果

小成品 16 完成確認

確認你已經完成以下項目：

本章回顧