人人都是開發者

Vibe Coding 如何讓你的創意在 AI 時代落地

國立屏東大學高教深耕計畫｜Vibe Coding 專題講座
Vista Cheng ｜鄭緯筌｜ https://www.vista.tw

Vibe Coding 專題講座

國立屏東大學高教深耕計畫

Vista Cheng ｜鄭緯筌

內容策略顧問｜ Vibe Coding 講師

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

vista.tw — AI 內容策略知識庫solo.tw — 一人公司生態系創辦人長期受邀於大學校院主講 AI 應用講座「Vibe Coding 實戰工作坊」系列課程主講

為什麼是這場講座、為什麼是現在

高教深耕計畫談的是「以學生為本、深化學習」。在 AI 時代，最關鍵的深耕，就是讓老師與同學都有能力把腦中的想法，快速變成看得到、用得到的成果。

今天這三小時，我們不談艱深的程式理論。我們要證明一件事：在屏東大學，無論你是教授、助教還是大一新生，你都可以是開發者。

講座流程（上半場）

01

AI 時代的新技能

為什麼師生都該懂 Vibe Coding
02

Vibe Coding 核心概念

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

Prompt 工程基礎

與 AI 有效溝通的技巧
04

活動宣傳與報名頁設計

把校園創意變成可報名的網頁

講座流程（下半場）

01

工具指南與實戰

Google Antigravity 完整操作
02

網站部署與上線

讓全校都能掃 QR 報名
03

校園應用範例

研討會、社團、競賽、研究成果
04

進階技巧與延伸學習

把能力帶回系所與社團

講座資訊

⏱️

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 萬人

💡

走在校園的最前面

當大多數人還停留在「聽過 AI」的階段，今天坐在這裡的你，將直接進入「用 AI 做出作品」的 0.04%。這就是高教深耕想為屏大師生帶來的領先一步。

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

✓ 快速驗證一個活動點子
✓ 個人或社團的小型網站
✓ 一次性的活動報名頁
✓ 教學示範與課堂實作
✓ 研究成果的對外展示頁

傳統開發更適合

✗ 校務級的複雜系統
✗ 需要與校務資料庫整合
✗ 長期維護的大型平臺
✗ 有嚴格資安與個資需求
✗ 需要工程團隊長期協作

教師端 vs 學生端的應用

老師可以做

課程介紹與選課宣傳頁
研討會徵稿與報名頁
研究計畫成果科普網站
個人學術履歷與著作頁
教學活動報名與回饋收集

學生可以做

社團招生與迎新報名頁
競賽作品集與個人網站
系學會活動宣傳頁
畢業專題成果展示頁
研究所甄試或求職用的線上履歷

💡

高教深耕 × 數位賦能

高教深耕計畫強調培養學生帶得走的能力、鼓勵教師創新教學。Vibe Coding 正是一個交集點：它讓老師能更快做出教學素材，也讓學生擁有一項可以寫進履歷、帶進職場的數位實作能力。

三個屏大可能發生的情境

🎤

研討會前一週

臨時要做報名頁，找不到工讀生寫程式

🎏

社團招生季

想要一頁吸睛的招生頁吸引新生

🔬

計畫結案前

需要把研究成果做成對外科普網站

創意落地的時代

過去，「有想法」和「做出來」之間隔著一道技術高牆，很多好點子就卡在這裡。

Vibe Coding 把這道牆推倒了。從今天起，你和你的想法之間，只剩下一段對話的距離。

AI 已經走進高教現場

👩‍🏫

教學端

備課、出題、教材視覺化

🔬

研究端

文獻整理、資料分析、成果科普

🎓

學習端

自主學習、作品產出、求職準備

“

不是 AI 取代你，
而是會用 AI 的人，先一步。

這也是一種就業競爭力

跨域能力

非資訊科系也能交付數位作品
作品思維

用上線的網頁證明你的執行力
AI 協作

企業最看重的新世代工作方式
問題解決

把抽象需求拆解成可執行步驟
自主學習

高教深耕最想培養的核心素養

“

最好的學習方式是動手做。
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」的方式

風格

現代、學院風、極簡、活潑
情緒

專業、溫暖、嚴謹、青春
參考

像國際研討會官網、像知名實驗室主頁
受眾

給新生看的、給學者看的
領域

人文的、理工的、設計的

“

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

常見的 Vibe 詞彙

