內容行銷數位設計｜課程講義

Unit 05．No-Code 網頁設計實務

不寫一行程式，
用對話做出有用途的互動網站

你負責「設計判斷」，AI 負責「把程式寫出來」。

網站的目的可以是展示作品，也可以幫人評估養狗準備、探索未來墓葬、篩選作品，或查詢香灰應用與寺廟介紹。這堂課以四個專題建立「需求 → 功能規則 → 互動原型 → 視覺設計 → 測試發布」流程，比較 Claude、Gemini Canvas、AI Studio 與 Lovable。先在下方操作四種原型，再跟著工具步驟製作自己的版本；原有菇策展案例保留作為展示型網站的練習。

0實作關卡，從空白到上線

0行需要自己手寫的程式碼

0個可以放進作品集的公開網址

內容整理於 2026 年 10 月．各工具的免費額度與介面會更新，以官方公告為準｜中國科大視傳系｜內容行銷數位設計

菇

本頁示範案例：《菇》線上策展網頁 毒蘑菇教育專題｜語氣：理性、警示、帶點黑色幽默。網頁要放主視覺、展覽介紹、作品圖鑑、毒菇迷思小測驗、展覽資訊與團隊介紹。

01選工具 02網站規劃 03素材準備 04寫提示詞 05Claude 生成 06對話修改 07放入圖片 08設計稿轉網頁 09RWD 檢查 10發布上線

上課前請先準備：
① 用學校或個人 Google 帳號註冊 claude.ai（免費方案即可）
② 一個 GitHub 或 Netlify 帳號（發布用）
③ 畢製主視覺、Logo、作品圖（去背 PNG／JPG）

點任一關卡可直接跳到該段說明

這堂課怎麼上 每一關左邊是「這關在做什麼、為什麼」，右邊是「動手操作區」。操作區裡的提示詞產生器、架構產生器都可以直接在頁面上點選，產生的文字按「複製」就能貼到 Claude。建議開兩個視窗：左邊本講義、右邊 Claude。

為什麼是 Claude？ Claude 的 Artifacts（成品視窗） 會在對話右側即時預覽生成的網頁，邊聊邊看結果；免費方案就能使用，也能直接下載 HTML 檔或產生分享連結。它對「設計語彙」（留白、層級、字重、對比）理解力好，很適合視傳系學生用設計師的語言下指令。

選擇學習方式▶ 播放課程簡報 ↗閱讀完整講義 ↓24頁簡報 · 方向鍵切換 · 全螢幕播放

CASE LAB · 功能網站實驗室

網站可以展示作品，也可以幫使用者完成一件事

先寫「誰 → 遇到什麼問題 → 輸入什麼 → 得到什麼結果」。下面四個案例各代表一種網站目的：評估、體驗、展示、查詢。每個案例都能直接試玩、看成品長相、複製提示詞，再用驗收清單檢查。示範在你的瀏覽器內運作，不會提交答案；資料皆為教學示例。

1選網站目的
2試玩＋成品長相
3用 AI 做出來
4驗收

1先選一種網站目的

2需求卡、試玩原型與成品長相

使用者
遇到的問題
使用者輸入
網站給的結果

功能規則（寫給 AI 的判斷邏輯）

動手試玩 · 功能原型

這是功能邏輯示範；正式網站再套用你們自己的圖片、字體與品牌色。

做完會長這樣｜成品網站示意（數字對應下方說明）

3選一個 AI 工具，照步驟做出來

Claude 為主線，ChatGPT 免費版也能完整做一遍

提示詞：

第二輪：如何要求 AI 修改，而不是每次整頁重做？

4驗收的是「功能真的有用」

0 / 3 通過

補補充：功能層級與工具比較

瀏覽器內的互動不需 API

問卷計分、情境組合、作品篩選、寺廟搜尋、外部地圖連結。單一 HTML 就能完成。

本機儲存仍免費

記住收藏與草稿。localStorage 只在同一瀏覽器，老師收不到，也不是跨裝置資料庫。

多人與後台需後端

收集全班結果、管理員更新、登入會員，需要後端、權限與資料庫，費用另計。

免費 AI 建站差異與取捨（2026/10/09 查核）

工具	優點／適合	缺點／免費限制	成果交付
Claude Artifacts	適合把規則變成可操作原型；可要求單一 HTML，便於同學保存與交件。	免費方案可用 Artifacts，但生成受帳號用量限制；生成成功不等於功能測試通過。	Artifact 分享或下載；要獨立網址可將靜態檔發布。規則評估不需接 AI API。
ChatGPT 免費版	熟悉度高，能產生完整靜態網頁、規則評估與搜尋功能，適合從零學建站。	生成與工具有用量限制，預覽入口不保證；長檔需確認完整。內建 Sites 託管不是免費版路線。	取得 HTML → 純文字存檔 → 瀏覽器測試 → 外部免費靜態託管。
Gemini Canvas	對話修改與即時預覽，適合比稿與快速測驗。	共享連結在 Gemini 開啟；帳號、年齡與管理員設定會影響分享。	Canvas 分享給同學測試；需要獨立站點時要求可匯出的 HTML。
AI Studio Build	適合多畫面與較複雜應用，支援前後端與 GitHub／ZIP。	預設可能建立 React＋伺服器專案；ZIP 不是可直接點開的 HTML。API 用量與 Cloud Run 部署可能收費。	先分享原型；依專案類型建置部署。只有純靜態輸出適用 GitHub Pages。
Lovable	多頁網站與平台發布流程整合；日後擴充管理功能較方便。	建置、雲端與 App 的 AI 用量要分開看。免費額度有限，自訂網域與進階方案依定價頁。	預覽 → 發布 → 測試實際網址；先用固定示例資料，確認功能後才接資料庫。

