Vibe Coding 實戰工作坊

用 AI 對話，做出你的第一個網站

Vista Cheng ｜鄭緯筌
https://www.vista.tw

Vista Cheng

內容策略顧問｜ Vibe Coding 講師

《ChatGPT提問課》作者，專注 AI 驅動的內容與商業策略。長期研究人工智慧在內容創作、行銷策略和個人生產力領域的應用，協助超過 200 家企業導入 AI 工作流程。

vista.tw — AI 內容策略知識庫solo.tw — 一人公司生態系創辦人用 Vibe Coding 打造完整網站 vista.tw「Vibe Coding 實戰工作坊」系列課程主講

課程流程（上半場）

01

AI 時代的新技能

為什麼要學 Vibe Coding？
02

Vibe Coding 核心概念

對話式開發的思維和方法
03

Prompt 工程基礎

與 AI 有效溝通的技巧
04

銷售頁設計與製作

從零開始建立專業銷售頁

課程流程（下半場）

01

工具指南與實戰

Google Antigravity 完整操作
02

網站部署與上線

讓全世界看到你的作品
03

進階技巧與延伸學習

持續精進的方向

課程資訊

⏱️

3 小時實作

邊學邊做，帶走成品

🎯

零基礎入門

完全不需要程式語言知識

🤖

AI 驅動創作

用自然語言完成網站

“

你不需要會寫程式，你只需要會說話。

— Vibe Coding 的核心理念

今天你將學會

1

理解

什麼是 Vibe Coding 以及它如何改變創作方式

2

掌握

與 AI 有效溝通的 Prompt 技巧

3

實作

從零開始製作一個完整的銷售頁

4

部署

將你的作品上線，讓全世界都能看到

5

獲得

持續學習與進階的完整資源

課前準備確認

筆電已開機且電量充足

確保能持續 3 小時的工作
可以連上現場 WiFi

網路連線是必要條件
Google Antigravity 已安裝

今天的主要工具
已登入 Google 帳號

用於登入工具和儲存作品
已有 Netlify 帳號

用於部署網站上線

💡

學習心態

今天的學習過程中，你可能會遇到一些小問題，這是完全正常的。重要的是保持開放的心態，勇於嘗試，不怕犯錯。AI 是你的夥伴，而不是取代你的工具。你的創意和想法才是最重要的。

你比 99% 的人更早開始

84%

從未用過 AI

68.8 億人還沒體驗過 AI

16%

曾與 AI 對話

13.8 億人有過基本互動

0.3%

付費訂閱 AI

約 2,500 萬人

0.04%

用 AI 做專案

約 500 萬人

00

準備好了嗎？

開始你的 AI 創作之旅

01

AI 時代的新技能

The New Skills of AI Era

AI 正在改變一切

過去幾年，人工智慧技術經歷了爆發性的成長。從 ChatGPT 到各種 AI 工具，我們正處於一個前所未有的技術革命中。

這不只是科技的進步，更是工作方式和創作方式的根本改變。會使用 AI 工具的人，將擁有巨大的競爭優勢。

AI 能做什麼？

撰寫文章、報告、郵件等各種文字內容
生成程式碼和網頁（這就是今天要學的！）
創作圖片和設計
分析數據和提供建議
自動化重複性工作、作為學習助手解答問題

100M

ChatGPT 上線兩個月即突破一億用戶

史上最快達成此里程碑的應用程式

傳統方式 vs AI 協作

AI 協作

✓ 用自然語言描述需求
✓ 立即開始創作
✓ 快速產出原型
✓ 錯誤可以即時修正
✓ 幾小時完成一個網站

傳統方式

✗ 需要專業技能才能開始
✗ 學習曲線陡峭
✗ 產出速度受限於技能
✗ 錯誤成本高
✗ 一個網站需要數月開發

認識關鍵概念

🧠

LLM 大型語言模型

能理解和生成人類語言的 AI 系統，如 ChatGPT、Claude

💬

Prompt 提示詞

你給 AI 的指令或問題，品質決定輸出品質

🎨

Vibe Coding

透過自然語言與 AI 對話來創建網站的方式

“

未來的文盲不是不會讀寫的人，而是不會學習、忘記學習、和重新學習的人。

— Alvin Toffler

《第三次浪潮》《未來衝擊》《權力轉移》等書作者

AI 時代的核心能力

提問能力

知道問什麼問題比找到答案更重要
溝通能力

清楚表達需求和想法
判斷能力

評估 AI 輸出的品質
學習能力

快速適應新工具和方法
創意能力

提出獨特的想法和視角

為什麼學 Vibe Coding？

傳統程式開發需要數月甚至數年的學習。但透過 Vibe Coding，你可以在幾小時內創建一個網站。