✨ 現代感

簡潔、留白、大標題

🎓 學院感

嚴謹、信任、沉穩配色

🎉 青春感

鮮豔、動態、活力

🌿 人文感

柔和、溫暖、有質感

Vibe Coding 的限制

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

如何克服限制？

1

拆解

把大任務拆成小部分

2

排序

決定先做什麼、後做什麼

3

逐一

一次只處理一個部分

4

驗證

每完成一部分就檢查結果

5

整合

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

新手常見問題

問題

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

解決方案

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

💡

把焦慮放下

很多老師會擔心「我不是資訊背景，會不會做不出來？」請放心。Vibe Coding 比較像在指導一位很有耐心的助教：你說明需求、看成果、給回饋。你最強的，正是你的領域專業與表達能力。

“

你負責想，AI 負責做。
這是新的分工。

03

Prompt 工程基礎

Prompt Engineering

什麼是 Prompt？

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

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

“

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

好 Prompt 的特質

🔍 清晰

明確說明你要什麼

📌 具體

提供足夠的細節

📖 有上下文

說明背景與目的

🎯 有限制

設定明確的範圍

Prompt 對比

清晰的 Prompt

✓ 做一個 AI 創新論壇的報名頁
✓ 使用米白背景與深藍標題
✓ 採用學術研討會的專業風格
✓ 把主視覺標題顏色改成 #1a365d
✓ 把講者區改成三欄並排

模糊的 Prompt

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

Prompt 的基本結構

1

角色/情境

「你是一位網頁設計師」

2

任務

「幫我設計一個研討會報名頁」

3

細節

「包含主題、議程、講者、報名表單」

4

風格與限制

「學術專業，深藍配米白」

5

輸出格式

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

範例：完整的 Prompt（研討會報名頁）

PROMPT

請幫我設計一個學術研討會的報名頁。主題是「2026 屏東大學 AI 創新應用論壇」，免費參加，限額 150 人。

需要包含：吸引人的主標題、論壇簡介、四場主題演講、報名表單按鈕。

風格要求：學術、專業又不死板，使用深藍與米白配色，字體要清晰好讀。

提供上下文

說明你是誰

「我代表屏東大學某學系」
說明目標受眾

「給全校師生與校外教育工作者」
說明使用場景

「用於系上社群與海報 QR Code 導流」
說明期望效果

「希望提升報名率與到場率」
說明特殊需求

「需要支援手機瀏覽與無障礙」

描述視覺效果

顏色

「使用學院深藍 #1a365d 與米白色」
排版

「左邊放議程，右邊放報名資訊」
字體

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

「區塊之間要有足夠留白」
效果

「報名按鈕要有 hover 效果」

常用 Prompt 技巧

📝

舉例說明

「像某某研討會官網那樣」

⚖️

對比描述

「要 A 不要 B」

🔢

數字限制

「3 個亮點、5 行文字」

使用參考的 Prompt

PROMPT

請參考國際學術會議官網的風格，設計一個論壇頁面。

要有的元素：像那樣的大型主視覺標題、議程時間軸要清楚、講者介紹用卡片呈現（每位一句話簡介），但配色改用屏東大學的深藍 #1a365d。

修改的 Prompt 技巧

好的修改指令

✓ 把主標題字體放大到 48px
✓ 報名按鈕顏色改成 #1a365d
✓ 議程區域寬度改為 60%
✓ 在標題下方加一條分隔線
✓ 把三欄講者改成兩欄

不好的修改指令

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

有效的修改流程

1

先說明要改什麼

「主標題的部分」

2

說明目前狀態

「現在太小了」

3

說明期望結果

「希望更醒目」

4

給出具體數值

「字體改成 48px」

5

確認其他不變

「其他部分維持原樣」

進階 Prompt 技巧

分步驟進行

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

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

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

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

找到最適合的溝通方式

💡

角色扮演技巧

讓 AI 扮演特定角色可以得到更好的回答。例如：「你是一位有 10 年經驗、擅長學術活動視覺的網頁設計師」，AI 就會從那個角色的視角思考與回答。

避免常見錯誤

不要太模糊

提供具體細節
不要太多

一次專注一件事
不要假設

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

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

有時重新開始更快

單一 vs 複合任務

分開做（推薦）

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

一次做完（困難）

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

Prompt 模板概念

📋

固定結構

每次使用相同的結構

