使用 Claude Code / Antigravity + Agent Skills 從零開始打造專業網站完整教學

1. 為什麼選擇這套方案？

傳統做法 vs AI 輔助做法

項目	傳統做法	AI IDE + Skills
學習門檻	需學習 HTML/CSS/JS	用自然語言描述需求
開發時間	數週至數月	數小時至數天
設計品質	依賴個人經驗	內建 67+ 設計風格
維護難度	需持續學習新技術	AI 協助修改維護
成本	請設計師數萬元起	主機費 + AI 訂閱

這套方案的優勢

1. 零程式碼基礎：你只需要描述「我想要什麼」，AI 會幫你寫代碼
2. 專業設計品質：Design Skills 內建業界最佳實踐，避免「AI 通用風」
3. 完全控制權：你擁有所有代碼，不受平台限制
4. 可擴展性：從個人網站到企業官網都適用

2. 費用與平台選擇

2.1 主機平台：Hostinger（強烈推薦）

為什麼選 Hostinger？

• 新手友好的操作界面
• 內建 WordPress 一鍵安裝
• 提供 SSH 存取權限（這很重要！）
• 性價比最高

2026 年最新價格

方案	月費（48個月）	續約價	適合對象
Premium	$1.99/月	$10.99/月	新手首選
Business	$2.99/月	$14.99/月	需要 CDN 和進階功能
Cloud Startup	$7.99/月	$24.99/月	高流量網站

Premium 方案包含

• ✅ 免費域名（1年）
• ✅ 免費 SSL 憑證
• ✅ 免費專業電子郵件
• ✅ WordPress 預安裝
• ✅ SSH 存取
• ✅ 每週自動備份
• ✅ 30天退款保證

2.2 AI IDE 工具費用

工具	月費	特點
Claude Code	$20/月（Pro）	Anthropic 官方，代碼理解能力強
Google Antigravity	免費（個人）	Google 出品，支援多 Agent 並行
Cursor	$20/月	VS Code 改版，新手友好

新手推薦組合

• 預算有限：Antigravity（免費）+ Hostinger Premium
• 追求品質：Claude Code（$20/月）+ Hostinger Premium

2.3 總費用估算

組合	第一年費用	之後每年
免費方案	~$24（僅主機）	~$132
Pro 方案	~$264（主機+AI）	~$372

3. 工具介紹與準備

3.1 AI IDE 工具

Claude Code（推薦）

Claude Code 是 Anthropic 推出的 AI 編程助手，特點：

• 能理解整個代碼庫的架構
• 可以規劃多步驟的實現方案
• 支援「Plan Mode」先規劃後執行
• 最適合前端網站開發

安裝方式：

# macOS/Linux
npm install -g @anthropic-ai/claude-code

# 啟動
claude

Google Antigravity

Google 推出的 AI-First IDE，特點：

• 基於 VS Code，界面熟悉
• 支援 Gemini 3 Pro 模型
• Manager View：可同時派發多個 Agent 工作
• 個人版免費

兩種視圖：

1. Editor View：傳統 IDE + AI 側邊欄
2. Manager View：控制中心，管理多個 Agent 並行工作

3.2 Design Skills（設計技能）

Design Skills 是預設的設計知識庫，讓 AI 產出專業級設計。

UI/UX Pro Max Skill（推薦）

更全面的設計系統 Skill，包含：

支援技術棧：React、Next.js、Vue、Nuxt.js、Svelte、HTML+Tailwind 等 13 種

安裝方式：

npm install -g uipro-cli
uipro init --ai claude  # 用於 Claude Code
uipro init --ai cursor  # 用於 Cursor

Frontend Master Skill

我們實戰中使用的自建 Skill，特點：

• 三階段工作流程：需求理解 → 設計方案 → 代碼生成
• 強調「記憶點」設計，避免 AI 通用風
• 專門針對 WordPress 和純 HTML 優化

4. 第一步：購買並設置主機

4.1 購買 Hostinger

4.2 設置 WordPress