這不是取代程式設計，而是讓更多人有機會將想法變成現實。今天你就會親身體驗這個過程。

Vibe Coding 的優勢

⚡ 快速原型

幾分鐘內就能看到初版成果

🔄 迭代修改

隨時對話調整，不需重寫

📉 低門檻

不需要程式背景就能開始

💡 專注創意

把精力放在想法而非技術

適合 Vibe Coding 的場景

個人品牌網站和作品集
產品銷售頁和著陸頁
活動報名頁面
小型企業官網
原型設計、概念驗證與實驗性專案

什麼時候用 Vibe Coding？

適合 Vibe Coding

✓ 快速驗證想法
✓ 個人專案
✓ 簡單網站
✓ 學習和實驗
✓ 一次性活動頁面

傳統開發更適合

✗ 複雜商業系統
✗ 需要高度客製化
✗ 長期維護的大型專案
✗ 有嚴格安全需求
✗ 需要團隊協作

“

最好的學習方式是動手做。 Let's Vibe!

02

Vibe Coding 核心概念

Core Concepts

什麼是 Vibe Coding？

Vibe Coding 是一種新的創作方式，透過自然語言與 AI 對話來建立網站或應用程式。你描述你想要的東西，AI 幫你寫程式碼。

這讓沒有程式背景的人也能實現自己的想法。Vibe 的意思是氛圍、感覺——你描述的是你想要的「感覺」，而不是技術細節。

Vibe Coding 的工作流程（一）

1

描述

用自然語言描述你想要的結果

2

生成

AI 生成初版程式碼

3

預覽

預覽並檢視結果

Vibe Coding 的工作流程（二）

1

調整

透過對話修改和調整

2

重複

持續優化直到滿意

3

部署

將成品發布上線

三個核心概念

💬

對話式開發

像和人聊天一樣與 AI 溝通，逐步完成作品

🔄

迭代改進

每次對話都是改進的機會，不求一次完美

🎯

結果導向

專注於你想要什麼，而非怎麼做

Vibe Coding 關鍵要素

🎯 清晰的目標

知道自己想要什麼

💬 有效的溝通

能把想法表達清楚

🔧 適當的工具

選擇合適的 AI 工具

🔄 耐心迭代

願意持續優化改進

有效 vs 無效的 Vibe Coding

有效的方式

✓ 具體的描述
✓ 分步驟進行
✓ 仔細檢視每次結果
✓ 持續給予回饋
✓ 接受逐步改進

無效的方式

✗ 模糊的描述
✗ 一次要求太多
✗ 不看結果就繼續
✗ 不提供回饋
✗ 期待一次完美

一個典型的 Vibe Coding 流程（一）

1

明確目標

我要做一個銷售頁

2

描述結構

包含標題、產品介紹、特色、價格

3

提供內容

產品名稱、描述文字、圖片需求

一個典型的 Vibe Coding 流程（二）

1

設定風格

現代、簡潔、專業的感覺

2

指定顏色

品牌藍色系，搭配白色

3

逐步優化

根據預覽結果持續調整

描述「Vibe」的方式

風格

現代、復古、極簡、華麗
情緒

專業、活潑、溫暖、冷靜
參考

像 Apple 官網的感覺、像 Notion 的簡潔
受眾

給年輕人看的、給企業客戶看的
行業

科技感的、文藝的、商務的

“

先描述感覺，再調整細節。這是 Vibe Coding 的精髓。

常見的 Vibe 詞彙

✨ 現代感

簡潔、留白、大標題

💼 專業感

深色、嚴謹、信任

🎉 活潑感

鮮豔、動態、年輕

🌿 自然感

柔和、有機、溫暖

Vibe Coding 的限制

複雜的互動邏輯可能需要專業開發
高度客製化的設計可能需要更多調整
大型專案可能不適合純對話式開發
某些技術需求可能超出 AI 能力
需要基本的審美和判斷能力

如何克服限制？

1

拆解

把大任務拆成小部分

2

排序

決定先做什麼、後做什麼

3

逐一

一次只處理一個部分

4

驗證

每完成一部分就檢查結果

5

整合與優化

組合各部分，再做細節調整

新手常見問題

問題

描述太模糊
期待太高
不願意改
不看結果
一次太多

解決方案

提供具體細節
接受迭代過程
保持開放心態
仔細檢視輸出
分步驟進行

03

Prompt 工程基礎

Prompt Engineering

什麼是 Prompt？

Prompt 就是你給 AI 的指令、問題或描述。Prompt 的品質直接決定 AI 輸出的品質。

Prompt 是人與 AI 溝通的橋樑，這是 AI 時代最重要的技能之一。學會寫好的 Prompt，就能讓 AI 成為你最強大的助手。