🔄

可替換變數

只換掉需要換的部分

⏰

節省時間

不用每次重新思考

校園活動頁的萬用模板

PROMPT

請幫我做一個【活動類型】頁面。活動名稱：【名稱】，主辦：【系所/社團】，時間：【日期時間】，地點：【地點】，對象：【參加對象】，費用：【免費/金額】，名額：【人數】。

需要區塊：主視覺標題、活動簡介、亮點、流程/議程、報名資訊與按鈕、聯絡方式。

風格：【風格關鍵詞】，配色：【主色】＋米白。

OUTPUT

把【】內的字換成你的活動資訊，就能重複使用。

範例：用模板做社團招生頁

PROMPT

請幫我做一個社團招生頁。活動名稱：吉他社迎新成發暨招生，主辦：屏東大學吉他社，時間：2026/09/18（五）18:30，地點：學生活動中心，對象：全校新生，費用：免費，名額：80。

需要區塊：主視覺標題、社團簡介、三大亮點、歷屆花絮、報名資訊與按鈕、社辦與 IG。

風格：青春有溫度，配色：暖橘＋米白。

OUTPUT

這就是把萬用模板套上實際資訊的成果。

記住這些原則

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

“

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

✍️ Practice

Prompt 練習任務

1 為一個你想辦的校園活動寫第一個 Prompt
2 用一句話描述這個活動頁
3 列出至少三個必要的區塊
4 描述你想要的視覺風格
5 輸入並觀察 AI 的結果
6 根據結果再修改一次

⏱ 10 分鐘

“

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

04

從創意到落地：活動宣傳與報名頁設計

Event Landing Page Design

什麼是活動宣傳報名頁？

活動宣傳報名頁，是專門設計來推廣一場活動、並引導訪客報名的網頁。它的目標只有一個：讓看到的人，採取行動（報名、填表單、來參加）。

在校園裡，研討會、社團招生、競賽徵件、營隊、講座，全都需要這樣一頁。今天我們就用 Vibe Coding 快速做出專業的活動頁。

活動頁的核心目標

1

吸引注意力

讓人在滑手機時停下來

2

建立信任

讓人相信這場活動值得參加

3

說服參加

讓人覺得「我不能錯過」

4

促成報名

讓人立刻填表單報名

活動頁的關鍵元素

📢 吸睛標題

第一眼就抓住注意力

💎 參加價值

為什麼值得花時間來

⭐ 信任背書

講者陣容、主辦單位、歷屆口碑

🎯 報名呼籲

明確告訴他下一步怎麼做

活動頁的標準結構（一）

1

Hero 主視覺

活動名稱 + 一句亮點 + 報名鈕

2

痛點/動機

點出受眾為什麼需要這場活動

3

活動簡介

這場活動會帶給你什麼

4

活動亮點

3-5 個核心賣點

活動頁的標準結構（二）

1

講者/陣容

講者介紹、主辦與合辦單位

2

報名資訊與 CTA

時間地點名額 + 報名按鈕

3

FAQ

解答常見疑問

💡

Hero Section 的重要性

Hero Section 是訪客看到的第一個畫面。你只有 3 秒，讓他決定要不要繼續往下看。標題必須一眼說清楚：這是什麼活動、為什麼跟我有關、什麼時候舉辦。

活動標題的寫法

有效的標題

✓ 3 小時，做出你的第一個網站
✓ 不用會寫程式，也能玩 AI
✓ 全校最有梗的社團，等你加入
✓ 讓你的研究，被更多人看見
✓ 畢業前，幫自己做一個作品集

無效的標題

✗ 歡迎報名本活動
✗ 精彩活動別錯過
✗ 誠摯邀請您參加
✗ 重要活動公告
✗ 社團招生中

活動標題的公式

數字 + 結果

「3 小時做出一個網站」
痛點 + 解決

「不會寫程式？也能…」
權威背書

「業界講師親自帶你…」
時間/門檻

「零基礎、免費、限額 30 名」
社群認同

「全校超過 X 人參加過」

參加價值：為什麼要來？

參加價值回答一個問題：訪客為什麼要花時間來參加你的活動？

它要清楚說明：你提供什麼、給誰、為什麼比其他選擇更值得。好的價值主張是具體、可感受、有差異化的。

範例：撰寫活動的參加價值

PROMPT

請為我的活動寫一段參加價值。

