前言：解決美業架站痛點

[插入簡報第 2 頁]

大家好，歡迎來到伊美AI學院的線上直播課程。許多美業夥伴在架設網站時常面臨痛點，例如：網站報價過高、平台操作複雜難以上手，或是擔心被平台綁架及年費壓力大等問題。

今天的課程旨在解決這些痛點，教您如何利用 AI 工具，在短短 60 分鐘內，以低成本甚至零成本的方式，打造出專業且具美感的專屬美業網站。

[插入簡報第 3 頁]

本次課程核心：一源三用 AI 建站方案

[插入簡報第 4 頁]

我們將解析三種主流的 AI 建站方式，比較其優缺點，幫助您根據自身需求與技能水平，找到最適合的建站路線：

建站心法與通用提示詞框架

[插入簡報第 5 頁]

在開始建站前，有幾個核心心法需要掌握：

1. 鎖定目標：明確網站的目的與功能。您需要思考這個網站希望達成什麼效果？是品牌展示、作品集呈現、線上預約，還是客戶溝通？
2. 準備素材：預先準備好品牌 Logo、代表性圖片、服務項目文字說明、品牌故事等素材。
3. 統一形象：確保網站的視覺風格（顏色、字體、排版）與品牌形象一致。

為了有效引導 AI 生成符合需求的網站，我們需要一個「通用提示詞框架」，其基本架構包含以下要素：

• 品牌名稱
• 品牌標語
• 關於我們 (約 150 字)
• 核心服務項目
• 聯絡方式 (電話、LINE、IG、地址等)
• 行動呼籲 (Call to Action, CTA)，例如「立即預約」、「了解更多」

方案一：設計師路線 Canva 實戰

[插入簡報第 6 頁]

Canva 適合追求完美視覺呈現、重視品牌形象的設計師性格使用者。

Canva 建站步驟

[插入簡報第 7 頁]

1. 選擇模板：在 Canva 網站功能中，瀏覽並選擇符合您品牌風格的「網站」範本。
2. 貼上內容：將先前準備好的「通用提示詞框架」內容，手動貼入模板的相應欄位。
3. 客製化設計：更換模板中的範例圖片為您自己的品牌照片或作品集，調整配色方案與字體，確保整體視覺風格一致。
4. 發布網站：設計完成後，點擊發布網站，即可取得一個 `my.canva.site` 結尾的免費網址。

Canva AI 輔助建站

除了手動編輯模板，Canva 現在也提供了「Canva AI」功能。您可以：

1. 輸入提示詞：在 Canva AI 介面中，貼上詳細的網站需求提示詞（建議使用英文以獲得較佳結果）。
2. 選擇風格：可選擇 AI 建議的風格與色系。
3. 生成網站：點擊「產生」，AI 會基於您的提示詞自動生成網站初步設計。
4. 編輯與發布：生成後，您仍可進入編輯模式，進行細部調整（如翻譯文字、更換圖片），最後同樣可以發布網站並取得網址。

Canva 提示詞範本

請幫我創建一個【行業類型:美業工作室】的多頁網站,具備以下功能:

品牌資訊:
● 品牌名稱:【品牌名稱:例如薇薇美甲工作坊】
● 主要服務:【主要服務:例如美甲設計】
● 聯絡方式:【聯絡資訊:例如電話、LINE、Instagram、Email】

網站架構:
● 頁面包含:【頁面列表:例如首頁、作品展示、服務項目、關於我們、聯絡方式】
● 導航方式:【導航類型:頂部導航列/側邊選單/底部選單】

設計風格:
● 主色調:【主色系:例如粉色系/藍色系/綠色系/橘色系/紫色系】
● 設計風格:【風格:例如現代簡約/溫馨可愛/專業商務/文青復古/時尚前衛】

網站內容:
首頁:
● 主標題:【主標題:例如專屬你的高質感美甲體驗】
● 副標題:【副標題:例如用心雕琢每一個細節】
● 主要按鈕:【按鈕文字:例如查看作品、立即預約、了解更多】

其他頁面內容:
● 【頁面2名稱】:【內容描述:例如展示6-9個作品案例】
● 【頁面3名稱】:【內容描述:例如3-5個服務項目和價格】
● 【頁面4名稱】:【內容描述:例如品牌故事和特色】
● 【頁面5名稱】:【內容描述:例如聯絡資訊和預約方式】