官方參考：Claude Artifacts · Gemini Canvas · AI Studio Build · Lovable 用量說明。免費限制可能更新，介面顯示為準。

STAGE 01

先認識工具：哪些免費 AI 可以「生出網站」？

No-Code 建站有兩種路線：①對話生成 HTML（Claude、Gemini、ChatGPT，可要求產出網頁檔，適合展示與不需後端的評估、搜尋、互動）；②AI 建站平台（Lovable、Google AI Studio，產出完整專案並幫你架站，適合需要多頁或互動功能）。最後都需要一個免費託管服務把檔案變成公開網址。

本課主線：Claude託管：GitHub Pages／Netlify

選工具的原則本課以 Claude 為主；先用單一 HTML 做完整操作流程，展示網站與規則型工具都能完成。若專題需要登入、資料庫、會員等功能，才考慮 Lovable 這類平台。

互動篩選．依用途看工具

Claudeclaude.ai・Artifacts

對話生成網頁，右側即時預覽，可下載 HTML、發布分享連結。設計語彙理解佳。

本課主線免費可用單頁網站

Gemini Canvasgemini.google.com

在 Gemini 開啟 Canvas 工具，生成網頁並預覽，可分享連結，與 Google 帳號整合。

免費可用單頁網站

ChatGPTchatgpt.com・程式碼區塊預覽

免費版可以生成完整 HTML 網站與互動功能；預覽入口依介面，沒有也可存檔用瀏覽器開啟。

免費有限額單頁網站

Lovablelovable.dev

輸入描述即產生完整網站專案，一鍵發布到 lovable.app 子網域。免費方案每日有額度。

免費有限額多頁・互動

Google AI Studioaistudio.google.com・Build

Build 模式用描述生成網頁應用並即時預覽，可下載專案原始檔。

免費可用互動應用

GitHub Pagespages.github.com

上傳 HTML 與圖片即可得到 帳號.github.io/專案 網址，長期穩定，最推薦。

免費需註冊

Netlify Dropapp.netlify.com/drop

把整個網站資料夾「拖曳」進網頁，幾秒就上線。登入後可改網址名稱。

免費最快速

Claude 發布連結Artifact → Publish

直接把 Artifact 發布成公開連結，最快但不能放自己的圖片檔，適合給老師看初稿。

免費適合初稿

STAGE 03

素材準備：資料夾先整理好，後面不會亂

網頁其實就是「一個 HTML 檔＋一個圖片資料夾」。先在電腦建立專案資料夾、用英文小寫檔名整理好圖片，之後 AI 寫出來的路徑才對得上，上傳時也只要整包拖過去。

產出：網站資料夾＋文案檔

檔名三原則① 全部英文小寫 ② 用「-」連接、不要空格 ③ 不要用中文。例：hero-main.webp、work-01.jpg。中文檔名或空格是「本機看得到、上線就破圖」的頭號原因。

建議資料夾結構

mushroom-site/          ← 專案資料夾（英文）
├── index.html          ← 首頁一定要叫 index.html
├── images/
│   ├── logo.png         ← 去背 PNG 或 SVG
│   ├── hero-main.webp   ← 主視覺 1920px 寬
│   ├── work-01.webp ~ work-08.webp
│   ├── process-01.webp
│   ├── team-01.jpg ~ team-04.jpg
│   └── og-cover.jpg     ← 分享到社群的預覽圖 1200×630
└── copy.txt            ← 所有文案先整理在這裡

圖片規格速查

用途	建議尺寸	格式	檔案大小
主視覺 Hero	寬 1920px	WebP / JPG	< 400 KB
作品圖	寬 1200px	WebP / JPG	< 250 KB
Logo	高 200px 以上	SVG / 去背 PNG	< 50 KB
團隊頭像	600×600 正方形	JPG	< 100 KB
社群分享圖	1200×630	JPG	< 300 KB

壓縮工具：Squoosh（Google 免費線上壓縮、可轉 WebP）、TinyPNG。圖太大是網頁載入慢的主因。

文案檔 copy.txt 要準備的內容

✓ 從企劃書直接搬過來專題名稱、一句標語（20 字內）、策展理念（150 字）、每件作品名稱＋說明（50 字）、展覽日期地點、組員姓名分工、IG／作品集連結

✗ 讓 AI 自己編沒提供文案時，AI 會寫出「Lorem ipsum」或泛泛的罐頭句，還可能編出錯誤的展覽日期。真實資訊一定要自己給。

STAGE 04

寫提示詞：把「設計規範」講給 AI 聽

第一次的提示詞決定了 80% 的成果。好的建站提示詞包含五件事：①專案背景（是什麼、給誰看）②視覺風格（色彩、字體、氛圍）③頁面區塊（第 02 關的清單）④互動效果 ⑤技術限制（單一 HTML、RWD、圖片路徑）。

產出：完整建站提示詞

用設計師的語言下指令與其說「做漂亮一點」，不如說「大量留白、標題用粗黑體 72px、內文 16px 行高 1.8、主色只用在按鈕和重點字」。你在視傳系學的版面語彙，就是最好的提示詞。

提示詞產生器．填好之後按「複製」貼到 Claude

專題名稱

主色色碼

一句話介紹給誰看、想傳達什麼

視覺風格可複選

字體

互動效果可複選

文案語氣

生成的提示詞

區塊會依第 02 關勾選自動更新

STAGE 05

用 Claude 生成第一版網頁

把提示詞貼進 Claude，大約 1–2 分鐘後，對話右側會出現 Artifact（成品視窗），直接顯示做好的網頁。你可以在「預覽」與「程式碼」之間切換，也能全螢幕檢視。

工具：claude.ai約 10 分鐘