活動資訊：「Vibe Coding 校園實作工作坊」、3 小時、零基礎、免費、現場帶走一個作品。

目標受眾：屏東大學非資訊科系的師生。

需要：一句話核心價值、三個次要亮點、一段 50 字活動簡介。

活動亮點的呈現

🖼️

圖示化

用 icon 搭配一句話

🔢

數字化

「3 小時、1 個作品、0 基礎」

⚖️

對比化

「比看教學影片更快上手」

把特色轉換為參加理由

活動特色

業界講師授課
現場實作
零基礎友善
免費參加
提供完整講義

對參加者的好處

學到第一線實戰經驗
當天就帶走一個作品
沒有程式背景也跟得上
沒有經濟負擔
回去能自己複習延伸

信任背書的力量

人們傾向跟隨他人的選擇，這是心理學的「從眾效應」。看到知名講者、合辦單位與歷屆好評，會大幅降低報名的猶豫。

在校園活動裡，信任背書包括：講者學經歷、主辦/協辦單位、歷屆參加人次、學員回饋、計畫補助標章。

校園活動的信任元素

講者背書

「業界專家／知名學者主講」
數據展示

「歷屆累計超過 500 位師生參加」
單位掛名

「OO 學系主辦、教務處協辦」
學員回饋

真實的參加心得與照片
計畫標章

「高教深耕計畫補助」

CTA：報名行動呼籲

CTA 是 Call To Action 的縮寫，就是告訴訪客「接下來做什麼」。在活動頁，CTA 就是那顆「我要報名」的按鈕。

好的 CTA 要明確、有急迫感、有吸引力。按鈕文字、顏色、位置都會影響報名率。

報名 CTA 按鈕文字

有效的 CTA

✓ 立即免費報名
✓ 搶下最後幾個名額
✓ 我要參加這場工作坊
✓ 加入我們，3 分鐘完成報名
✓ 限額 30 名 → 立即卡位

普通的 CTA

✗ 提交
✗ 報名
✗ 確認
✗ 下一步
✗ 點擊這裡

CTA 的設計原則

顏色突出

和背景形成對比
大小適中

夠大但不誇張
位置明顯

首屏與頁尾都要有
文字行動導向

用動詞開頭
營造急迫感

「限額」「報名截止日」

報名資訊呈現技巧

🆓 強調免費

「全程免費，名額有限」降低門檻

⏳ 名額稀缺

「僅剩 12 個名額」製造急迫

📅 截止提醒

「報名截止 6/10」推一把

🎁 參加好禮

「完課贈電子講義與證書」

💡

響應式設計

校園活動的報名連結，絕大多數是學生在手機上點開的。文字在手機上要夠大、易讀；報名按鈕要夠大、好按；圖片要自動縮放；最重要的活動時間與報名鈕，要在第一屏就看得到。

活動頁設計原則

✨ 簡潔

減少不必要的元素

🎯 聚焦

每個區塊一個目的

➡️ 引導

視覺動線導向報名鈕

📱 適應

手機優先，各裝置都能看

活動頁製作流程

1

確定目標

辦什麼活動？給誰？要他做什麼

2

準備內容

文案、講者、時間地點、報名連結

3

設計架構

決定區塊順序

4

撰寫 Prompt

用 AI 生成初版

5

預覽上線

持續優化，確認後部署

範例：建立研討會報名頁

PROMPT

請幫我建立一個學術研討會的報名頁。

活動資訊：名稱「2026 屏東大學 AI 創新應用論壇」、時間 2026/06/20（六）09:00-17:00、地點 屏東大學民生校區國際會議廳、免費、限額 150 人、報名截止 6/12。

需要區塊：Hero 主視覺 + 論壇簡介 + 四場主題演講議程 + 講者介紹 + 主辦協辦單位 + 報名資訊與按鈕 + FAQ。

風格：學術、專業、沉穩。配色：學院深藍 #1a365d + 米白色。

報名表單，越短越好

再吸引人的活動頁，若報名表單欄位一長串，學生填到一半就放棄了。每多一個欄位，都會流失一些報名。

原則很簡單：只問這次活動真正需要的資訊，其他等活動當天再說。

報名表單的欄位原則

只留必填

姓名、Email 通常就夠
善用選項

用下拉/單選取代手打
說明用途

為什麼要學號要講清楚
手機友善