特色功能需求:
● 特色區塊1:【功能描述:例如為什麼選擇我們/客戶見證/最新消息】
● 特色區塊2:【功能描述:例如服務流程/常見問題/優惠活動】
● 特色區塊3:【功能描述:例如作品分類/預約系統/社群連結】

重要技術需求:
☑ 這是一個正常的網站,不是編輯器工具
☑ 所有文字都可以直接點擊編輯(contenteditable)
☑ 圖片可以點擊替換
☑ 有頁面切換功能(導航選單)
☑ 響應式設計(手機和桌面都完美顯示)
☑ 使用【語言:繁體中文/簡體中文/英文】
☑ 所有按鈕都要真的可以點擊(有實際功能)
☑ 自動儲存編輯內容到瀏覽器
☑ 美觀專業的視覺設計

特別注意事項:
● 這是給一般用戶使用的網站,不是給開發者用的編輯器
● 用戶可以直接編輯內容,但介面要簡潔美觀,不要有複雜的工具列或編輯按鈕
● 重點是網站本身的功能和美觀
● 請使用【主色調】作為主要配色
● 整體風格要符合【設計風格】的特色

請創建一個完整的HTML文件,讓我可以直接當作【行業類型】網站使用。

優缺點

優點：視覺自由度高，可控性強，使用者介面熟悉。

缺點：相較於 Gamma 需要花費較多時間進行手動調整與設計。

方案二：效率至上路線 Gamma 實戰

[插入簡報第 8 頁]

Gamma 適合追求效率、時間寶貴、需要快速生成網站的經營者。

Gamma 建站步驟

[插入簡報第 9 頁]

1. 選擇生成方式：進入 Gamma APP，點擊「使用 AI 建立」，選擇「生成」。
2. 貼上提示詞：將先前準備好的「通用提示詞框架」內容，貼入 Gamma 的輸入框。您也可以直接下達一句簡單指令，例如「幫我做一個美甲工作室的網站」。
3. 產生大綱：Gamma AI 會先產生網站的內容大綱，您可以檢視並稍作調整。
4. 選擇版型與生成：確認大綱後，選擇喜歡的視覺風格模板（主題），點擊「產生」或「繼續」。Gamma AI 會在幾秒鐘內自動生成包含文字與 AI 圖片的完整網站。
5. 編輯與發布：生成後，您可以點擊網站上的各個區塊進行文字編輯或圖片更換（可上傳圖片或使用 AI 生成圖片）。完成後，點擊「分享」->「公開發布」，即可取得網站網址。

Gamma 提示詞範本

請幫我在 Gamma APP 中製作一個「單頁式美業工作室網站」的可編輯模板,品牌名稱為【品牌名稱(例如:薇薇美甲工作坊)】,風格簡潔專業並具美感,色系以【粉膚色+白色+金色點綴】為主,整體氛圍溫柔優雅又具高級感。

重要生成條件:
- 必須輸出為可編輯格式(每張圖片、每段文字、顏色皆可替換)
- 圖片使用圖片佔位符(placeholder)並在圖片下方註明「更換為你的作品照片」
- 各段落文字請保留可編輯示範內容,並以【】標示需要自行輸入的內容,並附上建議內容
- 保留明確的內容區塊結構,方便後續調整

網站內容結構:
首屏(Hero Banner)
○ 品牌名稱(可編輯文字):【品牌名稱(例如:薇薇美甲工作坊)】
○ 標語(可編輯文字):【品牌標語(例如:讓美麗在指尖閃耀)】
○ 推薦字體:標題用優雅襯線體(Playfair Display或同類型),內文用無襯線體(Open Sans 或同類型)

作品展示區
○ 三個分類標題(可編輯文字): 【分類一(例如:手部凝膠)】、【分類二(例如:足部造型)】、【分類三(例如:特殊設計)】
○ 每個分類包含2張圖片+描述文字(可編輯):【作品描述文字(例如:經典裸色系設計)】

服務項目與價目
○ 卡片式排版
○ 每張卡片包含:服務名稱(【服務名稱(例如:手部凝膠基礎保養)】)、簡短說明(【服務說明(例如:修型+單色凝膠)】)、價格(【服務價格(例如:$1,200)】)

關於我/關於工作室
○ 一段可編輯文字:【品牌故事與特色介紹(例如:我們致力於用細節讓顧客展現優雅自信)】