購買後，Hostinger 會引導你：

1. 選擇域名：可使用免費贈送的域名或連接自有域名
2. 安裝 WordPress：選擇「Install WordPress」
3. 選擇主題：建議先選「Astra」（之後我們會自訂）
4. 完成設置：記下 WordPress 管理員帳密

4.3 獲取 SSH 連接資訊

這是關鍵步驟！讓 AI IDE 可以直接操作你的伺服器。

1. 登入 Hostinger 控制面板（hPanel）
2. 點擊「Hosting」→ 選擇你的網站
3. 找到「SSH Access」或「Advanced」→「SSH」
4. 記錄以下資訊：

SSH 主機：xxx.xxx.xxx.xxx（你的 IP）
SSH 端口：65002（Hostinger 特定）
SSH 用戶名：uXXXXXXXXX
SSH 密碼：你設置的密碼

5. 第二步：安裝 AI IDE 工具

5.1 安裝 Claude Code（推薦）

方法 A：命令行安裝

# 安裝 Node.js（如果還沒有）
# macOS
brew install node

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

# 啟動
claude

方法 B：VS Code 擴展

1. 打開 VS Code
2. 擴展市場搜索「Claude Code」
3. 安裝 Anthropic 官方擴展
4. 登入你的 Anthropic 帳號

5.2 安裝 Google Antigravity

1. 前往 Antigravity 官網
2. 下載對應你系統的版本
3. 安裝並啟動
4. 使用 Google 帳號登入

5.3 首次配置

啟動 AI IDE 後：

1. 選擇工作目錄：創建一個新文件夾，如 my-website
2. 初始化項目：

mkdir my-website
cd my-website

3. 測試 AI 連接：輸入「Hello, help me build a website」

6. 第三步：設置 Design Skills

6.1 安裝 UI/UX Pro Max Skill

# 全局安裝 CLI
npm install -g uipro-cli

# 初始化（根據你使用的 AI IDE）
uipro init --ai claude    # Claude Code
uipro init --ai cursor    # Cursor
uipro init --ai windsurf  # Windsurf

6.2 驗證 Skill 已啟用

在 AI IDE 中輸入：

/frontend-master

或：

Show me the available UI styles from the design skill

AI 應該會回應可用的設計風格列表。

6.3 選擇你的設計方向

在開始前，先決定：

品牌調性

• 專業穩重（適合 B2B、企業官網）
• 活潑創意（適合個人品牌、創意產業）
• 科技現代（適合 SaaS、科技公司）
• 優雅奢華（適合高端產品、精品）

配色方案

• 深色主題（科技感、專業感）
• 淺色主題（清新、信任感）
• 高對比（強調重點、轉換導向）

7. 第四步：連接伺服器

7.1 測試 SSH 連接

在終端機輸入：

ssh -p 65002 你的用戶名@你的IP地址

輸入密碼後，如果看到伺服器命令提示符，表示連接成功。

7.2 自動化 SSH 連接

macOS 沒有預裝 sshpass，我們用 expect 替代：

expect << 'EOF'
set timeout 60
spawn ssh -o StrictHostKeyChecking=no -p 65002 你的用戶名@你的IP地址
expect "password:"
send "你的密碼\r"
expect "$ "
send "cd ~/domains/你的域名/public_html\r"
expect "$ "
send "ls -la\r"
expect "$ "
send "exit\r"
expect eof
EOF

7.3 設置部署腳本

創建 deploy.sh：

#!/bin/bash
# 部署腳本

LOCAL_DIR="/Users/你的用戶名/你的項目目錄"
REMOTE_HOST="你的IP地址"
REMOTE_PORT="65002"
REMOTE_USER="你的用戶名"
REMOTE_PATH="/home/你的用戶名/domains/你的域名/public_html"