一個專題＝一個對話串建議在 Claude 左側建立「專案（Projects）」或固定使用同一個對話串，後面所有修改都接著問。開新對話 AI 會忘記前面的設定，風格就會跑掉。

逐步操作

登入 claude.ai
用 Google 帳號或 Email 登入。免費方案即可完成本課所有操作（每段時間有訊息數上限，額度用完需等待重置）。
開新對話，先附上參考資料（選做）
點輸入框左下角的 ＋ 可上傳主視覺、Moodboard 截圖或企劃書 PDF，讓 Claude 參考你的色彩與氛圍。注意：上傳的圖片只是「參考」，不會直接被放進網頁（第 07 關處理）。
貼上第 04 關的提示詞並送出
貼上後按 Enter。Claude 會先簡短說明它的規劃，接著右側開始逐行寫出程式碼。
在 Artifact 視窗檢視成果
右側視窗上方可切換 Preview（預覽）／Code（程式碼）；右上角有 複製、下載、發布（Publish） 等按鈕。點擊預覽中的按鈕、捲動頁面，確認互動有沒有作用。
先截圖存檔第一版
把第一版截圖存起來，期末報告可以放「第一版 vs. 最終版」的對照，展示你的設計判斷如何引導 AI。

claude.ai/chat/《菇》線上策展網頁

我們要為畢業專題《菇》製作線上策展網頁……（貼上提示詞）

好的！我會做一個深色背景、高對比幾何風格的單頁網站，包含主視覺、策展理念、作品圖鑑、迷思小測驗……

《菇》策展網頁．index.html

回覆 Claude…

PreviewCode Publish

GRADUATION PROJECT 2026不認識的菇，
別吃。開始測驗 →

示意圖：左側是對話，右側 Artifact 即時顯示網頁（實際介面可能隨版本更新略有不同）

STAGE 06

對話式修改：像跟工程師溝通一樣「下修改單」

第一版不會完美，這很正常。接下來用對話一次改一件事：指明位置 → 描述問題 → 給出具體目標。每次修改後 Claude 會產生新版本，Artifact 左下角可以切換回上一版。

技巧：一次只改 1–2 件事

改壞了怎麼辦？可以在 Artifact 切回之前的版本，或直接說「回到上一版，只保留導覽列的修改」。也可以在你自己的訊息上按「編輯」重新改寫指令。

好壞對照

✗ 模糊「感覺怪怪的，改好看一點」
「字太小」
「加點動畫」

✓ 具體「主視覺標題放大到桌機 80px、手機 40px，字重 900，行距 1.1」
「作品區卡片 hover 時往上浮 6px 並加陰影」

常用修改指令．點「複製」直接使用

版面層級主視覺標題放大到桌機 80px、手機 40px；副標與按鈕之間留 32px，整體往畫面垂直置中。

配色把主色改成 #B8F27C 螢光綠，只用在按鈕、重點字與 hover 狀態；其餘維持黑白灰，不要出現其他彩色。

字體中文改用 Google Fonts 的 Noto Serif TC，英文標題用 Playfair Display，內文行高 1.8、字距 0.02em。

作品區作品區改成桌機 3 欄、平板 2 欄、手機 1 欄的格狀排列，點擊卡片開啟燈箱放大圖片並顯示作品名稱與說明，按 Esc 或背景可關閉。

測驗功能迷思小測驗做成一次一題、共 4 題，選完立即顯示「正確／錯誤」與 30 字解說，最後顯示得分與一句帶黑色幽默的評語，並有「再玩一次」按鈕。

動態每個區塊捲動進入畫面時由下往上淡入（0.6 秒），並尊重使用者「減少動態效果」的系統設定。

手機版手機寬度（小於 768px）時，導覽列改成右上角漢堡選單，點擊展開全螢幕選單；所有按鈕高度至少 44px。

修 Bug點擊導覽列「展覽資訊」沒有捲動到對應區塊，請檢查錨點 id 並修正；修完後列出你改了哪幾行。

Claude 對話示範

作品區現在 8 張圖排成一長條，看起來像清單不像展覽。請改成「不規則瀑布流」的編排，大小錯落，像展牆一樣；第 1、5 張佔兩欄寬。滑鼠移上去時圖片微微放大，下方浮出作品名稱。

已將作品區改為 CSS Grid 瀑布流：桌機 4 欄，第 1、5 張橫跨 2 欄；hover 時圖片放大 1.04 倍並由下方滑入名稱標籤。手機版會自動變成 2 欄，大圖改為滿版。要不要我再幫每張作品加上編號（No.01–08），呼應圖鑑的感覺？

用「展牆」「圖鑑」這類展覽語彙描述，AI 更容易抓到你要的編排感覺

STAGE 07

放入真實圖片：下載 HTML，和圖片資料夾放在一起

Claude 的預覽視窗只能看到「佔位圖」，因為你的圖片還在自己的電腦裡。做法是：請 Claude 把圖片路徑寫成 images/檔名，再把 HTML 下載到第 03 關的資料夾，用瀏覽器打開，真實圖片就會出現。

關鍵：路徑要一致

為什麼不直接上傳圖片給 Claude 放進去？上傳到對話的圖片 Claude 看得到、拿來參考，但網頁程式無法讀取它；把圖片轉成文字碼塞進 HTML 又會讓檔案巨大、容易出錯。分開放是最穩定的做法。

逐步操作

請 Claude 對齊你的檔名

請把網頁中所有圖片改成以下路徑（大小寫要完全一致）：
主視覺：images/hero-main.webp
Logo：images/logo.png
作品：images/work-01.webp ～ images/work-08.webp
團隊：images/team-01.jpg ～ images/team-04.jpg
每張 <img> 都要加上有意義的中文 alt 說明，並加 loading="lazy"（主視覺除外）。
圖片載入失敗時，顯示深灰底色加檔名，方便我檢查是哪張圖沒放好。