聯絡方式
○ 可編輯的社群圖示(LINE、Instagram、電話、地址、Email)
○ LINE 連結帳號(可編輯):【LINE連結(例如:https://line.me/XXXX)】
○ Instagram 連結帳號(可編輯): 【Instagram 連結(例如:https://instagram.com/XXXX)
○ 電話(可編輯):【電話(例如:02-XXXX-XXXX)】
○ 地址(可編輯文字): 【地址(例如:台北市中正區XX路XX號)】
○ Email(可編輯): 【Email(例如:nailstudio@example.com)】

設計要求:
- 採用現代極簡與輕奢混搭風格
- 圖片與顏色應易於更換
- 保留充足留白與整齊排版
- 適合手機與桌機瀏覽
- 生成完成後,請保持所有區塊為可編輯狀態

優缺點

優點：速度極快，操作簡單，AI 生成內容與圖片。

缺點：版型選擇相對較少，客製化自由度較 Canva 低。

方案三：終極自由路線 AI 程式碼 + GAS 實戰

[插入簡報第 10 頁]

此方案適合追求零成本、高度自由、且願意接觸基本程式概念的技術愛好者。GAS (Google Apps Script) 是 Google 提供的一項服務，可以讓您免費部署網頁應用程式。

Part 1 - 生成程式碼

[插入簡報第 11 頁]

1. 打造工程師級 Prompt：準備一份詳細描述您網站功能、設計風格、頁面結構、內容區塊的提示詞。越詳細，AI 生成的程式碼越符合需求。
2. 指揮 AI 生成程式碼：將提示詞提供給擅長寫程式的 AI (如 ChatGPT-4 或 Gemini)，請它生成完整的網站程式碼，包含 HTML、CSS 和 JavaScript 檔案。

Part 2 - 部署網站

[插入簡報第 12 頁]

1. 建立 GAS 專案：登入您的 Google 帳戶，前往 Google Drive，點擊「新增」->「更多」->「Google Apps Script」。
2. 貼上程式碼：
   • 將以下後端邏輯程式碼貼到預設的「Code.gs」檔案中（取代原有內容）：
     複製

     Code.gs 範例程式碼

     function doGet() {
       return HtmlService.createHtmlOutputFromFile('index')
         .setTitle('我的美業網站')
         .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
     }

   • 新增一個 HTML 檔案（點擊左側「檔案」旁的「+」，選擇「HTML」），將檔案命名為 index（注意：只寫 index，不要加 .html）。
   • 將 AI 生成的完整 HTML 程式碼（包含 CSS 和 JavaScript）全部貼到 index.html 檔案中。確保程式碼包含完整的 <!DOCTYPE html>、<html>、<head>、<style>、<body> 和 <script> 標籤。
3. 儲存專案：點擊儲存圖示。
4. 部署應用程式：點擊右上角的「部署」->「新增部署作業」。
5. 設定部署類型與權限：
   • 點擊齒輪圖示，選取類型為「網頁應用程式」。
   • 執行身份選擇「我自己的帳戶」。
   • 存取權選擇「任何人」。
   • 點擊「部署」。
6. 授權存取：首次部署需要授權，點擊「授權存取」，選擇您的 Google 帳戶，點擊「進階」，然後點擊「前往... (不安全)」並允許。
7. 取得網址：部署成功後，會顯示「網頁應用程式網址」，複製此網址即可分享給他人瀏覽您的網站。

優缺點

優點：完全免費，自由度極高，可實現複雜功能。

缺點：需要基本程式概念，除錯與維護較困難，GAS 產生的網址較長且不易記憶（可透過短網址工具解決）。

總結比較：你該選哪條路？

[插入簡報第 13 頁]

重點回顧與行動呼籲

[插入簡報第 14 頁]

今天我們學習了三種運用 AI 建置美業網站的方法：Canva、Gamma 與 AI 程式碼 + GAS。記住，工具只是輔助，優質的網站內容和清晰的品牌定位才是關鍵。

Q&A 與 下一講預告

[插入簡報第 15 頁]

（此處為影片中的問答環節，文字稿未包含詳細問答內容）

預告下一講：伊美 AI 學院第 6 講

[插入簡報第 16 頁]

[插入簡報第 17 頁]

課程學習資源

• Canva
• Gamma (推薦連結: 註冊連結)
• ChatGPT
• Google Apps Script (GAS): 可從 Google Drive 新增項目中找到
• 短網址工具 (範例)

課程簡報下載

完整的課程簡報與提示詞教材已上線，歡迎下載複習！