“

Garbage in, garbage out. 你給什麼，AI 就回什麼。

好 Prompt 的特質

🔍 清晰

明確說明你要什麼

📌 具體

提供足夠的細節

📖 有上下文

說明背景和目的

🎯 有限制

設定明確的範圍

Prompt 對比

清晰的 Prompt

✓ 做一個銷售手工皂的網頁
✓ 使用淺藍色背景和白色文字
✓ 採用企業官網的專業風格
✓ 把標題顏色改成深藍色 #1a365d
✓ 將產品特色區改成三欄並排

模糊的 Prompt

✗ 做一個網頁
✗ 好看一點
✗ 專業一點
✗ 改一下顏色
✗ 調整排版

Prompt 的基本結構

1

角色/情境

「你是一個網頁設計師」

2

任務

「幫我設計一個銷售頁」

3

細節

「包含標題、產品介紹、價格」

4

風格與限制

「現代、簡潔、專業，顏色用藍白配色」

5

輸出格式

「先給我整體架構，再填入細節」

範例：完整的 Prompt

PROMPT

請幫我設計一個銷售頁，產品是手工天然皂，價格 350 元。

需要包含：吸引人的標題、產品照片區、三個產品特色、購買按鈕。

風格要求：自然、溫暖的感覺，使用淺綠色和米色，字體要有質感。

提供上下文

說明你是誰

「我是一個手工皂品牌」
說明目標受眾

「給 25-40 歲注重生活品質的女性」
說明使用場景

「用於 IG 廣告導流」
說明期望效果

「希望提升轉換率」
說明特殊需求

「需要支援手機瀏覽」

描述視覺效果

顏色

「使用森林綠 #228B22 和米白色」
排版

「左邊放圖片，右邊放文字」
字體

「標題要大且粗，內文要易讀」
間距

「元素之間要有足夠的留白」
效果

「按鈕要有 hover 效果」

常用 Prompt 技巧

📝

舉例說明

「像 xxx 網站那樣」

⚖️

對比描述

「要 A 不要 B」

🔢

數字限制

「3 個特色、5 行文字」

使用參考的 Prompt

PROMPT

請參考 Apple 官網的風格，設計一個產品頁面。

要有的元素：像 Apple 那樣的大標題、產品圖片要置中顯示、簡潔的特色說明（每個只要一句話），但顏色要用我們品牌的綠色 #2D5A27

修改的 Prompt 技巧

好的修改指令

✓ 把標題字體放大到 48px
✓ 按鈕顏色改成 #4CAF50
✓ 產品描述區域寬度改為 60%
✓ 在標題下方加一條分隔線
✓ 把三欄改成兩欄

不好的修改指令

✗ 改一下
✗ 好看一點
✗ 不太對
✗ 再改改
✗ 換一個

有效的修改流程

1

先說明要改什麼

「標題的部分」

2

說明目前狀態

「現在太小了」

3

說明期望結果

「希望更醒目」

4

給出具體數值

「字體改成 48px」

5

確認其他不變

「其他部分維持原樣」

進階 Prompt 技巧

分步驟進行

先大方向，再細節
使用模板

建立自己的 Prompt 模板
儲存好用的 Prompt

方便未來重複使用
角色扮演

讓 AI 扮演特定角色
持續優化

找到最適合的溝通方式

💡

角色扮演技巧

讓 AI 扮演特定角色可以得到更好的回答。例如：「你是一個有 10 年經驗的 UI 設計師」這樣 AI 會從那個角色的視角來思考和回答。

避免常見錯誤

不要太模糊

提供具體細節
不要太多

一次專注一件事
不要假設

說明所有必要資訊
不要放棄

不滿意就換個說法
不要硬改

有時重新開始更快

單一 vs 複合任務

分開做（推薦）

✓ 先設計整體架構
✓ 確認後再填入內容
✓ 最後調整細節
✓ 逐步完善
✓ 每步都可以回頭

一次做完（困難）

✗ 一次說完所有需求
✗ 容易遺漏或混亂
✗ 修改困難
✗ 難以定位問題
✗ 重做機率高

Prompt 模板概念

📋

固定結構

每次使用相同的結構

🔄

可替換變數

只換掉需要換的部分

⏰

節省時間

不用每次重新思考

記住這些原則

清晰 > 模糊
具體 > 抽象
分步 > 一次到位
嘗試 > 放棄
迭代 > 完美

“

Prompt 是一種技能，需要練習才能進步。

✍️ Practice

Prompt 練習任務

1 嘗試撰寫你的第一個 Prompt
2 用一句話描述你想做的網頁
3 列出至少三個必要的元素
4 描述你想要的視覺風格
5 嘗試輸入並觀察結果
6 根據結果進行修改