下載 HTML 檔
在 Artifact 右上角點 下載（Download），存到 mushroom-site/ 資料夾，並把檔名改成 index.html（若下載下來不是 .html，可切到 Code 分頁按「複製」，貼到文字編輯器另存為 index.html）。
用瀏覽器打開 index.html
直接雙擊檔案或拖進 Chrome。圖片若出現，代表路徑正確；若破圖，請看下一步。
破圖檢查
在 Chrome 按 F12（Mac：⌘⌥I）開啟開發者工具 → Console 分頁，紅字會寫出找不到的檔案名稱。九成是檔名大小寫、副檔名（.jpg vs .jpeg）或放錯資料夾。
之後還要修改？
回到 Claude 同一個對話繼續改 → 再下載一次覆蓋 index.html 即可。圖片資料夾不用動。

常見錯誤：把 index.html 單獨寄給組員或上傳，卻沒附 images 資料夾──對方打開一定破圖。網站永遠是「整個資料夾」一起移動。

STAGE 08

進階：把 Figma 設計稿變成網頁

如果你已經在 Figma 畫好網頁版面，可以把畫面截圖＋設計規範一起交給 Claude，請它「照稿還原」。Claude 能讀圖片，會依照排版、比例、配色寫出對應的網頁，比純文字描述更精準。

適合：已有 Figma 稿的組別

截圖要分段一張長圖解析度會被壓縮，細節看不清。建議依區塊分 3–5 張截圖（Hero／作品區／資訊區…），並在 Figma 的 Inspect 面板抄下色碼、字級，一起寫進提示詞。

Figma 匯出畫面
選取 Frame → 右側 Export 設為 PNG 2x → 匯出。依區塊分段匯出更好。
在 Claude 上傳截圖
點 ＋ 一次上傳多張，或直接拖曳到對話框。

貼上還原指令

附件是我在 Figma 設計的《菇》策展網頁，依序是：1 主視覺、2 策展理念、3 作品區、4 展覽資訊。
請「照稿還原」成單一 HTML 檔：
・版面比例、留白、對齊方式盡量跟設計稿一致
・設計規範：主色 #B8F27C、背景 #0F120E、標題 Noto Sans TC 900、內文 16px／行高 1.8
・圖片用 images/ 開頭的路徑佔位，我之後自己放
・桌機寬 1440px 為基準，並自動做好平板、手機版
完成後，請列出你「無法從截圖判斷、自行推測」的地方，讓我確認。

比對差異，逐點修正
把 Artifact 預覽與 Figma 並排，找出不一致之處，用第 06 關的方式一項一項修。

把以下資訊從 Figma 的 Inspect／Dev Mode 或你的視覺規範整理出來，附在提示詞後面，AI 還原度會大幅提升：

項目	《菇》範例
色彩	主色 #B8F27C／背景 #0F120E／文字 #F2F0EA／輔助 #6E7A66
字體字級	H1 80/1.1 Black、H2 40/1.3 Bold、內文 16/1.8 Regular
格線	12 欄、欄距 24px、最大寬度 1200px、左右邊界 24px
圓角陰影	卡片圓角 4px（銳利感）、無陰影、細線 1px #2A3027
按鈕	高 52px、全大寫英文、hover 反白
間距	區塊上下 120px（手機 72px）

提示：如果你的 Figma 有 Figma Make 或 Dev Mode，也可以直接參考它產生的 CSS 數值，再交給 Claude 整合。

STAGE 09

RWD 檢查：手機上好不好看才是重點

策展網頁的觀眾八成以上用手機打開（掃展場 QR Code、點 IG 連結）。上線前一定要在三種寬度檢查：桌機（1440px）、平板（768px）、手機（375px）。

工具：Chrome 開發者工具

真機測試上線後用自己的手機實際打開一次，特別檢查：字會不會太小、按鈕好不好按、圖片有沒有被裁切到主角。

互動示意．切換裝置寬度，看版面如何重新排列

菇 MUSHROOM理念作品測驗資訊

不認識的菇，別吃。2026 畢業專題線上策展

桌機：導覽列完整顯示、作品 4 欄排列

用 Chrome 模擬手機

開啟 index.html，按 F12
Mac 為 ⌘⌥I。
點左上角「手機／平板」圖示
或按 CtrlShiftM（Mac：⌘⇧M）切換裝置模式。
上方選擇 iPhone、iPad 等機型
由上到下捲完整頁，把問題截圖。
把截圖丟回 Claude
「附圖是 iPhone 寬度的樣子，作品標題被切掉、按鈕擠在一起，請修正手機版。」

STAGE 10

發布上線：讓你的網站有自己的網址

用 Claude 做完網站後，只是在對話裡「看得到」。把網站資料夾放到一台 24 小時開機的主機（靜態託管），就會得到像 mushroom-2026.pages.dev 的網址，可以貼進作品集、做成 QR Code 印在展場海報。本課首選 Cloudflare Pages（免費、免信用卡、可拖曳）；也可以用 GitHub Pages 或 Netlify。

產出：公開網址＋QR Code整理自 web-design 單元 19

A網址是怎麼來的？

四步：整理資料夾 → 選託管 → 上傳 → 拿到網址。

STEP 1網站資料夾index.html＋css、js、images 放在同一個資料夾。

STEP 2選託管服務Cloudflare Pages、GitHub Pages、Netlify，都有免費方案。

STEP 3上傳拖曳資料夾、打一行指令，或推到 GitHub。

STEP 4得到網址例如 mushroom-2026.pages.dev，貼進作業與簡報。

Claude 產生的 HTML／CSS／JS 都是靜態網站：主機只要把檔案原封不動送給瀏覽器，不需要資料庫或後端，放在免費託管剛剛好。