expect -c "
spawn scp -P $REMOTE_PORT -r $LOCAL_DIR/* $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH/
expect \"password:\" { send \"你的密碼\r\" }
expect eof
"

echo "部署完成！"

8. 第五步：生成網站頁面

8.1 與 AI 溝通的正確方式

正確的提示範例：

我要建立一個 AI 教育平台的首頁，目標受眾是想學習 AI 工具的上班族。

品牌調性：科技現代、專業但親和
配色：深色主題，主色用科技藍 (#5390d9)，強調色用霓虹紫 (#9642e3)
字體：標題用 Inter，正文用 Noto Sans TC（支援繁體中文）

頁面結構：
1. Hero 區塊：大標題 + 副標題 + CTA 按鈕
2. 特色區塊：3-4 個核心價值主張
3. 課程區塊：展示主要課程卡片
4. 見證區塊：學員評價
5. CTA 區塊：行動呼籲
6. Footer：導航連結和聯絡資訊

請使用純 HTML + CSS，不要使用任何框架。
確保響應式設計支援手機和平板。

8.2 使用 Plan Mode

在 Claude Code 中，按 Shift + Tab 進入 Plan Mode：

我要建立一個包含 5 個頁面的網站：
1. 首頁 (index.html)
2. 課程頁 (courses.html)
3. 關於我 (about.html)
4. 文章列表 (articles.html)
5. 聯絡頁 (contact.html)

請先規劃整體架構和設計系統，不要直接寫代碼。

AI 會先提出完整的規劃方案，你確認後再執行。

8.3 迭代優化

第一次生成的結果通常需要調整：

這個版本不錯，但我想要：
1. Hero 區塊的標題再大一點
2. CTA 按鈕改成漸變色
3. 卡片加上 hover 效果
4. 整體加一些微動效

8.4 代碼品質檢查清單

9. 第六步：部署網站

9.1 上傳文件到伺服器

方法 A：使用 SCP 命令

# 上傳單一文件
expect -c '
spawn scp -P 65002 index.html 用戶名@IP:/home/用戶名/domains/域名/public_html/
expect "password:" { send "密碼\r" }
expect eof
'

# 上傳整個目錄
expect -c '
spawn scp -P 65002 -r ./my-website/* 用戶名@IP:/home/用戶名/domains/域名/public_html/
expect "password:" { send "密碼\r" }
expect eof
'

方法 B：使用 FileZilla（圖形界面）

1. 下載 FileZilla
2. 連接設置：
   • 主機：sftp://你的IP
   • 端口：65002
   • 用戶名/密碼：SSH 憑證
3. 拖放文件上傳

9.2 驗證部署

打開瀏覽器，訪問你的域名，確認網站正常顯示。

9.3 常見部署問題

問題	原因	解決方案
404 錯誤	文件路徑錯誤	確認上傳到 public_html
CSS 沒載入	路徑問題	使用相對路徑或絕對路徑
圖片破圖	大小寫敏感	Linux 伺服器區分大小寫

10. 第七步：SEO 優化完整流程

10.1 SEO 基礎設置清單

必備文件

1. robots.txt

User-agent: *
Allow: /

# AI 爬蟲友好（可選）
User-agent: GPTBot
Allow: /

User-agent: Google-Extended
Allow: /

Sitemap: https://你的域名/sitemap.xml

2. sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://你的域名/</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://你的域名/courses.html</loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- 添加所有頁面 -->
</urlset>

每個頁面必備

1. Title 標籤（60 字元內）

<title>頁面主題 - 品牌名 | 核心價值</title>

2. Meta Description（160 字元內）

<meta name="description" content="簡潔描述頁面內容，包含關鍵字，吸引點擊">

3. Canonical URL

<link rel="canonical" href="https://你的域名/這個頁面的路徑">

10.2 結構化數據（Schema.org）

網站 Schema：

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "你的網站名稱",
    "url": "https://你的域名/",
    "description": "網站描述",
    "publisher": {
        "@type": "Person",
        "name": "你的名字"
    }
}
</script>

文章 Schema：

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "文章標題",
    "description": "文章描述",
    "author": {
        "@type": "Person",
        "name": "作者名"
    },
    "datePublished": "2026-01-28",
    "publisher": {
        "@type": "Organization",
        "name": "網站名"
    }
}
</script>

10.3 社群分享優化（Open Graph）

<!-- Facebook / 一般社群 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://你的域名/">
<meta property="og:title" content="分享標題">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://你的域名/og-image.png">
<meta property="og:site_name" content="網站名">
<meta property="og:locale" content="zh_TW">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="分享標題">
<meta name="twitter:description" content="分享描述">
<meta name="twitter:image" content="https://你的域名/og-image.png">

10.4 Google Search Console 設置

1. 前往 Google Search Console
2. 添加資源 → 輸入你的域名
3. 驗證方式選擇「HTML 文件」
4. 下載驗證文件（如 googlexxxxxxxxxx.html）
5. 上傳到網站根目錄
6. 點擊「驗證」
7. 驗證成功後，提交 sitemap.xml

10.5 Google Analytics 4 設置

1. 前往 Google Analytics
2. 創建帳戶和資源
3. 獲取追蹤代碼：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

4. 將代碼加到所有頁面的 <head> 中

10.6 SEO 檢查清單

11. 常見問題與解決方案

Q1: WordPress 還是純 HTML？

Q2: SSH 連接失敗怎麼辦？

錯誤訊息	原因	解決方案
Connection refused	端口錯誤	確認使用 65002 端口
Permission denied	密碼錯誤	重置 SSH 密碼
Host key verification failed	首次連接	加上 -o StrictHostKeyChecking=no
sshpass not found	macOS 未安裝	改用 expect

Q3: AI 生成的設計太「普通」怎麼辦？

提升設計品質的技巧：

1. 給具體參考：
   參考 Stripe.com 的設計風格，但配色改成深色主題
2. 要求「記憶點」：
   這個設計需要有 1-2 個獨特的視覺元素，讓訪客記住這個網站
3. 分階段設計：
   先只做 Hero 區塊，確認風格後再繼續其他區塊
4. 使用 Design Skills：
   使用 Glassmorphism 風格，配上霓虹紫的強調色

Q4: 網站載入很慢怎麼辦？

優化清單：

1. 壓縮圖片（使用 WebP 格式）
2. 壓縮 CSS/JS
3. 啟用瀏覽器快取
4. 使用 CDN（Hostinger Business 方案包含）
5. 減少 HTTP 請求數量

Q5: Google 搜不到我的網站？

檢查項目：

1. robots.txt 沒有阻擋爬蟲
2. sitemap.xml 已提交到 Search Console
3. 等待 1-2 週（新網站需要時間被索引）
4. 確認有足夠的文字內容（不只是圖片）
5. 建立一些外部連結指向你的網站

12. 進階技巧與資源

12.1 自動化部署建議

使用 Git + GitHub Actions：

1. 將代碼推送到 GitHub
2. 設置 GitHub Actions 自動部署
3. 每次 push 自動更新網站

12.2 推薦學習資源

AI IDE 教學

• Claude Code 官方文檔
• Getting Started with Google Antigravity

SEO 學習

• Google SEO 入門指南
• Backlinko SEO Checklist

設計靈感

• Awwwards
• Dribbble
• Land-book

12.3 實用工具

用途	工具
圖片壓縮	TinyPNG, Squoosh
速度測試	PageSpeed Insights, GTmetrix
SEO 檢查	Ahrefs, Ubersuggest
響應式測試	Responsively App
Schema 驗證	Schema Markup Validator

總結：新手建站完整流程

預估時間

購買和設置主機	30 分鐘
安裝工具	30 分鐘
生成網站（5 頁）	2-4 小時
部署和調試	1-2 小時
SEO 優化	1-2 小時
總計	半天到一天

參考資料

• Hostinger 定價方案（專屬 20% 折扣連結）
• Claude Code 入門教學
• Google Antigravity 官方介紹
• UI/UX Pro Max Skill GitHub
• SEO 入門指南 2026