欄位夠大、鍵盤正確
送出有回饋

明確顯示「報名成功」

同一套邏輯，多種校園場景

你會發現：研討會頁、社團招生頁、競賽徵件頁，骨架其實一模一樣——吸引注意、說明價值、建立信任、促成行動。

換的只是內容。學會一種，你就會做所有校園活動頁。

校園活動頁的常見類型

🎤 研討會/講座

重點在議程與講者陣容

🎏 社團招生

重點在氛圍、活動花絮與認同

🏆 競賽徵件

重點在獎項、規則與截止日

⛺ 營隊招生

重點在課表、師資與報名梯次

活動頁上線後，怎麼擴散？

把網址做成 QR Code，放進海報與簡報
丟進系上、班級與社團群組，附一句亮點
請主辦師長與幹部協助轉發
在校園社群與 IG 限動露出
活動前三天再推一次「最後倒數」

校園擴散管道

📱 班級群組

最直接、轉換最高

📸 系所 IG

觸及新生與跨系學生

📋 實體海報

搭配 QR 在系館與餐廳

📧 師長轉發

信任背書、提高到場率

活動頁常見的踩雷

標題只寫活動名稱，看不出能得到什麼
報名按鈕藏在最下面，要滑很久才找到
活動時間地點寫得很模糊
資訊太多太擠，重點被淹沒
手機上字太小、按鈕太難按

✍️ Practice

實作練習清單

1 建立你的第一個活動報名頁
2 建立 Hero 主視覺與一句亮點
3 新增活動簡介與參加動機
4 設計 3-5 個活動亮點區塊
5 加入講者/主辦單位區
6 設計報名資訊與報名按鈕
7 新增 FAQ
8 優化手機響應式版面

⏱ 30 分鐘

04

開始實作！

現在我們要實際做出一個活動報名頁

“

活動頁的目標是促成報名，
每個元素都要服務這個目標。

Vibe Coding Prompt 產生器

掃描 QR Code，快速產生你的活動頁 Prompt
https://www.vista.tw/workshop/vibe-coding/tool/

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

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

常用指令詞彙

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

常用詞彙分類

🎨 顏色

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

✏️ 字體

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

📐 排版

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

🖼️ 圖片

滿版、縮圖、圓角、陰影

如何描述設計風格

描述感覺

「專業的」「活潑的」「學院的」
提供參考

「像國際研討會官網那樣簡潔」
說明受眾

「給準備報名的新生看的」
列出關鍵詞

「現代、簡約、留白」
描述領域

「人文學院的沉穩風格」

出問題時怎麼跟 AI 說

「這個區塊沒有出現，請重新加上」
「手機版報名鈕跑版了，請修正」
「這段文字看不清楚，對比度調高」
「回到上一個版本的排版」
「先別動其他地方，只改這一段」

卡住時的除錯流程

1

描述現象

明確說「哪裡」「怎麼了」

2

先回上一版

用版本歷史退回可用狀態

3

縮小範圍

一次只改一個地方

4

換個說法

同需求用不同描述再試

5

重新開始

卡太久就果斷重做該區塊

常見問題排解

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

進階功能

🕐 版本歷史

可以回到之前的任何版本

👥 協作分享

可以分享給共同主辦者編輯

📋 模板庫

使用預設模板快速開始

🔌 外掛整合

連接其他常用工具

💡

善用版本歷史

改著改著覺得越改越差，這很正常。Antigravity 的版本歷史就像研究草稿的備份：你可以大膽嘗試，不滿意就一鍵回到上一個版本。放膽去試，是 Vibe Coding 進步最快的方法。

✍️ Practice

練習時間

1 跟著一起操作
2 現在請打開 Google Antigravity
3 跟著講師一起操作
4 遇到問題請舉手詢問，助教會過去

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

“

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

07

網站部署與上線

Deployment

什麼是部署？

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

我們會用 Netlify 這個免費服務，透過拖曳上傳，幾分鐘內就能讓你的活動頁上線，馬上能掃 QR 報名！

部署需要的服務

📦

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

新增

在主畫面找到「Add new site」

2

選擇

選擇「Deploy manually」

3

拖曳

把解壓後的資料夾拖到上傳區

4

等待

等待上傳與部署完成

5

完成

取得你的網站網址！

💡

等待部署完成

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

部署後你會得到

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

步驟 4：測試網站

1

訪問