你的網站	能不能用本關方法	說明
Claude／ChatGPT 產生的 HTML 檔	✓ 可以	整理成資料夾後直接上傳。
自己寫的 HTML／CSS／JS	✓ 可以	同上。
Figma Make 做的網站	✓ 用 Make 的 Publish	右上角 Publish 得到 figma.site 網址；它是 React 專案，不能直接拖進靜態託管。
需要會員登入、資料庫、金流	✗ 不適合	需要後端；課堂作業請做「示意」，例如表單送出只顯示成功畫面。

B上傳前先整理資料夾

✓ 正確：index.html 在最外層

site/                # ← 上傳「這一層」
├── index.html       # 首頁，一定叫 index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── hero.webp
    └── cover-01.jpg

✗ 常見錯誤

my-project/
└── site/
    └── Index.HTML     # 大寫、又多包一層
images/Cover 01.JPG    # 空格＋大寫
C:\Users\me\hero.jpg  # 程式寫了自己電腦的路徑
設計稿.psd             # 原始檔不用上傳

三個鐵則① 首頁檔名一定是 index.html，放在上傳資料夾最外層。② 檔名用英文小寫＋連字號，不要空格、不要中文。③ 路徑寫成 images/hero.jpg 這種相對路徑，不要出現 C:\ 或 /Users/。

上傳前檢查器：貼上檔名清單，自動找問題

還沒有資料夾？請 Claude 幫你整理

請把我們剛剛完成的網站整理成可以直接上傳到靜態託管（Cloudflare Pages／GitHub Pages／Netlify）的資料夾結構：
1) 首頁命名為 index.html，放在最外層；其他頁面用英文小寫加連字號命名。
2) CSS 放 css/、JS 放 js/、圖片放 images/，所有路徑改成相對路徑。
3) 檔名不要有空格、中文、大寫字母，並同步修改 HTML 裡的引用。
4) 列出最後的資料夾樹狀圖，以及每個檔案的用途。
5) 檢查有沒有放 API 金鑰、個資或自己電腦的路徑，有的話標出來。

C選一家：三種免費方案比較

	Cloudflare Pages	GitHub Pages	Netlify
網址長相	`專案名.pages.dev`	`帳號.github.io/儲存庫`	`網站名.netlify.app`
上傳方式	後台拖曳、Wrangler 指令、連 GitHub	推到 GitHub（網頁也能拖檔上傳）	Netlify Drop 拖曳、CLI、連 Git
免費額度 2026 年資料，以官方為準	靜態流量不限；每站 20,000 檔、單檔 25 MiB	網站 1 GB；每月流量軟上限 100 GB	點數制：每月 300 點，用完網站暫停到下月
信用卡	不需要	不需要	不需要
最適合	本課推薦：拖曳直覺、指令更新快	會 Git、想公開程式碼當作品集	只拖一次、短期展示
要注意	新專案官方現推 Workers，Pages 仍可用	儲存庫要 Public；網址多一層儲存庫名	常更新或流量大會很快用完點數

三題選出最適合你的方式

D路線一（推薦）：Cloudflare Pages 後台拖曳

不用寫指令、不用安裝任何東西。先準備：① 一個能收信的 Email　② 通過 B 檢查的資料夾（或壓成 ZIP）　③ 專案名稱（英文小寫、數字、連字號，會變成網址）。

輸入你的專案名稱，下方畫面與指令會跟著換

畫面跟我看到的不一樣？Cloudflare 常調整後台。認準三個關鍵字：Workers & Pages → Create → Pages 分頁的上傳（Upload／Direct upload）。找不到就改用路線二的指令，結果一樣。

E路線二：Wrangler 指令，一行上傳、一行更新

更新只要一行（改完按 ↑ 再 Enter）、可先傳預覽版，也能交給 Claude Code 代勞。先到 nodejs.org 安裝 LTS 版，開終端機輸入 node -v 看到 v20 以上即成功。不用另外安裝 Wrangler，指令用 npx wrangler 會自動下載（第一次問你就輸入 y）。

專案名稱（與路線一共用）

常用指令速查

確認是誰登入	`npx wrangler whoami`
看我有哪些 Pages 專案	`npx wrangler pages project list`
預覽版（不影響正式網址）	`npx wrangler pages deploy ./site --project-name 專案名 --branch preview`
在自己電腦先預覽	`npx wrangler pages dev ./site`
公用電腦用完登出	`npx wrangler logout`

請 Claude Code 幫你部署（在能執行指令的環境）

請幫我把目前資料夾裡的 ./site 部署到 Cloudflare Pages，專案名稱用 mushroom-2026：
1) 先確認 ./site 最外層有 index.html，且路徑都是相對路徑。
2) 用 npx wrangler whoami 確認已登入；沒有就請我登入。
3) 若專案不存在先建立，再執行 npx wrangler pages deploy ./site --project-name mushroom-2026。
4) 部署後把正式網址回報給我，並提醒我用手機與無痕視窗測試。
注意：不要把任何金鑰寫進網站檔案。

F路線三：GitHub Pages、Netlify 與 Claude 發布

註冊 github.com
帳號名稱會出現在網址，建議英文，例：jinjin-wang。
建立 Repository
右上角 ＋ → New repository → 名稱填 mushroom → Public → Create。
上傳檔案
點 uploading an existing file，把資料夾裡面的所有檔案與子資料夾拖進去（不是外層資料夾）→ Commit changes。
開啟 Pages
Settings → Pages → Source 選 Deploy from a branch → Branch main、/(root) → Save。
等 1–3 分鐘取得網址
同頁上方出現 https://帳號.github.io/mushroom/。
更新
再 Add file → Upload files 上傳同名檔案覆蓋。