⏱ 10 分鐘

“

好的 Prompt 是練習出來的，不是天生的。

04

銷售頁設計與製作

Sales Page Design

什麼是銷售頁？

銷售頁（Sales Page）是專門設計來推銷產品或服務的網頁。它的目標只有一個：讓訪客採取行動（購買、註冊、聯繫）。

好的銷售頁能大幅提升轉換率。今天我們就要學習如何用 Vibe Coding 快速製作專業的銷售頁。

銷售頁的核心目標

1

吸引注意力

讓訪客停下來看

2

建立信任

讓訪客相信你

3

說服購買

讓訪客想要你的產品

4

促成行動

讓訪客立即採取行動

銷售頁的關鍵元素

📢 吸睛標題

第一眼就抓住注意力

💎 價值主張

為什麼要選擇你

⭐ 社會證明

別人都說好

🎯 行動呼籲

明確告訴訪客下一步

銷售頁的標準結構（一）

1

Hero Section

大標題 + 副標題 + CTA

2

痛點描述

點出目標受眾的問題

3

解決方案

你的產品如何解決問題

4

產品特色

3-5 個核心賣點

銷售頁的標準結構（二）

1

社會證明

客戶評價、數據

2

價格與 CTA

明確的購買行動

3

FAQ

解答常見疑問

💡

Hero Section 的重要性

Hero Section 是訪客看到的第一個畫面。你只有 3 秒鐘的時間讓他們決定要不要繼續看。標題必須一眼就能理解你在賣什麼、為什麼重要。

標題的寫法

有效的標題

✓ 3 秒讓你的肌膚喝飽水
✓ 省下 50% 的時間，效果卻更好
✓ 超過 10,000 位媽媽的選擇
✓ 終於有人解決了這個問題
✓ 你值得更好的生活品質

無效的標題

✗ 歡迎來到我們的網站
✗ 最好的產品
✗ 買就對了
✗ 高品質產品
✗ 專業服務

標題的公式

數字 + 結果

「7 天學會...」
痛點 + 解決

「受夠了...？試試...」
權威背書

「專家推薦的...」
時間/金錢節省

「省下...」
社會證明

「超過 X 萬人使用的...」

價值主張 Value Proposition

價值主張回答一個問題：為什麼客戶要選擇你？

它應該清楚說明：你提供什麼、給誰、為什麼比別人好。好的價值主張是具體、可衡量、有差異化的。

範例：撰寫價值主張

PROMPT

請為我的手工皂產品寫一個價值主張。

產品資訊：100% 天然成分、手工冷製、適合敏感肌膚、價格 350 元。

目標受眾：25-40 歲注重生活品質的女性。

需要：一句話核心價值主張、三個次要賣點、一段 50 字產品描述。

產品特色的呈現

🖼️

圖示化

用 icon 搭配文字

🔢

數字化

「99% 客戶滿意」

⚖️

對比化

「比 XX 更 YY」

特色轉換為利益

特色

100% 天然成分
手工製作
冷製工藝
無添加香精
ISO 認證工廠

利益

對肌膚溫和無刺激
每塊都獨一無二
保留完整營養
敏感肌也能安心使用
品質有保障

社會證明的力量

人們傾向於跟隨他人的行為，這是心理學的「從眾效應」。看到別人都在用、都說好，會大幅降低購買的心理障礙。

社會證明包括：客戶評價、使用人數、媒體報導、專家推薦、認證標章。

社會證明的類型

客戶評價

真實的使用心得
數據展示

「超過 10,000 位滿意客戶」
媒體曝光

「曾被 xxx 報導」
專家背書

「皮膚科醫師推薦」
認證標章

「SGS 檢驗合格」

CTA（行動呼籲）

CTA 是 Call To Action 的縮寫，就是告訴訪客「接下來做什麼」。

好的 CTA 要明確、緊急、有吸引力。按鈕文字、顏色、位置都會影響點擊率。

CTA 按鈕文字

有效的 CTA

✓ 立即擁有水嫩肌膚
✓ 開始 30 天無風險試用
✓ 免費獲取完整指南
✓ 現在就改變你的生活
✓ 限時優惠 → 立即搶購

普通的 CTA

✗ 提交
✗ 購買
✗ 確認
✗ 下一步
✗ 點擊這裡

CTA 的設計原則

顏色突出

和背景形成對比
大小適中

夠大但不誇張
位置明顯

不需要找就能看到
文字行動導向

用動詞開頭
營造緊迫感

「限時」「剩餘」

價格呈現技巧

⚓ 錨定效應

先顯示高價讓實際價格感覺划算

