行銷人的 AI 超能力
從企劃到上線，3 小時搞定
Vista Cheng ｜ 鄭緯筌
https://www.vista.tw
Vista Cheng
AI 內容策略顧問 ｜ Vibe Coding 佈道者
《ChatGPT提問課》作者。專注 AI 驅動的內容與商業策略，協助超過 200 家企業導入 AI 工作流。近年深耕 Claude Code 與 Vibe Coding 應用，幫助非技術背景的創作者與行銷人用 AI 打造數位作品。
今日課程地圖（上半場）
-
01
AI 時代的行銷變革
為什麼行銷人需要學 AI 工具？
-
02
認識 Claude Code
你的 AI 程式設計夥伴
-
03
Cowork 協作模式
讓 AI 成為你的行銷團隊
-
04
Vibe Coding 核心概念
用對話取代程式碼
-
05
實戰：銷售頁製作
從零打造高轉換銷售頁
今日課程地圖（下半場）
-
01
實戰：品牌形象網頁
建立專業品牌數位門面
-
02
實戰：活動報名系統
打造完整的活動管理體驗
-
03
部署與上線
讓全世界看到你的作品
-
04
行銷工作流整合
把 AI 融入日常行銷工作
-
05
延伸學習與下一步
持續精進的完整資源
課程三大保證
零程式基礎
完全不需要會寫程式 只要會打字就能上手
帶走成品
今天就帶走可上線的 銷售頁、網頁、報名系統
即學即用
明天就能在工作中 直接應用的 AI 工作流
未來的行銷人不是被 AI 取代， 而是被「會用 AI 的行銷人」取代。
— Vista Cheng
2026 AI 行銷趨勢觀察
今天你將學會
認知升級
理解 AI 工具如何徹底改變行銷工作方式
工具上手
熟悉 Claude Code 與 Cowork 的操作流程
思維轉換
掌握 Vibe Coding「對話式開發」的核心心法
實戰產出
獨立完成銷售頁、品牌網頁、報名系統
工作整合
設計自己的 AI 行銷工作流
課前環境確認
-
筆電已開機且電量充足
確保能持續 3 小時的實作
-
已連上現場 WiFi
穩定的網路連線是必要條件
-
已有 Claude 帳號
今天的主角，Pro 或 Max 方案
-
瀏覽器已開啟
Chrome 或 Arc 推薦
-
準備好你的產品或服務資訊
實作時會用到
3小時
從零到上線
不寫一行程式碼，完成三個行銷數位作品，並部署到全世界都能看到的網址上。
學習心態
今天的課程重點不在「技術」，而在「思維」。你已經具備最重要的能力——對產品的理解、對用戶的洞察、對市場的敏銳度。AI 只是放大這些能力的超級工具。
01
AI 時代的行銷變革
為什麼行銷人需要新工具？
72%
行銷人已在使用 AI
根據 2025 年 HubSpot 調查，72% 的行銷專業人士已經在日常工作中使用某種形式的 AI 工具。
行銷科技演進史
社群行銷興起
Facebook 改變品牌互動
行銷自動化
HubSpot、Mailchimp
數據驅動
GA、A/B Testing 成標配
AI + Vibe Coding
對話即開發的新時代
傳統行銷 vs AI 行銷
傳統做法
- ✓ 找設計師做銷售頁，等 2 週
- ✓ 外包網頁開發，花 5 萬起跳
- ✓ 報名系統用第三方，月費不便宜
- ✓ 修改一個按鈕顏色要開需求單
- ✓ 跨部門溝通成本極高
AI 新做法
- ✗ 自己用 AI 做銷售頁，2 小時完成
- ✗ Vibe Coding 做網頁，零成本
- ✗ 客製報名系統，完全符合需求
- ✗ 想改就改，即時調整上線
- ✗ 一個人就是一個團隊
AI 帶來的行銷效率提升
10x
內容產出速度
原本 1 週的文案，1 小時完成
80%
開發成本節省
不再需要外包基礎網頁開發
5min
修改上線時間
從提出修改到上線，只要 5 分鐘
24/7
AI 隨時待命
不用等設計師、工程師上班
一個真實案例
小美是一位電商品牌的行銷經理。上週五下午 4 點，老闆突然說：「週一要一個新品上市的銷售頁！」
以前，這代表一場災難——找設計師、寫需求文件、來回修改、套版⋯⋯至少要兩週。
但這一次，小美打開 Claude Code，用 Vibe Coding 的方式，花了 2 小時就做出了一個精美的銷售頁。週一早上，老闆看到成品時，以為是外包公司做的。
這不是科幻故事，這是 2026 年行銷人的日常。今天的課程結束後，你也能做到。
行銷人常見的四大痛點
預算有限
行銷預算年年被砍，但產出要求只增不減。外包設計和開發的費用越來越難申請。
時程緊迫
活動頁要昨天就上線、銷售頁要明天就好、老闆的想法每天都在變。
跨部門卡關
跟工程師解釋需求像在說外星語，設計師的排程永遠排不進你的案子。
迭代困難
想做 A/B Testing？光改一個標題就要走一遍開發流程。
AI 如何解決這些痛點
-
預算歸零
用 AI 工具自己做，不需要外包費用
-
速度飛快
從構想到上線，幾小時內完成
-
自主掌控
不用再跟工程師「溝通」，自己就是工程師
-
快速迭代
想改就改，5 分鐘內重新上線
-
品質不打折
AI 產出的程式碼品質，不輸初級工程師
最好的行銷工具，是讓你 「想到就能做到」的工具。
— 行銷科技的終極目標
行銷人的技能樹正在改變
傳統行銷人的技能樹：文案撰寫、市場分析、廣告投放、品牌策略、客戶關係管理。這些依然重要，但不再足夠。
2026 年的行銷人，還需要加上：AI 工具操作、Prompt Engineering、基礎的數位素養、以及——今天要教你的——用 AI 直接產出數位作品的能力。
這不是要你變成工程師或設計師。而是讓你擁有「最後一哩路」的執行力——把腦中的行銷創意，直接變成消費者看得到的數位體驗。
AI 行銷的投資報酬率
20x
內容產出效率
同樣時間能產出 20 倍的行銷素材
NT$0
開發工具成本
Claude Code 包含在訂閱中，無額外費用
30min
頁面製作時間
從無到有完成一個銷售頁
95%
學員滿意度
過去工作坊學員的回饋評分
2026 行銷人必備的三種 AI 工具
AI 對話助手
ChatGPT、Claude 等 用於文案、策略、分析
AI 開發工具
Claude Code、Cursor 用於建立數位作品
AI 協作平臺
Cowork、Artifacts 用於團隊協作與工作流
為什麼選 Claude Code？
-
最強大的 AI 程式助手
Anthropic 出品，程式碼品質業界頂尖
-
對話式操作
用自然語言描述需求，AI 自動產出程式碼
-
終端機整合
直接在你的電腦上建立、修改、部署檔案
-
安全可靠
程式碼在你的電腦上執行，資料不外流
-
搭配 Cowork 更強大
團隊協作與自動化工作流的完美組合
Claude Code 不是要取代工程師，而是讓行銷人擁有「直接把想法變成作品」的能力。你依然需要行銷的專業判斷，AI 只是幫你跨過技術的門檻。
行銷人的 AI 工具箱
內容層面
- ChatGPT / Claude → 文案撰寫
- Midjourney / DALL-E → 視覺素材
- Gamma / 簡報 AI → 提案簡報
- Notion AI → 企劃文件
技術層面
- Claude Code → 網頁開發
- Cowork → 工作流自動化
- Vibe Coding → 對話式建站
- Cloudflare / Netlify → 一鍵部署
今天的學習路徑
了解
掌握 AI 行銷工具的生態系
體驗
親手操作 Claude Code 與 Cowork
學會
Vibe Coding 的核心心法
實作
完成三個行銷數位作品
整合
設計你自己的 AI 行銷工作流
10x
效率倍增
根據實際案例統計，導入 AI 工具後的行銷團隊，在網頁和素材產出上的效率平均提升 10 倍以上。
行銷人 AI 轉型的四個階段
觀望期
還在猶豫要不要學 AI 工具。看別人用，自己還沒開始。今天你已經跨出這一步！
嘗試期
開始用 AI 做一些簡單任務。文案、摘要、翻譯。這是大多數人停留的階段。
整合期
把 AI 融入日常工作流。不只是偶爾用，而是系統性地用 AI 提升效率。
創新期
用 AI 做到以前做不到的事。自己做銷售頁、做系統、做自動化。這是今天的目標！
暖身練習：盤點你的行銷需求
- 1 花 3 分鐘，列出你目前工作中最想用 AI 解決的 3 個痛點
- 2 想想哪些事情讓你最頭痛？
- 3 哪些任務花了你最多時間？
- 4 哪些專案因為技術限制而無法執行？
- 5 寫在筆記本或手機備忘錄裡，課程結束時我們會回來看
02
認識 Claude Code
你的 AI 程式設計夥伴
什麼是 Claude Code？
Claude Code 是 Anthropic 推出的 AI 程式設計助手。它不只是一個聊天機器人，而是一個能直接在你的電腦上建立和修改檔案的強大工具。
想像一下：你只要用中文描述「我想要一個有漸層背景的銷售頁，上面有產品圖片、三個賣點、客戶見證，和一個購買按鈕」，Claude Code 就會幫你寫出完整的網頁程式碼。
對行銷人來說，Claude Code 就像雇了一個 24 小時待命的全端工程師，而且他聽得懂中文、不會鬧脾氣、修改永遠不收加急費。
Claude Code vs 其他 AI 工具
Claude Code
- ✓ 直接在你的電腦上建立檔案
- ✓ 自動管理整個專案結構
- ✓ 可以執行指令、安裝套件
- ✓ 了解你的完整專案脈絡
- ✓ 持續記得你的偏好與風格
一般 AI 聊天
- ✗ 只能在對話框裡給你程式碼
- ✗ 你需要自己複製貼上到檔案
- ✗ 無法直接操作你的電腦
- ✗ 不知道你的專案結構
- ✗ 每次對話都要重新說明
Claude Code 的三大核心能力
讀寫檔案
直接在你的電腦上 建立、讀取、修改任何檔案
執行指令
安裝套件、啟動伺服器 部署網站，一句話搞定
理解脈絡
記得整個專案的結構 和你之前的所有對話
Claude Code 安裝步驟
訂閱 Claude Pro / Max
前往 claude.ai 訂閱，建議 Max 方案
安裝 Node.js
前往 nodejs.org 下載安裝最新版
開啟終端機
Mac 按 Command+空白鍵，搜尋 Terminal
安裝 Claude Code
輸入 npm install -g @anthropic-ai/claude-code
啟動 Claude Code
在任何資料夾輸入 claude 即可開始
安裝 Claude Code
# 1. 安裝 Claude Code npm install -g @anthropic-ai/claude-code # 2. 建立專案資料夾 mkdir my-marketing-project cd my-marketing-project # 3. 啟動 Claude Code claude
Welcome to Claude Code! /help for available commands /quit to exit claude> _
Claude Code 基本操作
-
直接輸入中文
不需要任何特殊語法，就像跟人說話一樣
-
描述你想要的結果
告訴它「我要一個⋯⋯」就好
-
可以追加修改
說「把標題改大一點」「換個顏色」
-
按 Enter 送出
等 AI 產出結果，通常幾秒到幾十秒
-
輸入 /help 看指令
常用指令一覽表
你的第一次對話
claude> 幫我建立一個簡單的 HTML 網頁， 標題是「歡迎來到我的品牌」， 背景用淡藍色漸層
我來幫你建立這個網頁。 ✓ Created index.html 已建立 index.html，包含： - 淡藍色漸層背景 - 置中的標題「歡迎來到我的品牌」 - 響應式設計 要預覽嗎？我可以幫你開啟瀏覽器。
AI 自動產生的程式碼（你不用自己寫！）
<style>
body {
background: linear-gradient(135deg,
#e0f0ff, #b3d9ff);
display: flex;
align-items: center;
justify-content: center;
}
h1 { font-size: 3rem; color: #1a365d; }
</style>
<h1>歡迎來到我的品牌</h1>重要觀念
你不需要「看懂」程式碼！就像你不需要理解汽車引擎的運作原理才能開車。你只要知道怎麼跟 AI「說話」，告訴它你要什麼結果就好。
0 行
你需要自己寫的程式碼
整個課程中，你完全不需要自己寫任何一行程式碼。所有的技術部分都由 Claude Code 代勞。
Claude Code 的對話流程
描述需求
用中文說出你想要的網頁或功能
AI 產出程式碼
自動寫出檔案，直接存到你的電腦
預覽確認
在瀏覽器中開啟看效果
追問修改
不滿意就繼續說，直到滿意為止
部署上線
一行指令發布到網路上
一個行銷經理的 Claude Code 日常
早上 9 點，小美打開 Claude Code，跟 AI 說：「幫我做一個母親節活動的 Landing Page，要溫馨的粉色系。」10 分鐘後，頁面完成。
10 點，老闆看了覺得不錯，但想改成「限時 48 小時」的倒數計時活動。小美跟 AI 說：「加一個倒數計時器，48 小時後自動跳轉到已結束頁面。」5 分鐘搞定。
下午 2 點，行銷長要求同時做一個 A/B 版本測試不同標題的轉換率。小美跟 AI 說：「複製一份，標題改成 XXX，其他不變。」3 分鐘完成。
下午 4 點，兩個版本都部署上線，開始追蹤數據。這些工作如果外包，至少要 2 週；自己做，半天搞定。
Claude Code 能幫行銷人做什麼？
銷售頁 / Landing Page
產品上市頁、活動頁、預購頁、限時優惠頁，各種高轉換銷售頁面
品牌形象網站
公司官網、個人品牌頁、作品集、關於我們頁面
活動報名系統
工作坊報名、研討會註冊、線上課程登記、活動管理後臺
行銷素材
EDM 模板、社群貼文圖、數據報告頁、客戶案例展示
Claude Code 的常用指令
-
/help
顯示所有可用指令
-
/clear
清除對話紀錄，重新開始
-
/compact
壓縮對話紀錄，節省記憶體
-
/cost
查看目前使用量與費用
-
Shift+Enter
多行輸入，適合長描述
Claude Code 的兩種使用方式
終端機模式
- 在 Terminal 中輸入 claude
- 用指令列操作
- 適合熟悉終端機的用戶
- 功能最完整
IDE 整合模式
- 在 VS Code 中安裝擴充套件
- 圖形化介面操作
- 適合喜歡視覺介面的用戶
- 可以直接看到檔案變化
Claude Code 的工作原理
當你在 Claude Code 輸入一段描述時，背後發生了什麼事？
首先，你的文字會被送到 Anthropic 的 AI 模型進行理解。AI 會分析你的意圖、你想要的功能、視覺風格、和技術需求。
接著，AI 會產生相應的程式碼，並直接寫入你電腦上的檔案。整個過程就像有一個工程師坐在你旁邊，聽你說話然後動手做。
最重要的是——所有檔案都在你的電腦上。你擁有完整的控制權，隨時可以修改、備份、或部署。
跟 Claude Code 溝通的基本技巧
說清楚目的
「我要做一個產品銷售頁」比「幫我做個網頁」好
描述受眾
「給 30-40 歲女性看的保養品頁面」
指定風格
「簡約風、用大地色系、字體要優雅」
列出功能
「需要產品圖片區、三個賣點、客戶見證、購買按鈕」
給具體內容
直接給產品名稱、價格、文案，比讓 AI 瞎猜好
完整的需求描述
claude> 幫我做一個線上課程的銷售頁 課程名稱：「社群行銷實戰班」 目標受眾：中小企業主和行銷新手 價格：NT$3,980（原價 NT$6,800） 需要的區塊： 1. 首屏 Hero：課程名稱 + 一句話賣點 + CTA 按鈕 2. 痛點區：列出目標受眾常見的 3 個問題 3. 課程大綱：6 個單元的標題和簡述 4. 講師介紹：照片 + 經歷 5. 學員見證：3 則好評 6. 價格區：價格 + 優惠倒數 + 購買按鈕 風格：現代簡約、用深藍和白色、字體要大方
Prompt 寫法比較
❌ 模糊的描述
- ✓ 幫我做一個網頁
- ✓ 要好看一點
- ✓ 加一些東西上去
- ✓ 改一下顏色
- ✓ 再調整調整
✓ 精確的描述
- ✗ 做一個銷售頁，賣線上課程
- ✗ 用深藍色 + 白色，簡約風格
- ✗ 加三個賣點卡片和客戶見證區
- ✗ 把主色從藍色改成 #2D5F9A
- ✗ 把 CTA 按鈕放大 20%，改成橘色
跟 AI 溝通的能力， 就是新時代行銷人的核心競爭力。
— Vista Cheng
Claude Code 的計費方式
-
Claude Pro 方案
月費 US$20，有基本用量
-
Claude Max 方案
月費 US$100 或 US$200，大量使用適合
-
以 Token 計費
輸入和輸出的文字量決定費用
-
建議從 Pro 開始
大多數行銷場景 Pro 就足夠
-
重度使用者選 Max
每天都在做專案的話，Max 更划算
實作 1：安裝 Claude Code 並說 Hello
- 1 按照步驟安裝 Claude Code，並完成你的第一次對話
- 2 步驟 1：開啟終端機（Terminal）
- 3 步驟 2：輸入 npm install -g @anthropic-ai/claude-code
- 4 步驟 3：建立資料夾 mkdir my-project && cd my-project
- 5 步驟 4：輸入 claude 啟動
- 6 步驟 5：輸入「幫我建立一個歡迎頁面，用我的名字」
- 7 步驟 6：在瀏覽器中開啟產出的 index.html 檔案
常見問題排解
-
npm 指令找不到？
需要先安裝 Node.js → nodejs.org
-
claude 指令找不到？
重新開啟終端機，或檢查 PATH 設定
-
登入失敗？
確認 Claude 帳號已訂閱 Pro 或 Max
-
回應太慢？
可能是網路問題，或是 AI 正在處理大量內容
-
看不懂錯誤訊息？
直接把錯誤訊息貼給 Claude Code，它會自己修
遇到錯誤不要慌！最厲害的用法是：直接把錯誤訊息貼給 Claude Code，然後說「幫我修這個問題」。AI 解決自己產生的 Bug，比你想像中還厲害。
Claude Code 進階小技巧
-
給它參考圖片
「參考這個網站的風格：URL」
-
分階段做
先做骨架，再加細節，最後調整風格
-
善用追問
「不錯，但把字再大一點、間距再寬一些」
-
存檔備份
滿意一個版本後，先 commit 再繼續改
-
用 CLAUDE.md
把你的偏好寫在這個檔案裡，AI 會自動遵守
Claude Code 的權限控制
AI 可以做的
- 在指定資料夾建立/修改檔案
- 執行你同意的指令
- 安裝前端開發套件
- 啟動本機預覽伺服器
AI 不會做的
- 存取你電腦的其他資料
- 自動把檔案上傳到網路
- 修改系統設定
- 未經同意執行危險指令
Claude Code 的安全機制
-
權限確認
執行敏感操作前，Claude Code 會先詢問你的同意
-
本機執行
所有程式碼都在你的電腦上運行，不會上傳
-
沙盒模式
預設在安全模式下運行，防止意外操作
-
透明記錄
所有操作都會在終端機中顯示，你可以隨時查看
-
一鍵停止
按 Ctrl+C 隨時中斷 AI 的操作
建立你的 AI 偏好設定檔
claude> 幫我建立 CLAUDE.md 檔案，內容包含： # 專案偏好 - 語言：繁體中文 - 風格：簡約現代 - 主色：#2D5F9A（深藍） - 輔色：#FF6B35（橘色） - 字體：Noto Sans TC - 目標受眾：臺灣 25-45 歲上班族 - 回應式設計：必須支援手機版
✓ Created CLAUDE.md 已建立 CLAUDE.md 偏好設定檔。 之後所有的開發工作都會遵循這些設定。
CLAUDE.md 是什麼？
CLAUDE.md 是一個特殊的設定檔案，放在你的專案根目錄下。Claude Code 每次啟動時都會自動讀取這個檔案。
你可以把它想成是「給 AI 的工作說明書」。裡面可以寫你的品牌色彩、偏好風格、目標受眾等資訊，這樣每次跟 AI 對話時，就不需要重複說明這些基本設定。
對行銷人來說，這特別實用——你可以把品牌指南（Brand Guidelines）直接寫進去，確保 AI 產出的每一個作品都符合品牌一致性。
03
Cowork 協作模式
讓 AI 成為你的行銷團隊
什麼是 Cowork？
Cowork 是 Claude 推出的多人協作功能，讓你可以和 AI 一起在同一個專案上工作，就像和同事一起協作一樣。
傳統的 AI 對話是「一問一答」的模式，但 Cowork 讓你可以設定多個 AI 助手，分別負責不同的任務——一個負責寫文案、一個負責做設計、一個負責寫程式碼。
對行銷團隊來說，Cowork 就像是讓你擁有了一個虛擬團隊：文案寫手、設計師、前端工程師、專案經理⋯⋯全部由 AI 擔任。
Cowork 的三種模式
即時協作
在 Claude.ai 介面中 和 AI 即時對話討論
任務分派
指派具體任務給不同的 AI 助手分頭執行
工作流自動化
設定自動化流程 讓 AI 自動完成重複工作
Cowork 開始使用
開啟 Claude.ai
在瀏覽器中登入你的 Claude 帳號
建立專案
點選左側的 Projects，建立新專案
設定專案知識
上傳品牌指南、產品資料等文件
開始協作
在專案中發起對話，AI 會記住所有脈絡
邀請 Cowork
使用 Cowork 功能邀請 AI 協作
行銷人的 Cowork 應用場景
活動企劃
從活動主題發想、時程規劃、預算編列到宣傳文案，全程 AI 協作
內容行銷
內容行事曆規劃、文章撰寫、SEO 優化、社群貼文改寫，一條龍完成
市場分析
競品調查、用戶研究、數據分析報告，AI 幫你整理洞察
行銷素材
銷售頁、EDM、簡報、提案書，批量產出品牌一致的素材
用 Cowork 規劃行銷活動
claude> 我要規劃一個新品上市的行銷活動 產品：AI 智慧筆記本 目標：上市首月銷售 1000 本 預算：NT$100,000 時程：4 週 請幫我： 1. 產出完整的活動企劃書 2. 設計 4 週的行銷時程表 3. 列出每週需要的行銷素材清單 4. 寫出每個社群平臺的貼文草稿
Cowork 專案設定的秘訣
-
上傳品牌指南
確保 AI 了解你的品牌調性和視覺規範
-
提供過去案例
讓 AI 學習你們的寫作風格和設計偏好
-
設定角色定義
告訴 AI 它扮演什麼角色（行銷經理？文案寫手？）
-
建立知識庫
上傳產品資料、FAQ、定價策略等重要文件
-
定義輸出格式
指定報告格式、文案長度、圖片尺寸等規範
Claude Code vs Cowork 怎麼選？
用 Claude Code
- 需要建立實際的網頁/系統
- 要產出可部署的程式碼
- 需要操作本機檔案
- 做技術性的開發工作
用 Cowork
- 需要企劃、策略、分析
- 要產出文件、報告、文案
- 需要團隊協作和討論
- 做創意發想和規劃
最佳組合拳
最聰明的做法是：用 Cowork 做企劃和策略 → 確定方向後 → 用 Claude Code 做技術實作。先想清楚要做什麼，再用 AI 快速執行。
Cowork 在團隊中的應用
如果你是行銷團隊的主管，Cowork 可以大幅提升團隊效率。你可以建立一個行銷專案，把所有品牌資料、歷史活動紀錄、客戶研究報告都上傳進去。
這樣團隊中的每個成員都可以在這個專案中與 AI 協作，而 AI 已經了解你們的品牌和策略。新進員工也能快速上手，因為 AI 就是最好的「知識庫」。
更重要的是，所有的對話紀錄都保存在專案中，團隊成員可以互相參考，避免重複工作。
Cowork 進階技巧
-
建立 Prompt 模板
把常用的需求描述存成模板，節省時間
-
分工明確
不同的對話串負責不同的任務主題
-
版本管理
重要的產出記得另存備份
-
定期更新知識庫
有新產品或新策略時，記得更新專案資料
-
培養 AI 的「記憶」
常用的偏好和規範，讓 AI 記住
建立行銷內容行事曆
claude> 請幫我建立下個月的社群內容行事曆 平臺：Facebook + Instagram + LinkedIn 品牌：「好日子」有機茶飲 本月重點： - 新品「桂花烏龍」上市 - 母親節特別企劃 - 品牌 5 週年慶 要求： - 每週至少 3 則貼文（每個平臺） - 包含文案 + 視覺建議 + 最佳發布時間 - 區分品牌故事 / 產品推廣 / 互動貼文的比例
實作 2：用 Cowork 建立你的行銷專案
- 1 在 Claude.ai 中建立一個行銷專案，上傳你的品牌資料
- 2 步驟 1：登入 claude.ai
- 3 步驟 2：點選左側 Projects → 建立新專案
- 4 步驟 3：命名你的專案（例如：XX 品牌行銷中心）
- 5 步驟 4：上傳品牌相關文件（LOGO、風格指南、產品介紹）
- 6 步驟 5：在 Project Instructions 中設定品牌調性和目標受眾
- 7 步驟 6：發起第一次對話，請 AI 幫你做一份本月行銷計畫
Cowork 的三個黃金法則
給足脈絡
上傳越多品牌資料 AI 的產出越精準
指定角色
告訴 AI「你是資深行銷經理」 產出品質會顯著提升
持續迭代
第一版不滿意很正常 追問和修改才是正常流程
用 AI 做競品分析報告
claude> 我想做一份競品分析報告 我的產品：AI 行銷自動化工具 競品：HubSpot、Mailchimp、ActiveCampaign 分析維度：功能比較、定價、目標客群、 臺灣市場在地化程度 產出：摘要表格 + 差異化機會 + 行銷定位建議
Cowork 在行銷場景的用法（上）
-
產品定位分析
分析市場缺口，找出差異化切入點
-
用戶人物誌
建立詳細的目標受眾 Persona
-
內容策略規劃
制定季度內容行事曆和主題
-
文案 A/B 版本
同時產出多個版本的標題和文案
-
社群回覆模板
建立常見問題的標準回覆範本
Cowork 在行銷場景的用法（下）
-
活動簡報製作
從企劃到簡報一條龍產出
-
客戶提案書
快速產出客製化的行銷提案
-
數據報告解讀
把 GA4 數據翻譯成商業洞察
-
危機公關預案
預先準備各種情境的回應策略
-
品牌聲量監測
整理和分析品牌相關討論
Cowork + Claude Code 協作範例
Cowork 做策略
- 分析競品銷售頁的優缺點
- 定義我們銷售頁的差異化策略
- 撰寫所有區塊的文案內容
- 規劃 A/B 測試方案
Claude Code 做執行
- 把文案變成實際的銷售頁
- 做出 A 版和 B 版的頁面
- 加入追蹤碼和轉換事件
- 部署上線並設定 UTM
Cowork 的精髓不是 「讓 AI 代替你工作」， 而是「讓 AI 放大你的能力」。
— AI 協作的核心理念
☕
中場休息
10 分鐘，休息一下、伸展筋骨
休息時間可以做的事
喝杯咖啡
補充能量 下半場會更精彩
問問題
趁休息時間 問講師任何問題
看看成品
用手機瀏覽你剛做的 網頁，看看手機版效果
50%
課程進度
你已經完成了一半的課程！接下來進入最精彩的部分——Vibe Coding 實戰！
上半場學到的重點複習
-
AI 行銷變革
72% 的行銷人已在用 AI，你準備好了嗎？
-
Claude Code
AI 程式設計助手，直接在電腦上建檔、改檔
-
CLAUDE.md
把品牌指南寫進設定檔，AI 自動遵守
-
Cowork
策略規劃的好幫手，建立行銷專案知識庫
-
準備好了！
下半場要開始 Vibe Coding 和實作了！
04
Vibe Coding 核心概念
用對話取代程式碼
Vibe Coding 就是： 你描述氛圍（Vibe）， AI 寫出程式碼（Code）。
— Andrej Karpathy
Tesla 前 AI 總監，Vibe Coding 一詞的提出者
Vibe Coding 的誕生
2025 年初，Tesla 前 AI 總監 Andrej Karpathy 在社群媒體上提出了「Vibe Coding」這個概念。他描述自己如何用自然語言對話的方式，讓 AI 幫他完成程式開發。
Karpathy 說：「我不再真正寫程式了，我只是用英文描述我想要的東西，然後看著 AI 把它做出來。如果覺得差不多對了，我就接受它。」
這個概念迅速在科技圈和創作者社群中引發熱潮，因為它意味著——「寫程式」不再是工程師的專利。任何人只要能清楚描述自己想要什麼，就能「Vibe」出一個數位作品。
Vibe Coding 的三大心法
描述願景
用自然語言描述 你想要的最終成品
迭代優化
看到結果後 不斷追加和修改
感覺對了就好
不追求完美程式碼 使用者體驗對了就行
Vibe Coding 的工作流程
描述願景
用自然語言說出你想要的成品樣貌
AI 產出初版
Claude Code 會產出第一版程式碼
預覽 → 追問
在瀏覽器中看效果，不滿意就繼續調整
反覆迭代
修改到滿意為止，通常 3-5 輪
部署上線
用一行指令把成品發布到網路上
傳統開發 vs Vibe Coding
傳統開發流程
- ✓ 學習 HTML / CSS / JavaScript
- ✓ 查文件、找範例、複製修改
- ✓ 自己 Debug 錯誤訊息
- ✓ 一個功能可能要寫幾百行
- ✓ 修改要理解程式碼結構
Vibe Coding 流程
- ✗ 用中文描述想要的結果
- ✗ AI 直接產出完整程式碼
- ✗ 把錯誤訊息丟給 AI 自己修
- ✗ 一句話就加上一個功能
- ✗ 直接說「把這裡改成⋯⋯」
Vibe Coding 的 Prompt 結構
-
先說目的 + 受眾
「我要做一個 XXX 的銷售頁，給 XXX 族群看」
-
指定風格
「風格要 XXX，顏色用 XXX」
-
列出功能
「需要 XXX 區塊、XXX 按鈕」
-
給具體內容
「產品名稱是 XXX，價格是 XXX」
-
提供參考
「參考這個網站的感覺：URL」
從零開始的對話流程
claude> 幫我做一個手沖咖啡線上課程的銷售頁 風格參考：Apple 官網那種大圖大字簡約風 配色：深棕 + 奶油白 + 金色點綴 需要這些區塊： 1. 大圖 Hero + 課程名稱 + 立即報名按鈕 2. 「為什麼要學手沖咖啡」三個理由 3. 課程大綱（6 個單元） 4. 講師介紹 5. 學員好評（3 則） 6. 價格方案（基礎版 / 進階版） 7. FAQ 摺疊區 8. 最後再來一個 CTA
Vibe Coding 的追問技巧
-
調顏色 / 大小
「主色換亮藍」「標題再大 30%」
-
調間距 / 版型
「間距加大」「改成左文右圖」
-
加動畫
「滾動時從下方淡入」
-
改響應式
「確認手機版看起來也沒問題」
-
加功能
「加倒數計時器」「加浮動 CTA 按鈕」
Vibe Coding 常用的設計詞彙
版面配置
全寬、置中、左右分欄、格狀排列、瀑布流、固定導覽列、黏性頁尾
視覺風格
極簡、圓角、漸層、玻璃擬態、深色模式、大量留白、卡片式設計
動態效果
淡入淡出、滑入、視差捲動、懸停放大、倒數計時、打字機效果
互動元素
手風琴摺疊、輪播圖、彈出視窗、Tab 頁籤、進度條、表單驗證
設計風格速查表
適合行銷場景的風格
- 極簡風 → 高端品牌、科技產品
- 溫暖風 → 生活品牌、食品飲料
- 活潑風 → 兒童產品、運動品牌
- 專業風 → B2B 服務、企業解決方案
對應的 Prompt 關鍵字
- 大量留白、無襯線字體、黑白灰
- 圓角、暖色調、手寫感字體
- 鮮明對比色、大字體、傾斜元素
- 深藍 + 白色、網格排列、數據圖表
Vibe Coding 的秘密
Vibe Coding 的品質，70% 取決於你的「描述能力」，只有 30% 取決於 AI 的技術。身為行銷人，你對用戶心理、視覺美感、和溝通技巧的理解，正是 Vibe Coding 最需要的能力。
Vibe Coding 的限制與注意事項
Vibe Coding 雖然強大，但也有它的限制。了解這些限制，才能更好地運用它。
首先，AI 產出的程式碼不一定是「最佳實踐」。對於簡單的行銷頁面來說，這完全不是問題。但如果你要做大型電商系統或需要高安全性的應用，建議還是找專業工程師審查。
其次，複雜的後端邏輯（如金流串接、資料庫管理）可能需要更多的引導和反覆修正。但好消息是，大多數行銷場景用前端技術就能搞定。
最後，記住 Vibe Coding 是工具，不是魔法。你的行銷專業判斷——什麼文案能打動人、什麼設計能引導點擊——這些 AI 永遠無法取代。
Vibe Coding 最佳實踐
-
先規劃再動手
用 Cowork 先把網頁架構想清楚，再用 Claude Code 開做
-
一次做一個區塊
不要一口氣描述整個網站，分區塊來做更容易控制品質
-
善用追問
第一版不完美是正常的，用追問來微調到滿意
-
多看多參考
在動手前，先收集 3-5 個你喜歡的設計參考
-
版本控制
每完成一個里程碑就用 git commit 存檔
Vibe Coding 的進化路徑
Level 1：模仿
參考現有網站，請 AI 做出類似的版本
Level 2：客製
在模仿的基礎上，加入自己的品牌元素
Level 3：創造
描述全新的設計概念，讓 AI 實現你的想像
Level 4：系統
結合多個頁面，建立完整的行銷系統
Level 5：自動化
設定工作流，讓 AI 自動產出行銷素材
暖身練習：用 Vibe Coding 做一張名片頁
- 1 用 Claude Code 做一個個人數位名片頁面
- 2 包含：你的名字、職稱、一句個人介紹
- 3 加上：Email、電話、LinkedIn 連結
- 4 風格：你自己選，簡約 / 華麗 / 可愛都行
- 5 加分：放上一張大頭照（用 placeholder 即可）
- 6 進階：加上黑暗模式切換按鈕
Vibe Coding 的常見誤解
-
「做出來的品質一定很差」
錯！只要描述夠精確，品質可以媲美專業設計
-
「只能做簡單的頁面」
錯！銷售頁、報名系統、管理後臺都能做
-
「每次都要從零開始」
錯！可以基於前一版持續修改和擴充
-
「手機版一定會壞掉」
錯！只要提醒 AI 做響應式設計就好
-
「做出來的不安全」
對於靜態行銷頁面，安全性完全沒問題
用參考網站來 Vibe Coding
claude> 我喜歡 Apple 官網的設計感 請參考它的風格特點： - 超大字體標題 - 全寬圖片 - 極簡的導覽列 - 大量留白 - 滾動時的視差效果 幫我做一個耳機產品的銷售頁 但配色要用深紫 + 金色 加上我們自己的品牌元素
三種 Vibe Coding 的策略
精確描述法
一次給完所有需求 適合你很清楚要什麼的時候
漸進建構法
先做骨架，再逐步加細節 適合探索式的設計過程
參考模仿法
給 AI 參考圖或網站 讓它做出類似的版本
Vibe Coding 的配色速查
信任感配色
深藍 #1a365d + 白 #ffffff + 淺灰 #f7f7f7。適合金融、顧問、B2B 服務。
活力感配色
橘 #FF6B35 + 深灰 #333 + 白 #fff。適合運動、教育、新創品牌。
高端感配色
黑 #111 + 金 #C9A96E + 米 #F5F0E8。適合精品、設計、高價服務。
自然感配色
綠 #2D6A4F + 米 #FEFAE0 + 棕 #8B7D6B。適合有機、健康、生活品牌。
Vibe Coding 不是在寫程式， 而是在「設計體驗」。 行銷人天生就擅長這件事。
— Vista Cheng
05
實戰：銷售頁製作
從零打造高轉換率的 Landing Page
2.35%
平均 Landing Page 轉換率
產業平均只有 2.35%，但頂尖的銷售頁能達到 11.45%。好的設計和文案是關鍵。
什麼是銷售頁？
銷售頁（Landing Page）是一個專門為特定行銷目標設計的單頁網站。它的唯一目的就是引導訪客採取一個行動——購買產品、報名活動、填寫表單、或下載資料。
跟一般網站不同，銷售頁沒有複雜的導覽列、不會讓用戶亂逛。它像一條精心設計的「動線」，從引起注意 → 激發興趣 → 建立信任 → 促成行動。
行銷人最常需要做的數位作品之一就是銷售頁。以前可能要找設計師和工程師配合，現在用 Vibe Coding 自己就能做出來。
高轉換銷售頁的結構
Hero 區：一句話賣點
首屏抓住注意力 + CTA 按鈕
痛點 → 解方
先引發共鳴，再展示你的解決方案
社會證明
客戶見證、數據、媒體報導
價格方案 + CTA
定價 + 限時優惠 + 購買按鈕
銷售頁的四大設計原則
F 型視覺動線
人的閱讀習慣是 F 型。重要資訊放左上、CTA 按鈕放在視線自然停留的位置。
一頁一目標
整個銷售頁只有一個行動目標。不要放太多連結或選擇，會分散注意力。
情感 > 邏輯
先用情感（痛點、願景）打動人心，再用邏輯（數據、見證）強化決定。
手機優先
超過 60% 的流量來自手機。設計時先確認手機版的閱讀體驗。
銷售頁 Prompt 模板
claude> 幫我做一個課程銷售頁 課程：「AI 行銷實戰班」 價格：NT$4,980（原價 NT$8,800） 結構：Hero + 痛點卡片 + 解方 + 課程大綱 + 講師 + 學員見證 + FAQ + CTA 風格：Apple 簡約感，深藍 #1a365d CTA 按鈕用橘色 #FF6B35 響應式設計，手機版優先
銷售頁的文案公式
-
Hero 標題
動詞開頭 + 目標受眾 + 期望結果
-
痛點描述
你是否也有這樣的困擾⋯⋯（列出 3 個）
-
解決方案
透過 XXX，你將能夠⋯⋯
-
社會證明
已有 XXX 人成功運用⋯⋯
-
CTA 按鈕
立即 + 行動 + 好處（例：立即報名，搶先掌握 AI 行銷力）
銷售頁文案 Do's & Don'ts
✓ 好文案
- 「3 小時學會用 AI 做出銷售頁」
- 「已有 2,000+ 行銷人完成課程」
- 「30 天內不滿意全額退費」
- 「限時優惠，名額剩 23 位」
✗ 差文案
- 「歡迎來到我們的課程」
- 「我們是一家專業的培訓機構」
- 「如有任何問題請聯繫我們」
- 「敬請把握機會」
銷售頁常用的 Vibe Coding 追問指令
-
加上倒數計時器
「在價格區上方加一個優惠倒數計時器，倒數 3 天」
-
加上動畫效果
「讓每個區塊在滾動到時從下方淡入，有漸入效果」
-
加上浮動 CTA
「在頁面右下角加一個浮動的報名按鈕，隨時可見」
-
改善手機版
「確認手機版的字體夠大，按鈕寬度 100%，好按」
-
加上 Lightbox
「點擊產品圖片時，用 Lightbox 放大顯示」
迭代優化範例
claude> 不錯！但我想做幾個修改： 1. Hero 區的背景改成深色，文字改白色 2. 痛點區的 icon 卡片加上 hover 放大效果 3. 價格區的「原價」加上刪除線 4. FAQ 改成點擊展開/收合的手風琴樣式 5. 最後加一個「名額倒數」的即時計數器 6. 整體字體再大 15% 7. 手機版的 CTA 按鈕要更明顯
銷售頁的三個進階技巧
A/B Testing 準備
做兩個版本的 Hero 區 測試哪個轉換率更高
追蹤碼埋設
加入 Google Analytics 和 Facebook Pixel 追蹤碼
效能優化
壓縮圖片、延遲載入 確保 3 秒內載入完成
加入追蹤碼
claude> 幫我在銷售頁加入以下追蹤功能： 1. Google Analytics 4 追蹤碼 （Measurement ID: G-XXXXXXXXXX） 2. Facebook Pixel （Pixel ID: 1234567890） 3. 追蹤「點擊報名按鈕」的事件 4. 追蹤「捲動到價格區」的事件 5. 在 CTA 按鈕加上 UTM 參數支援
銷售頁的 SEO 基礎
-
設定 Title 標籤
頁面標題要包含主要關鍵字，60 字以內
-
設定 Meta Description
吸引人的描述，155 字以內，包含 CTA
-
設定 OG Image
社群分享時顯示的預覽圖，1200x630px
-
設定 Canonical URL
避免重複內容問題
-
圖片 Alt 文字
每張圖都要有描述性的 alt 文字
實作 3：製作你的銷售頁
- 1 用 Claude Code 做一個你自己產品或服務的銷售頁
- 2 選擇你要推廣的一個產品或服務
- 3 準備好：產品名稱、賣點、價格、目標受眾
- 4 使用前面教的 Prompt 模板，修改成你的內容
- 5 至少包含 6 個區塊（Hero、痛點、解方、見證、價格、CTA）
- 6 用追問方式微調至少 3 次
- 7 確認手機版的顯示效果
銷售頁的心理學原理
一個高轉換的銷售頁，背後都有心理學原理在運作。了解這些原理，你的 Prompt 會更精準。
「稀缺性」：限時、限量、倒數計時。「只剩 5 個名額」比「歡迎報名」更有效。
「社會證明」：「已有 2,000 人購買」、五星好評、媒體報導 Logo。人們會跟隨多數人的選擇。
「錨定效應」：先顯示原價，再顯示折扣價。NT$8,800 劃掉，NT$3,980 就顯得超值。
「損失厭惡」：「錯過再等一年」比「現在購買很划算」更能驅動行動。
把心理學用在 Prompt 中
-
稀缺性
「加上限時倒數計時器」「顯示剩餘名額」
-
社會證明
「加入客戶見證區」「放上合作品牌 Logo 牆」
-
錨定效應
「原價用刪除線，折扣價用大字紅色顯示」
-
損失厭惡
「加上『優惠即將結束』的警示提醒」
-
從眾效應
「加上即時購買通知彈窗：XX 剛剛購買了」
不同產品的銷售頁模板
實體產品
- 大圖產品照 → 特色規格 → 使用情境
- Before/After 對比效果
- 開箱影片或 GIF
- 運費和退換貨政策
線上課程 / 服務
- 痛點共鳴 → 解決方案 → 課程大綱
- 講師專業背景和成就
- 學員成功案例故事
- 保證退款和試看機制
加入動態互動元素
claude> 幫銷售頁加入以下互動效果： 1. 捲動時的淡入動畫 - 每個區塊從下方 20px 淡入 - 延遲 0.1 秒逐個出現 2. 價格區的「最受歡迎」標籤 - 加在中間方案上 - 用金色邊框和「推薦」標籤 3. CTA 按鈕的脈搏動畫 - 每 3 秒有一次脈搏光暈效果 - 吸引注意力但不會太煩 4. 頂部的公告條 - 「🔥 限時優惠倒數 48 小時」 - 背景深色，文字白色 - 可以關閉
行銷人的優勢
你比工程師更懂銷售頁！你知道什麼文案能打動人心、什麼設計能引導點擊、什麼社會證明能建立信任。Vibe Coding 只是讓你把這些行銷知識「直接變成網頁」。
06
實戰：品牌形象網頁
打造專業的數位品牌門面
品牌網頁 vs 銷售頁的差異
銷售頁是單頁、單目標的設計；品牌網頁則是多頁面的完整網站，目的是建立品牌形象和信任。
品牌網頁通常包含：首頁、關於我們、服務項目、作品集、聯絡我們等頁面。它不像銷售頁那麼急著讓用戶採取行動，而是要讓訪客「認識你、信任你、記住你」。
用 Vibe Coding 做品牌網頁，最大的好處是——你可以不斷迭代、隨時更新，不用每次改東西都找工程師。你的網站可以跟你的品牌一起成長。
品牌網頁的建立流程
品牌盤點
確認品牌色彩、字體、語調、核心價值
架構規劃
決定需要哪些頁面和資訊層級
首頁 → 內頁
先做首頁，再擴展關於、服務、作品集
導覽 + 響應式
加上導覽列、頁尾，確保手機版完美
首頁 Prompt 範例
claude> 幫我做一個品牌形象網站的首頁 品牌：「初心設計」室內設計工作室 配色：暖灰 #8B7D6B + 奶油白 #F5F0E8 + 金 #C9A96E 區塊：Hero + 品牌介紹 + 精選作品（4個） + 三種服務 + 設計師介紹 + 聯絡資訊 固定透明導覽列，高端感，襯線字體
品牌網頁的四種必備頁面
首頁
品牌的第一印象。大圖大字、核心價值、精選作品、CTA，5 秒內讓訪客知道你是誰。
關於我們
品牌故事、團隊介紹、里程碑。讓訪客從「知道你」變成「信任你」。
服務 / 產品
清楚展示你提供什麼。分類清晰、圖文並茂、有明確的下一步行動。
聯絡我們
地址、電話、Email、表單、Google 地圖。讓想聯繫你的人立刻找到方式。
品牌一致性的 Vibe Coding 技巧
-
建立 CLAUDE.md
把品牌色、字體、語調全寫進去，每頁自動套用
-
先做元件再組頁面
先做好導覽列、頁尾等共用元件，再組合各頁面
-
用 CSS 變數
請 AI 用 CSS 變數管理顏色，改一處全站生效
-
統一圖片風格
指定圖片的比例、濾鏡、圓角等統一規則
-
定義按鈕樣式
所有按鈕的顏色、大小、hover 效果要統一
建立完整的品牌網站結構
claude> 我要把這個品牌網站擴充為完整多頁面網站 請建立以下頁面結構： / → 首頁（已完成） /about → 關於我們（品牌故事 + 團隊） /services → 服務項目（三種服務的詳細介紹） /portfolio → 作品集（瀑布流圖片牆 + Lightbox） /contact → 聯絡我們（表單 + 地圖 + 營業時間） 每頁都要有： - 共用的導覽列（標示目前在哪一頁） - 共用的頁尾 - 從首頁到各頁面的平滑過渡動畫 - 麵包屑導航
品牌網頁的視覺加分技巧
大圖策略
用高品質的大尺寸圖片 搭配文字覆蓋，營造質感
微互動
按鈕 hover 變色、圖片懸停放大 小細節讓網站更精緻
行動優先
先設計手機版體驗 再擴展到桌面版
不同產業的品牌網頁風格
B2C 品牌
- 餐飲 → 暖色調、食物大圖、預約按鈕
- 美妝 → 粉色系、模特兒圖、優雅字體
- 教育 → 藍綠色、插畫風、信任徽章
- 生活 → 大地色、自然照片、手寫字體
B2B 品牌
- 科技 → 深色背景、漸層、動態數據
- 顧問 → 深藍白色、專業照片、案例數據
- 設計 → 極簡、大量留白、作品說話
- 製造 → 穩重色系、工廠實景、認證徽章
品牌網頁的 SEO 優化要點
-
每頁獨立的 Title 和 Description
首頁、關於、服務⋯⋯每頁的 meta 都不同
-
結構化資料 Schema
讓 Google 更了解你的網站內容
-
語意化 HTML
用正確的 H1-H6 標籤，別全用 div
-
網站地圖 Sitemap
幫搜尋引擎找到你的所有頁面
-
圖片優化
壓縮、WebP 格式、lazy loading
實作 4：製作品牌首頁
- 1 用 Vibe Coding 做你的品牌（或個人品牌）首頁
- 2 選定你的品牌名稱和核心定位
- 3 決定品牌色彩（主色 + 輔色 + 點綴色）
- 4 至少包含 5 個區塊（Hero、介紹、服務/產品、見證/作品、聯絡）
- 5 加上導覽列和頁尾
- 6 用追問方式微調風格細節
- 7 確認手機版的效果
品牌網頁是你 24 小時不打烊的業務員。它在凌晨 3 點也在幫你建立品牌形象。用 Vibe Coding 做的品牌網頁，你可以隨時更新、隨時優化，讓它永遠保持最佳狀態。
品牌網頁的圖片策略
-
免費圖庫推薦
Unsplash、Pexels、Pixabay 提供高品質免費照片
-
AI 生圖搭配
用 Midjourney 或 DALL-E 產出品牌專屬插畫
-
圖片壓縮必做
用 TinyPNG 或 Squoosh 壓縮，載入速度差很多
-
一致的圖片風格
統一濾鏡、色調、構圖方式，維持品牌感
-
善用 SVG 圖示
圖示用 SVG 格式，縮放不失真、檔案超小
加入動態效果提升質感
claude> 幫品牌首頁加上以下效果： 1. 導覽列：滾動時從透明變成白底有陰影 2. Hero 區：文字打字機效果逐字出現 3. 作品集：hover 時圖片微微放大並顯示覆蓋層 4. 數據區：數字從 0 滾動到目標值的動畫 5. 客戶 Logo 牆：自動左右無限滾動 6. 頁面切換：平滑捲動而非瞬間跳轉
品牌網頁的關鍵數據
3 秒
載入容忍度
超過 3 秒，53% 的用戶會離開
94%
第一印象來自設計
用戶對網站的信任感來自視覺設計
88%
用戶不回頭
體驗差的網站，88% 的用戶不會再來
70%
流量來自手機
響應式設計不是選項，是必要條件
品牌網頁的三個常見錯誤
資訊過多
首頁塞太多資訊 用戶不知道該看什麼 少即是多！
沒有 CTA
看完整個網站 不知道下一步該做什麼 每頁都要有行動呼籲
忽略手機版
桌面版漂亮 手機版卻亂成一團 先做手機版再擴展
品牌網頁不只是一個網站， 它是你的品牌在數位世界的「家」。
— 數位品牌經營的核心觀念
07
實戰：活動報名系統
打造完整的活動管理體驗
為什麼行銷人需要自己做報名系統？
每次辦活動都要用 Google 表單？Accupass 的抽成太高？Eventbrite 的介面不夠品牌化？
身為行銷人，你一定遇過這些痛點。第三方報名平臺雖然方便，但限制也很多——無法完全客製化設計、抽取報名費用、資料匯出不方便、介面上還掛著別人的品牌。
用 Vibe Coding 做自己的報名系統，你可以完全掌控設計和功能。而且你會發現，做一個報名系統比你想像中簡單得多。
自建報名系統 vs 第三方平臺
自建系統
- ✓ 零手續費，只有基礎成本
- ✓ 完全客製化品牌設計
- ✓ 資料 100% 自己掌控
- ✓ 純品牌體驗，零干擾
- ✓ 想要什麼功能就加什麼
第三方平臺
- ✗ 每筆報名收 2-10% 手續費
- ✗ 設計受限於平臺模板
- ✗ 資料掌控在別人手上
- ✗ 品牌露出被平臺干擾
- ✗ 功能固定，無法客製
報名系統的核心功能
活動資訊頁
名稱、日期、地點、講師介紹
報名表單 + 驗證
姓名、Email、電話、票種選擇
方案選擇
早鳥 / 一般 / VIP 不同票種
確認 + 通知
感謝頁面 + 自動寄確認信
倒數 + 名額
距離活動倒數 + 剩餘名額即時顯示
完整的報名系統 Prompt
claude> 幫我做一個工作坊的活動報名系統 活動：「AI 行銷實戰工作坊」 日期：2026/5/15（六）09:30-16:30 地點：臺北市中山區，限 40 人 票種：早鳥 $2,980 / 一般 $3,980 / VIP $5,980 功能：介紹頁 + 報名表單 + 表單驗證 + 倒數計時 + 名額顯示 + 感謝頁 + Google Sheets 風格：紫色 #6B46C1，現代感，響應式
報名表單的設計要點
-
欄位越少越好
只收必要資訊，每多一個欄位就流失一些報名者
-
即時驗證
輸入 Email 時立刻檢查格式，不要等按送出才報錯
-
進度提示
如果是多步驟表單，要顯示「步驟 1/3」的進度
-
手機鍵盤優化
電話欄位自動跳數字鍵盤、Email 欄位顯示 @ 鍵
-
送出按鈕要醒目
大按鈕、對比色、明確的文字（立即報名 vs 送出）
報名資料自動存到 Google Sheets
claude> 報名表單送出後，把資料 自動存到 Google Sheets 欄位：報名時間、姓名、Email、電話、票種 送出成功顯示感謝頁面
✓ Created google-apps-script.js ✓ Updated registration-form.html 設定：Google Sheets → 工具 → 指令碼編輯器 → 貼上程式碼 → 部署 → 複製 API URL 給我
報名系統的三個進階功能
自動確認信
用 EmailJS 或 Resend 報名成功自動寄確認信
即時儀表板
管理員後臺顯示 報名人數、票種分佈圖表
電子票券
產生專屬 QR Code 活動當天快速報到
報名系統常見的追問修改
-
加上早鳥倒數
「早鳥票剩 3 天截止，加上倒數計時」
-
名額限制提示
「已報名 35/40 人，快額滿時顯示紅色警示」
-
加上分享按鈕
「報名成功後，加上 FB 和 LINE 分享按鈕」
-
多步驟表單
「把表單拆成 3 步驟：選票種 → 填資料 → 確認」
-
加入優惠碼
「加一個優惠碼欄位，輸入 VIP100 可打 9 折」
加入優惠碼折扣機制
claude> 在報名表單加上優惠碼功能 規則： - EARLY100 → 折 NT$500 - VIP2026 → 打 8 折 - GROUP3 → 3 人以上團報每人折 NT$300 輸入優惠碼後即時顯示折後價格 無效的優惠碼要即時提示「此優惠碼無效」 成功套用時顯示綠色勾勾和折扣金額
不同類型活動的報名系統設計
工作坊 / 課程
重點在課程大綱、講師介紹、學員見證。票種通常分早鳥和一般。表單簡潔，收姓名+Email+電話即可。
研討會 / 論壇
多位講者、多個議程軌道。需要議程表、講者陣容展示。可能需要選擇想參加的場次。
社群活動 / Meetup
輕鬆活潑的設計。可能是免費活動，重點在社群氛圍展示。加入「邀請朋友」的分享功能。
企業內訓 / 包班
專業正式的設計。需要公司名稱、統編、發票資訊等欄位。可能需要上傳公司 Logo。
實作 5：做一個活動報名頁
- 1 用 Claude Code 做一個你自己活動的報名系統
- 2 選一個你真正要辦（或想辦）的活動
- 3 設定活動名稱、日期、地點、價格
- 4 至少包含：活動介紹、報名表單、成功頁面
- 5 表單要有即時驗證（必填、Email 格式）
- 6 加上至少一個進階功能（倒數、名額、優惠碼）
- 7 確認手機版報名流程順暢
報名系統的資料管理
做好報名系統後，最重要的是「資料管理」。報名者的個資（姓名、Email、電話）需要妥善處理。
最簡單的方式是把資料存到 Google Sheets——免費、好管理、可以多人協作。Google Sheets 還能做簡單的圖表分析，像是報名人數趨勢、各票種的銷售比例等。
進階一點的做法是串接 Airtable 或 Notion 資料庫。這些工具有更好的篩選、排序和自動化功能，適合經常辦活動的行銷團隊。
報名系統的法律注意事項
-
個資告知義務
表單上要告知資料蒐集的目的和用途
-
隱私權政策
網頁底部要放隱私權政策連結
-
資料安全
不要在前端程式碼中暴露 API Key
-
退款政策
付費活動要明確標示退款規則
-
Cookie 告知
如果有使用追蹤碼，需要 Cookie 告知
活動當天的數位工具整合
QR Code 報到
用 Claude Code 做一個掃碼報到頁面
即時問答
用 Slido 或自建頁面收集現場問題
滿意度調查
活動結束立即推送線上問卷
資料匯出
從 Google Sheets 匯出報名和回饋數據
活動後跟進
用 Cowork 產出感謝信和後續行銷計畫
報名系統是行銷人最常需要的數位工具。學會用 Vibe Coding 做報名系統後，你再也不需要為每一場活動付平臺費用、妥協設計、或等工程師排程。想辦活動？打開 Claude Code，兩小時搞定。
08
部署與上線
讓全世界看到你的作品
做好了，然後呢？
你已經用 Vibe Coding 做出了銷售頁、品牌網頁和報名系統。但目前它們只存在你的電腦上——只有你自己看得到。
「部署」就是把你的作品放到網路上，讓全世界都能透過一個網址看到它。這個過程比你想像中簡單得多——幾行指令就搞定。
今天我們會教你使用 Cloudflare Pages 和 Netlify，它們都有免費方案，足夠應付大多數行銷場景的流量。
部署平臺比較（都推薦！）
Cloudflare Pages
- 免費額度非常大方
- 全球 CDN，速度極快
- 自動 HTTPS
- 跟 Cloudflare 生態整合好
- 推薦給靜態網站
Netlify
- 免費方案足夠使用
- 拖曳上傳超簡單
- 自動 HTTPS
- 表單收集功能內建
- 推薦給有表單的網站
用 Cloudflare Pages 部署（推薦）
註冊 + 安裝
dash.cloudflare.com 註冊，npm install -g wrangler
登入
wrangler login（開啟瀏覽器授權）
一鍵部署
wrangler pages deploy ./資料夾 --project-name 專案名
取得網址
部署成功後給你一個 .pages.dev 的網址
自訂網域（選做）
可以綁定自己的網域名稱
用 Claude Code 部署到 Cloudflare
claude> 幫我把這個網站部署到 Cloudflare Pages 專案名稱：ai-marketing-landing 要部署的資料夾：./dist
$ wrangler pages deploy ./dist \ --project-name ai-marketing-landing ✅ 部署成功！ 🌐 https://ai-marketing-landing.pages.dev
用 Netlify 部署（適合初學者）
前往 netlify.com
用 Google 或 Email 註冊免費帳號
拖曳上傳
把整個專案資料夾拖進 Netlify 的上傳區
等待幾秒
Netlify 會自動處理和部署
取得網址
會給你一個 .netlify.app 的網址
自訂設定
可以修改網址名稱、綁定網域
部署後的檢查清單
-
手機版確認
用手機開啟，確認顯示正常
-
速度 + 連結
PageSpeed Insights 測速，按鈕連結都正常
-
表單測試
填寫報名表單，確認資料有送出
-
社群分享
在 FB/LINE 分享網址，確認 OG 預覽正確
-
HTTPS 確認
網址是 https 開頭（有鎖頭圖示）
部署的三個進階技巧
自訂網域
買一個自己的網域名稱 像 yourbrand.com
串接 GA4
部署後別忘了 加上 Google Analytics 追蹤
自動部署
設定 GitHub 連結 改程式碼就自動重新部署
實作 6：部署你的作品
- 1 選擇 Cloudflare 或 Netlify，把你的銷售頁部署上線
- 2 選一個你前面做的作品（銷售頁、品牌頁、報名系統）
- 3 按照教學步驟部署到 Cloudflare Pages 或 Netlify
- 4 拿到網址後，用手機開啟確認效果
- 5 把網址分享到課程群組，讓大家互相觀摩！
自訂網域設定
-
買網域
推薦 Namecheap、GoDaddy 或 Gandi
-
.tw 網域
臺灣品牌推薦用 .tw 或 .com.tw
-
DNS 設定
在網域商後臺加 CNAME 指向部署平臺
-
等待生效
DNS 通常 5-30 分鐘生效
-
HTTPS 自動
Cloudflare 和 Netlify 都會自動申請 SSL 憑證
設定 GitHub 自動部署
claude> 幫我設定 GitHub 自動部署 初始化 git、推送到 GitHub 連結 Cloudflare Pages 自動部署
✓ Git repo initialized ✓ .gitignore created ✓ Files committed 接下來：GitHub 建新 repo → 複製 URL 給我
版本控制的好處
每次部署前都用 git commit 存檔，這就是「版本控制」。它就像遊戲裡的存檔點——如果你改壞了什麼，隨時可以回到上一個版本。
對行銷人來說，版本控制特別實用：老闆說「還是上一版比較好」的時候，你可以 3 秒鐘內切回去。A/B 測試的不同版本也可以用 git branch 管理。
你不需要學會所有的 git 指令。只要會三個就夠了：git add（準備要存的檔案）、git commit（存檔）、git push（推到雲端）。這些 Claude Code 都可以幫你做。
5 min
從做完到上線
部署真的就是這麼快。以後你改了任何東西，重新部署也只要 5 分鐘。這就是 Vibe Coding 的魔力。
09
行銷工作流整合
把 AI 融入你的日常工作
超越工具，建立工作流
學會了工具的操作，下一步是把它們融入你的日常工作流中。真正的效率提升不是來自偶爾使用 AI，而是讓 AI 成為你工作中不可或缺的一部分。
想想你每天的工作：寫文案、做報告、設計活動頁、更新社群、分析數據⋯⋯這些工作中有多少可以讓 AI 加速？
接下來我會分享幾個經過驗證的 AI 行銷工作流，你可以直接套用到自己的工作中。
工作流 1：新品上市 Launch 流程
Cowork：調研 + 企劃
分析競品、產出上市計畫書
Claude Code：銷售頁
用 Vibe Coding 做產品銷售頁
Cowork：文案 + EDM
社群貼文 + Email 行銷模板
部署上線 + 追蹤
同步上線並追蹤轉換數據
工作流 2：活動行銷全流程
Cowork：企劃 + 文案
活動計畫書、宣傳文案
Claude Code：報名系統
報名頁 + 確認信模板
部署 + 追蹤
上線追蹤報名數據和轉換率
Cowork：活動後報告
自動整理活動成效報告
工作流 3：內容行銷日常
Cowork：內容規劃 + 撰寫
內容行事曆、文章草稿、SEO 優化
Claude Code：文章頁面
把文章做成精美的網頁版本
Cowork：社群改寫
改寫成各平臺的社群貼文
追蹤與優化
分析數據，持續優化內容策略
AI 行銷工作流的四大原則
策略先行
用 Cowork 先想清楚策略方向，不要急著用工具做東西。方向錯了，做得再快也沒用。
模板化
常用的 Prompt、頁面結構、設計風格都做成模板。下次用時只要改內容就好。
批量產出
一次做完所有需要的素材，不要零散地一個一個做。AI 批量產出的效率最高。
持續迭代
上線不是結束，是開始。持續追蹤數據、優化頁面、改善轉換率。
建立你的 Prompt 模板庫
claude> 幫我建立一個 prompts/ 資料夾
模板：銷售頁、品牌網頁、報名頁、EDM
每個模板包含：
- 需要填入的變數（用 {{}} 標記）
- 頁面結構建議 + 設計風格預設值
AI 能做 vs 不能做的事
AI 擅長的
- 快速產出初版方案和程式碼
- 批量改寫不同風格的文案
- 建立表單和基礎互動功能
- CSS 調整和版面微調
- 重複性的修改和部署
你來判斷的
- 行銷策略和目標設定
- 文案的情感溫度和品牌調性
- 設計美感的最終把關
- 用戶體驗的核心洞察
- 數據分析的商業解讀
行銷人的 AI 工具推薦清單
-
Claude Code + Cowork
網頁開發、策略規劃、文案撰寫
-
Midjourney / DALL-E
行銷視覺素材、社群圖片
-
Gamma / Beautiful.ai
行銷簡報和提案
-
Notion AI + Canva AI
企劃文件、社群貼文、快速設計
用 Claude Code 做 EDM 模板
claude> 幫我做一個 EDM 電子報模板 品牌：「好日子」有機茶飲 主題：母親節感恩特惠 結構：Logo + 主視覺 + 感恩文案 + 三個推薦商品 + 優惠碼 MOM2026 寬度 600px，表格排版，行動裝置自適應
行銷自動化串接建議
-
表單 → Google Sheets
用 Google Apps Script 自動收集報名資料
-
表單 → Email 通知
用 EmailJS 或 Resend 自動寄確認信
-
GA4 → 數據追蹤
埋好追蹤碼，監測流量和轉換
-
Webhook → Slack
報名成功自動通知團隊 Slack 頻道
-
Zapier → CRM
自動把新客戶資料匯入 CRM 系統
一人行銷團隊的 AI 工具矩陣
策略腦 → Cowork
市場分析、受眾研究、策略規劃、競品分析。就像你的行銷顧問。
執行手 → Claude Code
銷售頁、網站、報名系統、EDM。就像你的設計師+工程師。
視覺眼 → Midjourney
產品圖片、社群素材、品牌插畫。就像你的平面設計師。
數據腦 → GA4 + AI
流量分析、轉換追蹤、成效報告。就像你的數據分析師。
AI 不會取代行銷人， 但會讓「一人行銷團隊」 成為可能。
— AI 時代的行銷新常態
課程回顧：你今天學到了什麼
思維升級
AI 不只是工具 它是行銷能力的倍增器
技能獲得
Claude Code + Cowork + Vibe Coding 三大技能
實戰產出
銷售頁 + 品牌網頁 + 報名系統，帶走成品
實作 7：設計你的 AI 行銷工作流
- 1 畫出你自己的 AI 行銷工作流程圖
- 2 回顧你開場時寫下的三個痛點
- 3 用今天學到的工具，設計解決這些痛點的工作流
- 4 標註每個步驟使用哪個工具（Cowork / Claude Code）
- 5 估算使用 AI 後可以節省多少時間
- 6 寫下你明天回到公司後，第一個要做的事
10
延伸學習與下一步
持續精進的完整資源
推薦學習資源
-
vista.tw
Vista 的 AI 內容策略知識庫，持續更新 Vibe Coding 教學
-
Claude 官方文件
docs.anthropic.com 了解 Claude 最新功能
-
Vibe Coding 社群
Facebook 社團和 Discord，跟同好交流
-
YouTube 教學
搜尋「Vibe Coding 教學」有大量免費影片
-
《ChatGPT提問課》
Vista 著作，學習 AI 溝通的底層邏輯
課後的學習計畫建議
本週
把今天做的銷售頁實際部署上線，開始使用
兩週內
用 Vibe Coding 重做一個你工作中需要的頁面
一個月內
嘗試做一個完整的多頁面品牌網站
兩個月內
建立你自己的 Prompt 模板庫
持續
每次有新的行銷需求，先想「能不能用 AI 做？」
進階學習方向
前端框架
學習 React 或 Vue 的基礎概念，讓 Claude Code 產出更專業的程式碼
設計系統
了解 Design Token、元件庫的概念，建立品牌一致的設計系統
行銷自動化
串接 CRM、Email 行銷、社群排程等自動化工具
數據分析
學習 Google Analytics 4、Hotjar 等工具，用數據優化行銷效果
Vibe Coding 可以做的更多事
-
互動式計算機
貸款計算器、ROI 計算器、報價工具
-
數據視覺化
圖表、儀表板、數據報告頁面
-
互動式產品展示
3D 展示、360° 旋轉、Before/After 對比
-
小遊戲和抽獎
轉盤抽獎、刮刮卡、品牌小遊戲
-
客戶入口網站
客戶專屬的資料查詢和服務頁面
AI 行銷趨勢展望
-
AI Agent 普及
AI 不只回答問題，還能自主完成任務
-
個人化體驗
AI 即時根據訪客行為調整頁面內容
-
語音互動
語音助手整合行銷場景，語音下單
-
多模態內容
文字、圖片、影片、互動一站式 AI 產出
-
零代碼時代
完全不需要程式基礎的 AI 開發工具
從今天開始改變
三個月前，有一位參加工作坊的行銷經理 Amy，在課後的第一週就用 Claude Code 做了一個新品銷售頁。她說：「以前這種事情我都要等設計師排程，現在我自己花 2 小時就搞定了。」
一個月後，她已經幫公司做了 5 個不同產品的 Landing Page，還做了一個活動報名系統。老闆問她是不是偷偷學了程式，她笑說：「不是，我學的是 Vibe Coding。」
現在，她已經是公司裡的「AI 行銷達人」，其他部門的人都來找她請教。她的秘訣？就是今天你學到的這些技能，加上「每天花 30 分鐘練習」的習慣。
建立你的 AI 學習習慣
-
每天 30 分鐘
固定時間練習，積少成多
-
從小專案開始
先做名片頁 → 銷售頁 → 品牌網站
-
記錄你的 Prompt
好用的描述方式，存成模板
-
加入社群
和其他 Vibe Coding 學習者交流心得
-
教別人
最好的學習方式是教會別人
學習 AI 工具不是為了成為工程師， 而是為了成為更好的行銷人。
— Vista Cheng
Q&A 常見問題
-
Claude Code 用量會超嗎？
行銷場景的用量 Pro 方案通常足夠，一天做 2-3 個頁面沒問題
-
做出來的網站安全嗎？
靜態網站非常安全，比 WordPress 還不容易被駭
-
可以做電商功能嗎？
簡單的可以，複雜的建議用 Shopify 等專業平臺
-
AI 做的網站能 SEO 嗎？
可以！只要在 Prompt 中加上 SEO 需求
-
更新網站內容難嗎？
跟第一次做一樣簡單，打開 Claude Code 直接改
Claude Pro vs Max 怎麼選
Pro（US$20/月）
- 偶爾做行銷頁面
- 每週 2-3 次使用
- 簡單的銷售頁和品牌頁
- 入門學習階段
Max（US$100/月）
- 頻繁做各種行銷專案
- 每天都在用 Claude Code
- 複雜的系統和多頁面網站
- 已經是核心工作流的一部分
🎯
課程總結
回顧今天的收穫
今天的課程成就
3
實戰作品
銷售頁 + 品牌網頁 + 報名系統
3
核心工具
Claude Code + Cowork + Vibe Coding
10+
實用技巧
Prompt 模板、追問技巧、部署方法
∞
未來可能
你的行銷超能力已經解鎖！
課後行動清單
今天
把你最滿意的作品部署上線，分享到社群
明天
回到工作崗位，找一個可以用 AI 做的小任務
本週
加入 Vibe Coding 社群，與同好交流學習
持續
養成「先問 AI 能不能做」的習慣
保持聯繫
-
追蹤 vista.tw
持續獲得 AI 行銷和 Vibe Coding 的最新教學
-
加入 Facebook 社團
「Vibe Coding 實戰圈」社團，持續交流
-
訂閱電子報
每週 AI 行銷洞察，直送你的信箱
-
LinkedIn 連結
歡迎加 Vista Cheng 為好友，持續交流
-
課後問題
有任何問題，歡迎隨時聯繫
你的 AI 行銷學習旅程
完成課程
學會三大技能
首個作品上線
部署到網路上
獨立作業
自己做行銷頁面
AI 達人
帶領團隊 AI 轉型
100%
課程完成！
恭喜你完成今天的課程！你已經具備用 AI 打造行銷數位作品的所有基礎能力。剩下的，就是練習、練習、再練習。
最後的提醒
今天學到的工具和技巧，只有在你「實際使用」的時候才會產生價值。不要等到「準備好了」才開始——你永遠不會覺得完全準備好。就像 Vibe Coding 的精神：先做出來，再慢慢優化。
你已經擁有最重要的東西： 對市場的理解、對用戶的同理心、 和把事情做好的決心。 AI 只是讓你跑得更快的翅膀。
— Vista Cheng
感謝你的參與！
Vista Cheng ｜ 鄭緯筌
AI 內容策略顧問 ｜ Vibe Coding 佈道者
vista.tw
今天的簡報與資源
slides.vista.tw/ai-marketing-claude-code
密碼：Marketing2026AI
讓 AI 成為你最強的行銷夥伴！