特別注意網址多一層 /儲存庫名/，程式裡不要用 /images/… 開頭，要用 images/…，否則圖片全部不見；檔名大小寫要完全一致。官方說明：Configuring a publishing source

G上線後：打不開怎麼辦？＋交付檢核

打開網址是 404 或空白

最常見：最外層沒有 index.html（叫 Index.html、home.html，或多包一層資料夾）。用 B 的檢查器確認後重新上傳。

網頁有出來，但圖片或樣式不見

① 大小寫不一致　② 路徑寫成 C:\… 或 /Users/…　③ GitHub Pages 用了 /images/ 開頭。打開瀏覽器開發者工具的 Console，紅字會告訴你哪個檔案找不到。

我更新了，網站還是舊的

瀏覽器快取：按 ⌘⇧R（Windows：Ctrl＋F5）強制重新整理，或用無痕視窗開。Cloudflare 也確認是部署到正式分支（main）。

表單按送出沒反應

靜態網站沒有後端，不會真的寄出資料。課堂作業只顯示「送出成功」畫面即可；真要收資料可嵌入 Google 表單。

網址太長太醜，可以改嗎？

Cloudflare：專案名稱就是網址，想改就建立新專案再上傳；Netlify 可直接改 site name；GitHub 改儲存庫名稱。

網站裡有我的電話、Email、API 金鑰怎麼辦？

上傳後全世界都看得到原始碼。真實個資請改成示意資料；任何金鑰都不要放在網站檔案裡。

學校電腦不能安裝 Node.js

用路線一的後台拖曳即可，不需要安裝任何東西。

交付檢核：網址上線後確認這八件事

部署不要等到最後一天：先上傳一次（就算還沒做完），之後每次更新都重新部署。勾選會保存在這台瀏覽器。

0 / 8

網址用無痕視窗打得開手機打開每一頁都正常，沒有橫向捲軸所有圖片與樣式都有載入（Console 沒有紅字）網址好記，和專案名稱一致網站裡沒有真實個資、金鑰或自己電腦的路徑更新後確認已是最新版本（強制重新整理）已產生 QR Code，印出來用手機掃描測試過貼到 LINE／IG 時，分享預覽圖（og-cover.jpg）有出現；沒有就請 Claude「幫我加上 Open Graph 分享設定，圖片用 images/og-cover.jpg」

STAGE 11

其他免費 AI 建站工具：詳細操作與免費版極限

Claude 額度用完、想比較不同 AI 的設計風格，或專題需要更複雜的互動時，可以換用以下四種工具。每個工具都整理了「免費版做得到／做不到」、逐步操作與省額度技巧。第 04 關的提示詞大多可以直接貼上，只有 AI Studio 與 Lovable 要拿掉「單一 HTML 檔」那一句。

同一份提示詞，多家比較資料查核：2026 年 10 月

先看結論．免費版到底能做到什麼程度

工具	免費額度	即時預覽	放自己的圖片	直接得到公開網址	自訂網域	匯出程式碼	免費版適合做到
Claude 本課主線	以「5 小時」為單位的用量上限，用完需等重置；長對話、附檔會消耗更快	✓	下載後可	✓ 發布連結（只含 Artifact 內容）	✗	✓ 下載 HTML	一頁式展示＋規則型評估工具
Gemini Canvas	免費帳號可用 Canvas；高階模型有每日次數限制，用完會改用較輕量的模型	✓	下載後可	△ 分享連結（在 Gemini 介面內開啟）	✗	✓ 複製程式碼	完整的一頁式網站、快速比稿
ChatGPT 程式碼區塊預覽	免費對話與工具有用量限制；預覽／下載入口依帳號介面	△ 依介面；可本機預覽	下載後可	✗ 只能分享對話	✗	✓ 複製程式碼	完整靜態網站、問卷與搜尋篩選
Google AI Studio Build 模式	支援地區免費使用；分享出去的 App 若呼叫 AI 功能，會算進你的 API 用量	✓	✓ 可上傳到專案	△ App 分享連結；正式部署 Cloud Run 需綁定付款	✗	✓ ZIP／GitHub	互動測驗、小工具原型
Lovable	每天 5 credits、每月最多 30，台灣時間早上 8 點重置、不累積	✓	✓ 對話中上傳	✓ 專案名.lovable.app	✗ 需付費	△ 同步到 GitHub	多頁原型；修改次數依點數消耗

✓ 可以　△ 有條件　✗ 不行。免費額度與功能由各家公司隨時調整，上課當天請再看一次官方方案頁。

老師推薦的「零成本組合技」

Claude 或 Gemini Canvas：生成網站、對話修改（兩邊額度輪流用，等於加倍）
下載 HTML：和 images 資料夾放在一起
GitHub Pages 或 Netlify：發布上線（第 10 關）
需要「會員、資料庫、多頁表單」時，才把定稿版提示詞交給 Lovable，用最少的 credits 一次完成

Gemini Canvasgemini.google.com｜Google 帳號即可使用

開啟 Gemini ↗

免費版做得到

用 Canvas 生成完整的 HTML 網頁，右側切換「程式碼／預覽」即時檢視
選取 Canvas 中的一段文字或程式，只針對那一段要求修改
產生公開分享連結，對方可以瀏覽，也能複製一份自己改
把程式碼複製出來，存成 index.html，再用第 10 關發布
上傳主視覺、Moodboard 截圖讓 Gemini 參考配色與氛圍

免費版做不到／要注意

分享連結只能在 Gemini 介面內開啟，不能改成自己的網址，不適合當正式展覽網址
學校帳號可能無法分享（管理員關閉），分享功能也限 18 歲以上；遇到時請改用個人 Google 帳號
上傳給 Gemini 的圖片不會變成網站裡的圖，一樣要用 images/ 路徑，下載後自己放
手機版 App 編輯功能較少，建議用電腦操作