📊 拆解成本

「每天只要 12 元」

🎁 加值感

「再送 xxx」

⏰ 限時優惠

「前 100 名特價」

💡

響應式設計

現在超過 50% 的網頁瀏覽來自手機。文字在手機上要夠大、易讀；按鈕要夠大、容易點擊；圖片要自動縮放；重要內容在首屏可見。

銷售頁設計原則

✨ 簡潔

減少不必要的元素

🎯 聚焦

每個區塊一個目的

➡️ 引導

視覺動線要清楚

📱 適應

各種裝置都能看

銷售頁製作流程

1

確定目標

你要賣什麼？給誰？

2

準備內容

文案、圖片、價格

3

設計架構

決定區塊順序

4

撰寫 Prompt

用 AI 生成初版

5

預覽調整與部署

根據結果持續優化，確認後上線

範例：建立銷售頁

PROMPT

請幫我建立一個銷售頁，產品是手工天然皂。

產品資訊：名稱「沐光手工皂」、價格 350 元、特色 100% 天然、手工製作、適合敏感肌。

需要區塊：Hero + 痛點描述 + 解決方案 + 三個特色 + 客戶見證 + 價格和購買按鈕 + FAQ。

風格：自然、溫暖、簡潔。顏色：淺綠色系 + 米白色。

✍️ Practice

實作練習清單

1 建立你的第一個銷售頁
2 建立 Hero Section
3 新增痛點描述
4 設計產品特色區塊
5 加入客戶見證
6 設計價格區塊
7 新增 FAQ
8 優化響應式設計

⏱ 30 分鐘

04

開始實作！

現在我們要實際製作一個銷售頁

“

銷售頁的目標是轉換，每個元素都要服務這個目標。

Vibe Coding Prompt 產生器

掃描 QR Code 使用 Prompt 產生器

05

Vibe Coding 工具指南

Tool Guide

Vibe Coding 主流工具

💜 Lovable

極低門檻，適合完全新手

🧠 Claude Code

CLI 操作，適合進階用戶

💬 ChatGPT

語言理解最強，各層級適用

🛠️ Google Antigravity

專業級工具，功能完整

Lovable

特色

強調人性化互動，適合初學者
介面簡潔直觀，上手容易
支持多種語言指令
即時預覽功能完善
適合

完全沒有程式背景的人

Claude Code

特色

結合強大 AI 模型，支援命令列操作
擴展性強，可整合多種工具
程式碼品質高且可靠
支援複雜邏輯處理
適合

喜歡 CLI、有一定基礎的用戶

ChatGPT Codex

特色

OpenAI 強力支援，語言理解能力頂尖
生成程式碼準確度高
支援多種程式語言
自然語言理解能力最強
適合

各層級用戶

Cursor

特色

桌面應用，集成 AI 輔助編輯器
即時 AI 提示與建議
方便調試與即時修改
整合開發環境完整
適合

開發導向、追求效率的用戶

💡

Google Antigravity

專業級工具，適合複雜專案。強大版本控制功能、團隊協作機制完善。今天我們就用這個工具進行實作！

05

今天的主角

Google Antigravity

“

最好的學習是實踐。準備好了嗎？

06

Google Antigravity 完整指南

Tool Guide

什麼是 Google Antigravity？

Google Antigravity 是一個 AI 驅動的網頁開發工具。它讓你可以用自然語言描述，直接生成網頁程式碼。

支援即時預覽，所見即所得。這是今天工作坊的核心工具。

核心功能

💬

對話式開發

用中文描述你想要的網頁

👁️

即時預覽

立即看到程式碼效果

📦

一鍵匯出

輕鬆匯出完整專案

安裝步驟

1

下載

開啟瀏覽器，前往 Google Antigravity 官網

2

安裝

點擊「下載」你的作業系統版本

3

執行

執行下載的安裝檔

4

設定

按照安裝精靈的指示完成安裝

5

啟動

啟動程式，準備開始！

首次啟動設定

1

啟動

啟動程式後，點擊「登入」

2

登入

使用 Google 帳號登入

3

授權

授權必要的權限

4

設定

完成初始設定精靈

5

完成

看到主畫面就準備好了！

介面總覽

主畫面分為幾個區域：

左側是對話區 — 你主要在這裡與 AI 互動。中間是預覽區 — 即時顯示結果。右側是程式碼區 — 查看生成的程式碼。

Google Antigravity 介面

主要介面區域

💬

對話區

輸入你的需求和指令

👁️

預覽區

即時顯示網頁效果

💻

程式碼區

查看生成的程式碼

對話區使用技巧

使用清晰的中文描述你的需求
可以分多次對話，逐步完善
使用「修改」「調整」「加上」等動詞
可以貼上參考連結或描述
善用「像...一樣」來描述風格

