2026 SERIES｜LESSON 1 OF 4

AI 一人事業者
Claude Code + Vercel
寫前端

5/14（四）20:00-21:30 ｜線上 Google Meet

講師：Ray Chou ｜ Textsence AI 應用工作室

系列課地圖

4 週、4 個技能、一條龍 AI 接案能力

第 1 堂｜5/14	Claude Code + Vercel 寫前端　← 本堂
第 2 堂｜5/21	埋 GA4 + GSC 數據追蹤
第 3 堂｜5/28	LINE / Telegram 客服 Bot
第 4 堂｜6/4	AI 規劃 IG 自媒體拍攝

走完 4 堂 = 你具備：先有站 → 再追蹤 → 再加 Bot → 最後內容導流

本堂目標

下課後你會帶走

1. 30 分鐘做一個 Landing Page

從 0 到部署，全程用 Claude Code 寫

2. frontend-design skill

怎麼裝、怎麼下指令、怎麼做出有設計感的頁面

3. Vercel 一鍵部署

自動 SSL + CDN + Preview 環境

4. 客戶站接案 SOP

定價、交付、維護，一站 NT$15K-50K 怎麼分階段收

90 分鐘時程

今天怎麼跑

00-10 min	開場：為什麼 AI 一人事業者是 2026 務實路徑
10-25 min	Claude Code 入門 + 裝 skill 技巧
25-55 min	30 分鐘做出 Landing Page（實操）
55-65 min	GitHub 版控基礎
65-80 min	Vercel 申請 + 部署
80-90 min	接案 SOP + Q&A

開場

為什麼
「AI 一人事業者」
是 2026 最務實的路徑？

2026 的現實

過去：一個網站 = 工程師 + 設計師 + PM，3 人月、20 萬起跳
現在：你 + Claude Code = 一個下午搞定
客戶不在乎你用什麼工具，只在乎交付速度和品質
會用 AI = 一個人就是一支隊伍

真實案例（我自己跑的客戶站）：

Sugar8 跨境站　Shopify + 客製功能（庫存 NT$90K）
Cindy Lin　WordPress + Brevo + FluentCRM（NT$45K）
保養品品牌　WordPress 全建置 + 後續 POS

SECTION 1

Claude Code 跟 ChatGPT 哪裡不一樣？

ChatGPT / Claude 網頁版

對話模式
程式碼用複製貼上
不能讀你的檔案
不能跑指令

Claude Code

跑在你電腦的 Terminal
直接讀寫你的檔案
能跑 git、npm、安裝套件
能裝 skill 擴充能力

→ Claude Code 是「會動手的 AI」，網頁版是「只會講的 AI」

安裝 + 第一個指令

裝 Node.js（brew install node）

裝 Claude Code：npm install -g @anthropic-ai/claude-code

登入：在 Terminal 打 claude，照指示授權

第一個指令：幫我建一個 hello.html，標題寫「我學會了」

→ 按 Enter，Claude 會直接在你資料夾建檔案

SECTION 2

Skill 是 Claude Code 的「外掛」

Skill = 一份 markdown 檔，告訴 Claude「遇到這類任務該怎麼做」
裝在 ~/.claude/skills/ 資料夾
Claude 啟動時會自動讀，遇到對應任務會自動觸發
有官方的、有社群的、你也能自己寫

今天用的明星 skill

frontend-design

專門做「不像 AI 生成」的高質感網頁設計，避開通用 AI 的視覺套路

SECTION 3 ｜實操

30 分鐘做出 Landing Page

需求：給 Claude 2-3 個 reference 網站（你喜歡的風格）

觸發：用 frontend-design skill 做一個 ___ 的 landing page

預覽：Claude 自動跑 npm run dev 開瀏覽器

調整：直接講「Hero 字大一點」「按鈕改紫色」

收尾：幫我加 RWD，手機要好看

設計感從哪來？

Reference

給 Claude 看具體網站，不要說「漂亮」「現代感」

Tailwind CSS

業界標準 CSS 框架，Claude 寫得最熟

shadcn/ui

高品質元件庫，按鈕、卡片、表單一鍵裝

⚠️ 不要說「做漂亮一點」— 太抽象。要給具體 reference URL。

SECTION 4

GitHub 版控｜每一版都存得回去

為什麼要版控：客戶說「改回上週那版」你能立刻回
repo：你的程式碼倉庫，存在 GitHub 雲端
commit：存檔點（什麼時候做了什麼）
push：把本機進度推上 GitHub

# Claude 會幫你做這些，你只要懂在哪
git init                              # 建本機 repo
git add .                             # 加入要存的檔案
git commit -m "第一版 landing"        # 存檔點
git push                              # 推上 GitHub

→ 跟 Claude 講：幫我建 GitHub repo 並推上去 就好

SECTION 5

Vercel 申請（3 分鐘）

前往 vercel.com 點 Sign Up

用 GitHub 帳號登入（會自動連結）

選 Hobby（免費版，個人接案完全夠用）

授權 Vercel 讀取你的 GitHub repos

免費版包含：自動 SSL、全球 CDN、Preview 環境、無限部署

一鍵部署上線

Vercel 後台點 Add New → Project

選你剛 push 上去的 GitHub repo

什麼都不用改，直接點 Deploy

1-2 分鐘後，拿到一個 xxx.vercel.app 網址

→ 從這一刻起，你 push 一次，網站自動更新一次

自訂網域：後台 Domains → 加入你買的 domain，照指示改 DNS 即可

SECTION 6

客戶站接案 SOP

定價區間

Landing Page：NT$15K-25K
小型形象站（5 頁內）：NT$25K-40K
含表單 + CRM 整合：NT$40K-60K

分階段收款

簽約 50%（訂金）
初版交付 30%
上線 + 驗收 20%（尾款）

客戶最常問：「改幾次」「上線多久」「之後維護怎麼算」— 寫進報價單

課後

群組分享：本堂用的 prompt 範本 + Vercel 樣板專案
一週內可在群組提問
作業（強烈建議）：自己做一個 landing page 部署上線，下週秀
想進業務團隊 → 回 LINE「我要報名 AI 業務團隊」

下週第 2 堂｜5/21（四）20:00　埋 GA4 + GSC 數據追蹤

Q&A

有任何問題都可以問

textsence.ai@gmail.com
Textsence AI 應用工作室

AI 一人事業者Claude Code + Vercel寫前端