逐步操作

用個人 Google 帳號登入 gemini.google.com
右上角確認是個人帳號。學校帳號若看不到 Canvas 或無法分享，切換帳號即可。
點輸入框下方的「工具」→ 選擇「Canvas」
輸入框會出現 Canvas 標籤，代表這則訊息會輸出到右側的編輯區。
貼上第 04 關的提示詞並送出
可以按 ＋ 一起附上主視覺圖。Gemini 會在右側開出 Canvas 並開始寫程式。
切換「預覽」檢視網頁
Canvas 右上角可在程式碼與預覽之間切換。先由上到下捲完整頁，點按鈕、測驗，確認互動正常。
對話修改：整體改 → 左側對話；局部改 → 選取後提問
在 Canvas 中反白某段文案或程式，會跳出小對話框，輸入「改成更有黑色幽默的語氣」，就只會改那一段。
產生分享連結給老師看初稿
Canvas 右上角「分享」→ 建立公開連結 → 複製。注意：任何拿到連結的人都看得到。
匯出成真正的網站
切到程式碼 → 全選複製（或使用複製按鈕）→ 貼到文字編輯器（VS Code、記事本）→ 另存為 index.html（編碼選 UTF-8）→ 放進網站資料夾 → 第 10 關發布。

省額度技巧需要深度思考的模型（如 Pro、Thinking）次數較少：第一版用它生成，之後的小修改切回一般模型即可。

AI 建站範例館：AI 做出來的網站可以到什麼程度？

以下是用 AI 架設的真實網站。點開看看版面、互動與內容完整度，再回頭決定你的專題要做到哪一級。

系上專業實驗室（本系實作）

同一個系、同一套內容，用不同 AI 工具與方案做出不同風格，可以對照比較。

Claude免費方案電腦輔助與模擬設計實驗室免費 Claude 就能做出的完整實驗室介紹頁，適合當「零預算做到哪裡」的基準。web.cute.edu.tw/dvcd/computer-simulation-lab.html ↗ Claude付費方案繪見故事設計繪畫實驗室付費方案：版面層次、插畫感與互動細節更完整。web.cute.edu.tw/dvcd/drawing-lab.html ↗ Claude付費方案工藝設計實驗室付費方案：以工藝材質為主題的視覺與內容編排。web.cute.edu.tw/dvcd/craft-lab.html ↗ Claude付費方案陶藝設計實驗室付費方案：陶藝主題的展示型網站。web.cute.edu.tw/dvcd/ceramics-lab.html ↗ Claude付費方案UI/UX 實驗室付費方案：多區塊互動圖鑑，是目前本系完成度最高的範例。web.cute.edu.tw/dvcd/cute-uiux-lab/ ↗ ChatGPT付費方案色彩與構成實驗室ChatGPT 付費方案（Sites）發布的網站，內建託管、網址由平台產生。wei-color-lab.modest-kite-7129.chatgpt.site/ ↗ ChatGPT付費方案品牌永續與減碳設計研究室ChatGPT 付費方案（Sites）發布，主題為品牌永續與減碳設計。sblc-design-lab.workspace-148290.chatgpt.site/ ↗

怎麼看這些範例比較「免費 vs 付費」時，不要只看漂不漂亮，請檢查：① 手機版會不會破版　② 互動功能是否真的能用　③ 內容是不是你們自己查證的　④ 網址能不能長期使用。

其他 AI 建站案例（找更多靈感）

以下為外部站點，內容與可用狀態以對方為準；說明為依站名與用途的簡述。

Lovable商業網站AfterImage Film Festival影展型網站：活動介紹、節目與資訊的展示結構，可對照你的策展網頁。afterimagefilmfestival.com/ ↗ Lovable商業網站Jukebox Burgers餐廳品牌網站：主視覺、菜單與地點，示範單頁品牌站。jukeboxburgers.com/ ↗ Lovable商業網站Leah Martinez, Realtor個人專業形象站：自我介紹、服務項目與聯絡 CTA，可當個人作品集參考。princetontxrealtor.lovable.app/ ↗ Lovable商業網站Kanha Guest Rooms民宿網站：房型、照片與預約資訊的資訊編排。kanhaguestroom.lovable.app/ ↗ Claude社群範例Awesome Claude Artifacts社群整理的 Claude Artifacts 清單，含資料視覺化、儀表板與小遊戲，看互動能做到多細。github.com/madewithclaude/awesome-claude-artifacts ↗ Lovable作品集錦Lovable LaunchedLovable 的作品探索平台，可瀏覽各類用 Lovable 做的網站與應用。launched.lovable.dev/ ↗ Lovable作品集錦Made with Lovable（社群目錄）第三方社群整理的 Lovable 專案目錄，依類別瀏覽。madewithlovable.com/ ↗ Lovable作品集錦Lovable 網站範例清單（Site Builder Report）第三方整理的 20 多個 Lovable 網站，含餐廳、影展、個人站等。www.sitebuilderreport.com/inspiration/lovable-websites ↗ Gemini官方圖庫Google AI Studio App GalleryAI Studio 的應用圖庫，可預覽並 remix 他人的專案（需登入 Google 帳號，入口以介面為準）。aistudio.google.com/apps ↗ ChatGPT官方教學ChatGPT：建立學生網站OpenAI 的學生網站使用案例，對照 ChatGPT Sites 的做法。learn.chatgpt.com/use-cases/build-student-website ↗

學生可以怎麼用這個範例館① 挑一個和你專題目的最接近的網站（展示／評估／查詢）　② 寫下它做得好的三件事與你想避開的一件事　③ 把這些觀察放進提示詞：「參考 XX 的資訊層級，但配色與字體改成我的專題風格」。注意：參考版面結構與互動邏輯即可，不要直接複製他人的文字、圖片與品牌。