預覽區使用技巧

點擊可以選取元素
拖曳可以調整大小
可以切換桌面/手機預覽
雙擊可以直接編輯文字
右鍵可以查看更多選項

你的第一個 Prompt

PROMPT

請幫我建立一個簡單的自我介紹網頁，包含我的名字、一張照片、和一段自我介紹。風格要現代簡潔。

OUTPUT

就這麼簡單！AI 會幫你生成初版網頁。

基本工作流程

1

輸入

在對話區輸入你的需求

2

等待

等待 AI 生成結果

3

檢視

在預覽區檢視效果

4

修改

如果需要修改，繼續對話

5

滿意

滿意後進行下一步

好的 vs 不好的 Prompt

好的 Prompt

✓ 做一個銷售頁，賣手工皂
✓ 把標題放大，顏色改成藍色
✓ 在產品介紹下方加三個特色卡片
✓ 把按鈕移到右邊
✓ 背景色改成米白色 #fafaf8

不好的 Prompt

✗ 做一個網頁
✗ 好看一點
✗ 改一下
✗ 再調整
✗ 不對

常用指令詞彙

「建立」「做」「生成」 — 創建新內容
「修改」「調整」「改變」 — 變更現有內容
「加上」「新增」「添加」 — 加入新元素
「刪除」「移除」「去掉」 — 移除元素
「放大」「縮小」「調整大小」 — 改變尺寸

常用詞彙分類

🎨 顏色

深、淺、亮、暗、品牌色、色碼

✏️ 字體

大標題、正文、粗體、細體

📐 排版

左對齊、置中、並排、堆疊

🖼️ 圖片

滿版、縮圖、圓角、陰影

如何描述設計風格

描述感覺

「專業的」「活潑的」「溫暖的」
提供參考

「像 Apple 官網那樣簡潔」
說明受眾

「給年輕女性看的」
列出關鍵詞

「現代、簡約、留白」
描述行業

「科技公司的風格」

常見問題排解

程式無法啟動 → 重新啟動電腦
無法登入 → 檢查網路連線
預覽空白 → 清除快取重新開啟
匯出失敗 → 確認儲存空間足夠
反應緩慢 → 關閉其他程式

進階功能

🕐 版本歷史

可以回到之前的任何版本

👥 協作分享

可以分享給他人編輯

📋 模板庫

使用預設模板快速開始

🔌 外掛整合

連接其他常用工具

✍️ Practice

練習時間

1 跟著一起操作
2 現在請打開 Google Antigravity
3 跟著一起操作
4 如果遇到問題，請舉手詢問

⏱ 20 分鐘 📎 記住：不怕犯錯，錯了可以重來！

“

工具只是手段，你的創意才是核心。

07

網站部署與上線

Deployment

什麼是部署？

部署就是把你做好的網站放到網路上，讓所有人都能看到。

我們會使用 Netlify 這個免費服務，透過拖曳上傳的方式，幾分鐘內就能讓你的網站上線！

部署需要的服務

📦

Google Antigravity

匯出你的網站檔案

🌐

Netlify

將檔案變成網站

🔗

你的網址

全世界都能訪問

💡

什麼是 Netlify？

Netlify 是一個靜態網站託管平臺，可以自動將你的程式碼部署成網站。免費方案很夠用，自動 HTTPS 安全連線，全球 CDN 加速。最棒的是，只要拖曳上傳就能完成部署！

部署流程總覽

1

完成

在 Google Antigravity 完成網站

2

匯出

下載網站檔案到電腦

3

登入

登入 Netlify 帳號

4

上傳

拖曳檔案到 Netlify

5

完成

取得你的網址，網站上線！

步驟 1：匯出網站檔案

1

確認

確認網站內容都正確

2

匯出

點擊「匯出」按鈕

3

選擇

選擇「下載 ZIP」

4

儲存

將檔案儲存到桌面

5

解壓

解壓縮下載的 ZIP 檔案

步驟 2：登入 Netlify

1

前往

開啟瀏覽器，前往 netlify.com

2

登入

點擊「Sign up」或「Log in」

3

帳號

選擇「Continue with Email」

4

驗證

完成 Email 驗證

5

進入

進入 Netlify 主畫面

步驟 3：拖曳部署

1

新增

在 Netlify 主畫面找到「Add new site」

2

選擇

選擇「Deploy manually」

3

拖曳

將解壓縮後的資料夾拖曳到上傳區域

4

等待

等待上傳和部署完成

5

完成

取得你的網站網址！

💡

等待部署完成

Netlify 會自動開始部署流程，通常只需要 1-2 分鐘。部署完成後，你會看到一個隨機的網址。恭喜！你的網站上線了！