點擊 Netlify 給你的網址

2

確認

確認網站正常顯示

3

手機

用手機也開開看

4

測試

點所有按鈕、試填報名表單

5

把網址分享給同學與同事看！

常見問題排解

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

活動資訊更新後重新部署

1

修改

在 Google Antigravity 改內容

2

匯出

重新匯出 ZIP 檔案

3

進入

進入 Netlify 的 Site 設定

4

上傳

在「Deploys」拖曳上傳新檔案

5

完成

Netlify 自動更新網站！

Netlify 進階功能

🔗 自訂網域

綁系所或社團專屬網址

📋 表單處理

自動收集報名表單資料

📊 分析報告

查看活動頁瀏覽量

🔐 密碼保護

設定內部活動的訪問密碼

把活動頁變成 QR 報名

1

複製

複製 Netlify 給你的網址

2

產生

用免費工具轉成 QR Code

3

放置

放進海報、簡報與社群圖

4

測試

自己手機掃一次確認可開

5

追蹤

上線後觀察報名數變化

💡

把網址變成校園 QR Code

活動頁上線後，把網址用免費工具轉成 QR Code，放進海報、簡報、系上社群與班級群組。學生掃碼就能直接報名——這就是「創意落地」最有感的一刻。

07

🎉 恭喜！

你的活動頁已經上線了！全校師生都能掃碼報名你的活動

“

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

08

校園實作範例與練習

Campus Practice

練習時間

接下來是自由實作時間。你可以繼續完善剛才的活動頁，或者挑一個跟你最相關的校園專案來做。

不懂就問，多嘗試，享受把點子變成作品的過程！

練習選項

研討會/講座報名頁

系所學術活動宣傳
社團招生頁

招收新血、介紹社團
競賽徵件頁

校內競賽或專題徵集
個人學術網站

教師或研究生主頁
作品集網站

學生求職與專題展示

範例：教師個人學術網站

PROMPT

請幫我建立一個大學教師的個人學術網站。姓名：王教授，系所：屏東大學某學系，研究領域：教育科技與 AI 應用。

需要區塊：個人照片與簡介、研究興趣（3-4 項）、代表著作清單、開設課程、聯絡方式。

風格：學院、沉穩、專業。配色：深藍與白色。

範例：社團招生頁

PROMPT

請幫我建立一個社團招生頁。社團：屏東大學攝影社。

需要區塊：吸睛主視覺與一句招生標語、社團介紹、三大活動亮點、歷屆作品花絮、迎新時間與報名表單按鈕、社辦位置與聯絡 IG。

風格：青春、有溫度、視覺感強。配色：暖色系搭配米白。

範例：研討會徵稿頁

PROMPT

請幫我建立一個學術研討會的徵稿頁。名稱：2026 跨域數位人文研討會。

需要區塊：研討會主旨、徵稿主題（5 個子題）、投稿時程表、投稿格式與規定、線上投稿按鈕、聯絡信箱。

風格：嚴謹、學術。配色：深藍與米白，重點用金色點綴。

範例：競賽徵件頁

PROMPT

請幫我建立一個校內競賽的徵件頁。競賽：屏東大學 AI 創意應用大賽。

需要區塊：競賽主視覺與標語、競賽簡介、獎項與獎金、參賽資格與規則、重要時程（報名/初審/決賽）、報名按鈕、常見問題。

風格：年輕、有競賽張力。配色：深色背景搭配亮色強調。

範例：研究計畫成果科普頁

PROMPT

請幫我把一個研究計畫做成對外科普網站。計畫主題：在地文化數位保存。

需要區塊：一句話講清楚計畫在做什麼、研究背景與重要性、三項主要成果、團隊成員、成果影片或圖片區、延伸閱讀與聯絡方式。

風格：清楚、好讀、給一般大眾看。配色：溫暖人文風。

範例：學生作品集網站

PROMPT

請幫我建立一個學生求職用的個人作品集網站。姓名：林同學，科系：視覺設計，畢業年：2027。

需要區塊：簡短自我介紹與一句個人標語、專長技能、4 件代表作品（含縮圖與說明）、學經歷、聯絡方式與履歷下載。

風格：現代、簡潔、有個人風格。配色：黑白為主，一個重點色。

練習的建議

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

好作品的特質

🎯 目標明確

知道要達成什麼

📝 內容清晰

訪客一看就懂