常見問題 Troubleshooting

上課時最常遇到的狀況，先在這裡找答案

Claude 回覆到一半就停了，程式碼不完整？

網頁太長時可能會中斷。直接回覆「請繼續」即可；若 Artifact 壞掉，請說「請重新輸出完整的 index.html，不要省略任何部分」。也可以一開始就請它「先做主視覺到作品區，下一則再做其餘區塊」。

出現「已達訊息上限」，不能再問了？

免費方案在一段時間內有使用上限，等待重置時間（畫面會提示）即可。等待期間可改用 Gemini Canvas 繼續，或先整理下一輪要修改的指令清單，之後一次送出更省額度。

我改了 A，結果 B 也被改壞了？

在指令中加一句「只修改作品區，其他區塊保持不變」。若已經改壞，切回 Artifact 上一個版本，或請它「回到上一版，只套用 xx 的修改」。

本機打開有圖，上線後全部破圖？

最常見原因：① 檔名有中文或空格 ② 大小寫不一致（GitHub 分大小寫，Windows 不分）③ 只上傳 index.html 沒有上傳 images 資料夾 ④ 路徑寫成 C:\Users\… 這種本機絕對路徑。請改成 images/xxx.webp 的相對路徑。

AI 寫的文案看起來很罐頭？

不要讓 AI 從零寫文案。把企劃書裡的品牌故事與 TOV（品牌語氣）貼給它，並說「保留我的原文，只調整斷句與段落，讓它適合網頁閱讀」。最後一定要人工逐字校對，尤其是展覽日期、地點、人名。

可以用 AI 生成的圖片放在網站上嗎？

可以，但請在網站頁尾或作品說明標註「部分視覺使用 AI 工具輔助生成」，並確認使用的 AI 工具條款允許商業／公開展示用途。核心作品圖仍應以你的畢製原稿為主。

想加 Google 表單、地圖或 YouTube 影片？

在 Google 地圖／YouTube／Google 表單按「分享 → 嵌入」複製 <iframe> 代碼，貼給 Claude：「請把這段嵌入代碼放到展覽資訊區塊，並讓它在手機上自動縮放」。注意：Artifact 預覽中嵌入內容可能無法顯示，下載後用瀏覽器打開再確認。

組員要一起修改，怎麼協作？

指定一位「網站負責人」維護唯一的 Claude 對話與 index.html，其他組員把修改需求整理成清單交給他。GitHub 也可以邀請組員成為 Collaborator，但要約定好不要同時上傳覆蓋。

延伸資源與銜接單元

本單元用到的工具官方網站，以及前後單元連結

← 上一單元4．畢業專題的數位生態系藍圖→ 下一單元 →6．AI 圖像驅動與動態海報設計→ Claudeclaude.ai↗ Claude 說明中心Artifacts 使用說明↗ Gemini Canvasgemini.google.com↗ Lovablelovable.dev↗ GitHub Pages 官方文件docs.github.com/pages↗ Netlify Drop拖曳上線↗ Squoosh免費圖片壓縮／轉 WebP↗

本頁內容整理於 2026 年 10 月。AI 工具的免費額度、按鈕位置與功能名稱更新頻繁，若畫面與講義不同，請以各工具官方說明為準。

內容行銷數位設計｜課程講義

不寫一行程式，用 對話 做出有用途的互動網站

網站可以展示作品，也可以幫使用者完成一件事

1先選一種網站目的

2需求卡、試玩原型與成品長相

3選一個 AI 工具，照步驟做出來

4驗收的是「功能真的有用」

補補充：功能層級與工具比較

先認識工具：哪些免費 AI 可以「生出網站」？

Claudeclaude.ai・Artifacts

Gemini Canvasgemini.google.com

ChatGPTchatgpt.com・程式碼區塊預覽

Lovablelovable.dev

Google AI Studioaistudio.google.com・Build

GitHub Pagespages.github.com

Netlify Dropapp.netlify.com/drop

Claude 發布連結Artifact → Publish

網站規劃：先決定「這一頁要講哪些事」

素材準備：資料夾先整理好，後面不會亂

寫提示詞：把「設計規範」講給 AI 聽

用 Claude 生成第一版網頁

對話式修改：像跟工程師溝通一樣「下修改單」

放入真實圖片：下載 HTML，和圖片資料夾放在一起

進階：把 Figma 設計稿變成網頁

RWD 檢查：手機上好不好看才是重點

發布上線：讓你的網站有自己的網址

A網址是怎麼來的？

B上傳前先整理資料夾

上傳前檢查器：貼上檔名清單，自動找問題

還沒有資料夾？請 Claude 幫你整理

C選一家：三種免費方案比較

三題選出最適合你的方式

D路線一（推薦）：Cloudflare Pages 後台拖曳

E路線二：Wrangler 指令，一行上傳、一行更新

請 Claude Code 幫你部署（在能執行指令的環境）

F路線三：GitHub Pages、Netlify 與 Claude 發布

G上線後：打不開怎麼辦？＋交付檢核

交付檢核：網址上線後確認這八件事

其他免費 AI 建站工具：詳細操作與免費版極限

操作順序：以「浪」養狗準備評估為例

如何讓免費版做得好？用三輪指令取代一句「幫我做漂亮網站」

AI 建站範例館：AI 做出來的網站可以到什麼程度？

系上專業實驗室（本系實作）

其他 AI 建站案例（找更多靈感）

常見問題 Troubleshooting

HomeWork｜【作業05】專題功能網站／作品展示網站 v1

交付內容

評分重點

繳交前自我檢核

延伸資源與銜接單元

不寫一行程式，
用對話做出有用途的互動網站