部署後你會得到

一個可以訪問的網址（如：amazing-site-12345.netlify.app）
自動的 HTTPS 加密
全球 CDN 加速
免費無限流量
可以隨時更新內容

步驟 4：測試網站

1

訪問

點擊 Netlify 給你的網址

2

確認

確認網站正常顯示

3

手機

用手機也開開看

4

測試

點擊所有按鈕確認運作

5

把網址分享給朋友看！

常見問題排解

部署失敗 → 確認檔案結構正確，有 index.html
網站空白 → 確認有正確的 index.html
圖片不顯示 → 確認圖片路徑正確
樣式不對 → 清除瀏覽器快取重試
還是不行 → 刪除後重新上傳

修改後更新網站

1

修改

在 Google Antigravity 做修改

2

匯出

重新匯出 ZIP 檔案

3

進入

進入 Netlify 的 Site settings

4

部署上傳

選擇「Deploys」→「Drag and drop」上傳新檔案

5

完成

Netlify 自動更新網站！

Netlify 進階功能

🔗 自訂網域

使用自己的 .com 網址

📋 表單處理

自動收集表單資料

📊 分析報告

查看網站流量

🔐 密碼保護

設定訪問密碼

07

🎉 恭喜！

你的網站已經上線了！全世界的人都可以看到你的作品

“

你的第一個網站上線了。這只是開始！

08

實作練習與範例

Practice

練習時間

接下來是自由實作時間。你可以繼續完善剛才的銷售頁，或者做一個全新的專案。

不懂就問，多嘗試，享受創作的過程！

練習選項

繼續完善銷售頁

加入更多細節和優化
個人品牌頁

介紹自己和你的作品
活動報名頁

推廣一個活動
作品集網站

展示你的專業和作品
公司官網

介紹一個企業或組織

範例：個人品牌頁

PROMPT

請幫我建立一個個人品牌網站。姓名：王小明，職業：UI 設計師，經歷：5 年。

需要區塊：大頭照和簡短自我介紹、專業技能（3-4 項）、作品展示區（4 個作品）、聯絡方式。

風格：現代、簡潔、專業。顏色：深藍色和白色。

範例：活動報名頁

PROMPT

請幫我建立一個工作坊報名頁。名稱：攝影基礎工作坊。

日期：2026/06/15（六）14:00-17:00，地點：臺北市信義區，費用：800 元，限 20 人。

需要區塊：活動標題和日期、活動介紹和適合對象、講師介紹、課程大綱、報名資訊和按鈕。

風格：文藝、有質感。

練習的建議

先想清楚目標和受眾
準備好基本的文字內容
從簡單的開始，逐步加功能
不要怕犯錯，錯了就改
參考你喜歡的網站

好作品的特質

🎯 目標明確

知道要達成什麼

📝 內容清晰

訪客一看就懂

🎨 視覺一致

風格統一協調

📱 響應良好

各裝置都適用

如何自我評估

訪客 3 秒內能知道這是什麼嗎？
最重要的資訊明顯嗎？
CTA 按鈕容易找到嗎？
在手機上看起來如何？
配色和字體舒適嗎？

常見的改進方向

標題不夠吸引 → 改用利益導向的標題
資訊太多太擁擠 → 刪減或分區塊
CTA 不明顯 → 增加對比度和大小
缺乏信任感 → 加入評價或數據
手機顯示問題 → 調整響應式設計

請 AI 評估你的作品

PROMPT

請幫我檢視這個銷售頁，以一個潛在客戶的角度，告訴我：
1. 第一眼的印象是什麼？
2. 有哪些地方可能會讓我困惑？
3. 什麼會讓我想買？什麼會讓我猶豫？

設計靈感網站

🎨 Dribbble

設計師作品展示平臺

🖼️ Behance

Adobe 的創意作品平臺

🏆 Awwwards

獲獎網站精選

📚 Siteinspire

網頁設計靈感庫

“

每一個作品都是進步，每一次嘗試都有價值。

09

進階技巧與最佳實踐

Advanced Tips

進階 Prompt 技巧

角色扮演

讓 AI 扮演特定專家
思考鏈

讓 AI 先分析再執行
少樣本學習

提供範例讓 AI 模仿
反向思考

問「為什麼不好」而非「怎麼做好」
迭代精煉

逐步優化 Prompt

進階技巧：思考鏈

PROMPT

請分析這個銷售頁的設計，分三步驟進行：

步驟 1：分析 — 目前設計的優點和問題是什麼？
步驟 2：計畫 — 針對每個問題，提出解決方案。
步驟 3：執行 — 執行改動並確認結果。

網頁效能優化