🎨 視覺一致

風格統一協調

📱 響應良好

各裝置都適用

如何自我評估

訪客 3 秒內能知道這是什麼活動嗎？
最重要的資訊（時間、報名）明顯嗎？
報名按鈕容易找到嗎？
在手機上看起來如何？
配色與字體舒適嗎？

常見的改進方向

標題不夠吸引 → 改用利益導向的標題
資訊太多太擠 → 刪減或分區塊
報名鈕不明顯 → 增加對比與大小
缺乏信任感 → 加入講者陣容或歷屆數據
手機顯示問題 → 調整響應式設計

請 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 協助製作的素材要符合校方規範與研究倫理，對 AI 的輸出保持批判性思考，不盲目接受。

常用分析工具

📊

Google Analytics

免費且完整的流量分析

📈

Netlify Analytics

簡單直觀的內建分析

🔥

Hotjar

熱點圖與使用者行為分析

AI 生成內容務必事實查核

活動日期、地點請以正式公文為準
講者頭銜、學經歷務必本人確認
獎金、補助金額不可由 AI 自行填寫
引用數據要附得出來源
對外公開前，請人再讀一次

💡

報名資料的隱私責任

活動頁常會收集姓名、學號、Email。請只蒐集真正必要的欄位，明確說明用途，活動結束後妥善刪除。這不只是技術，更是身為教育工作者與學生應有的個資意識。

“

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

10

課後資源與延伸學習

Resources

課後練習建議

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

課後行動計畫

1

第 1 週

完善今天的作品，分享給系上

2

第 2-3 週

做一個不同類型的校園網頁

3

第 4 週

挑戰更複雜的功能或設計

4

第 2 個月

建立自己的作品集

5

持續

關注新工具與技術

延伸學習建議

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

把 Vibe Coding 帶回系所與社團

今天的能力，最大的價值不在這三小時，而在你回去之後。下一場研討會、下一次社團招生、下一個研究計畫結案，你都可以親手把它做出來。

當你做給身邊的人看，這套能力就會在屏東大學擴散——這正是高教深耕希望看到的種子。

校園應用點子清單

系學會幹部招募與活動報名頁
畢業專題/論文成果線上展
教師授課大綱與選課宣傳頁
營隊招生與梯次報名頁
校內競賽徵件與得獎公告頁

常見問題 FAQ

Q．講座後還能提問嗎？

可以，隨時透過 Email 與講師聯繫
Q．忘記操作步驟怎麼辦？

可回看本簡報或工具操作流程
Q．網站可以校內公開使用嗎？

可以，但請注意不要侵犯他人著作權
Q．需要付費嗎？

今天用到的工具，基本使用都免費

保持聯繫

✉️ 來信提問

iamvista@gmail.com
👤 追蹤講師

facebook.com/iamvista
🌐 官方網站

https://www.vista.tw
💬 交流社群

加入學員學習交流群組
🔁 持續學習

回來複習與更新知識

“

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

∞

Keep Vibing, Keep Creating!

在屏東大學，人人都可以是開發者

謝謝屏東大學的師生！

Happy Vibe Coding!

國立屏東大學高教深耕計畫｜Vibe Coding 專題講座

vista.tw ｜ solo.tw ｜ iamvista@gmail.com

讓你的創意，今天就落地！

需要密碼

人人都是開發者

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

傳統開發更適合

教師端 vs 學生端的應用

老師可以做

學生可以做

高教深耕 × 數位賦能

三個屏大可能發生的情境

研討會前一週

社團招生季

計畫結案前

創意落地的時代

AI 已經走進高教現場

教學端

研究端

學習端

這也是一種就業競爭力

Vibe Coding 核心概念

什麼是 Vibe Coding？

Vibe Coding 的工作流程（一）

Vibe Coding 的工作流程（二）

三個核心概念

對話式開發

迭代改進

結果導向

Vibe Coding 關鍵要素

🎯 清晰的目標

💬 有效的溝通

🔧 適當的工具

🔄 耐心迭代

有效 vs 無效的 Vibe Coding

有效的方式

無效的方式

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

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

描述「Vibe」的方式

常見的 Vibe 詞彙

✨ 現代感

🎓 學院感

🎉 青春感

🌿 人文感

Vibe Coding 的限制

如何克服限制？

新手常見問題

問題

Vista Cheng ｜鄭緯筌