🖼️ 圖片壓縮

減少圖片檔案大小

⚡ 減少請求

合併檔案使用 CDN

💾 善用快取

減少重複載入

📱 行動優先

優先優化手機版

SEO 基礎概念

SEO = 搜尋引擎優化
讓 Google 更容易找到你的網站
重要元素：標題、描述、關鍵字
好的內容是最重要的 SEO
技術優化也很重要

無障礙設計原則

色彩對比要足夠，考慮色盲使用者
圖片要有替代文字（alt text）
支援鍵盤導航
文字大小可以調整
不要只靠顏色傳達資訊

💡

關於 AI 工具的倫理

AI 是工具，使用者要負責任地使用。不要用 AI 生成虛假資訊或誤導性內容。尊重智慧財產權，不要複製他人的設計。對 AI 的輸出保持批判性思考，不要盲目接受。

常用分析工具

📊

Google Analytics

免費且功能完整的流量分析

📈

Netlify Analytics

簡單直觀的內建分析

🔥

Hotjar

熱點圖和使用者行為分析

“

學無止境，保持好奇心是最好的學習態度。

10

課後資源與延伸學習

Resources

課後練習建議

每週做一個小專案練習
把今天的作品分享給朋友
嘗試不同類型的網頁
關注 AI 工具的更新
加入社群和他人交流

課後行動計畫

1

第 1 週

完善今天做的作品，分享給朋友

2

第 2-3 週

嘗試做一個不同類型的網站

3

第 4 週

挑戰更複雜的功能或設計

4

第 2 個月

建立自己的作品集

5

持續

關注新工具和技術

延伸學習建議

學習基礎 HTML/CSS：更好地理解和修改程式碼
研究 UX 設計原則：提升設計品質
關注 AI 發展：新工具和技術不斷出現
多練習不同類型的專案：累積經驗
加入社群：和他人交流學習

常見問題 FAQ

Q: 課後還可以問問題嗎？A: 可以，透過 Email 聯繫
Q: 忘記步驟怎麼辦？A: 參考本簡報或報名參加複訓
Q: 網站可以商用嗎？A: 可以，注意不要侵權
Q: 需要付費嗎？A: 基本使用都是免費的

保持聯繫

有問題隨時發 Email：iamvista@gmail.com
追蹤講師社群帳號：facebook.com/iamvista
網站：https://www.vista.tw
加入學員交流群組
回來複習和更新知識

“

不要害怕失敗，每一次嘗試都是學習的機會。

∞

Keep Vibing, Keep Creating!

你的第一個網站上線了，這只是開始

謝謝參與！

Happy Vibe Coding!

vista.tw ｜ solo.tw

iamvista@gmail.com

Let's Vibe!

需要密碼

Vibe Coding 實戰工作坊

Vista Cheng

課程流程（上半場）

課程流程（下半場）

課程資訊

3 小時實作

零基礎入門

AI 驅動創作

今天你將學會

課前準備確認

學習心態

你比 99% 的人更早開始

準備好了嗎？

AI 時代的新技能

AI 正在改變一切

AI 能做什麼？

傳統方式 vs AI 協作

AI 協作

傳統方式

認識關鍵概念

LLM 大型語言模型

Prompt 提示詞

Vibe Coding

AI 時代的核心能力

為什麼學 Vibe Coding？

Vibe Coding 的優勢

⚡ 快速原型

🔄 迭代修改

📉 低門檻

💡 專注創意

適合 Vibe Coding 的場景

什麼時候用 Vibe Coding？

適合 Vibe Coding

傳統開發更適合

Vibe Coding 核心概念

什麼是 Vibe Coding？

Vibe Coding 的工作流程（一）

Vibe Coding 的工作流程（二）

三個核心概念

對話式開發

迭代改進

結果導向

Vibe Coding 關鍵要素

🎯 清晰的目標

💬 有效的溝通

🔧 適當的工具

🔄 耐心迭代

有效 vs 無效的 Vibe Coding

有效的方式

無效的方式

一個典型的 Vibe Coding 流程（一）

一個典型的 Vibe Coding 流程（二）

描述「Vibe」的方式

常見的 Vibe 詞彙

✨ 現代感

💼 專業感

🎉 活潑感

🌿 自然感

Vibe Coding 的限制

如何克服限制？

新手常見問題

問題

解決方案

Prompt 工程基礎

什麼是 Prompt？

好 Prompt 的特質

🔍 清晰

📌 具體

📖 有上下文

🎯 有限制

Prompt 對比

清晰的 Prompt

模糊的 Prompt

Prompt 的基本結構

範例：完整的 Prompt

提供上下文

描述視覺效果

常用 Prompt 技巧

舉例說明