出海建站必備：7個Claude Skills讓你事半功倍
整理版優先睇
用7個Claude Skills，獨立開發者可以接近零成本喺週末內完成出海網站MVP
呢篇文章係由一位有經驗嘅獨立開發者寫嘅，佢朋友老李想用5萬蚊預算揾外包團隊做出海SaaS，但作者認為與其外包，不如用Claude Skills自己搞。文章背景係好多獨立開發者遇到嘅困境：設計唔專業、技術棧太複雜、時間同預算有限。
作者透過介紹Claude Skills嘅概念同用途，然後詳細講解咗兩套建站方案：快速MVP方案（frontend-design、landing-page-guide-v2、docs-write、git-advanced-workflows）同專業出海站方案（payload、terraform-module-library）。每個Skill都有實際案例同使用技巧，最後仲提供咗7日實戰計劃同安裝指南。
整體結論係：與其花錢揾人，不如用呢7個Skills自己動手，最快7日就可以上線第一個版本，成本接近零。作者強調「最好嘅產品唔係最完美嘅，而係最快上線嗰個」，鼓勵讀者立即行動。
- 使用Claude Skills可以接近零成本、7日內完成出海網站MVP，大幅節省外包費用同時間。
- 快速MVP方案包括frontend-design（專業設計）、landing-page-guide-v2（高轉化落地頁）、docs-write（對話式文檔）同git-advanced-workflows（專業版本管理）。
- 專業出海方案加入payload（開源CMS）同terraform-module-library（多雲部署），適合有付費用戶後嘅可擴展需求。
- 文檔同落地頁係增長引擎：完善文檔可提升40%試用轉化率，60% SEO流量來自文檔頁面。
- 立即安裝Claude Code同7個Skills，跟住7日實戰計劃，週末就可以推出自己嘅MVP產品。
frontend-design（Anthropic官方）
生成符合品牌定位、production-ready嘅前端設計，避免AI常見設計陷阱。GitHub Stars: 47.9k。
landing-page-guide-v2（社區）
基於DESIGNNAS框架，檢查並生成包含11個高轉化要素嘅落地頁。
docs-write（Metabase）
用對話式風格寫文檔，內建SEO優化，可減少80%客服工作量。GitHub Stars: 44.7k。
git-advanced-workflows
教授Feature Branch、Rebase、Git Bisect等專業Git工作流，提升版本管理效率。GitHub Stars: 24.2k。
背景問題：獨立開發者出海嘅痛
朋友老李想用5萬蚊預算揾外包做SaaS出海網站，但作者反問：「點解一定要外包？」老李話自己係後端，唔識前端設計，揾設計師同前端開發就冇咗4萬，仲要運維，5萬完全唔夠。
咩係Claude Skills？點解咁有用？
Claude Skills就好似Claude嘅「插件系統」，等於VSCode嘅插件或Chrome嘅擴展。同ChatGPT插件唔同，Claude Skills係自動識別場景，唔使手動調用。例如你話「幫我設計一個登錄頁」，Claude就會自動調用frontend-design Skill。
Claude Skills = Claude嘅「插件系統」
獲取渠道有兩個：官方Skills（github.com/anthropics/skills）同社區平台skillsmp.com（目前有44,000+個Skills）。安裝好簡單：clone倉庫然後複製到~/.claude/skills/，重啟Claude Code就自動生效。
# 安裝示例
git clone https://github.com/xxx/skill-name.git
cp -r skill-name ~/.claude/skills/
# 重啟Claude Code，自動生效快速MVP方案：週末搞掂第一個版本
呢套方案適合預算有限、想快速驗證想法嘅獨立開發者。核心目標係最快速度上線，再用frontend-design、landing-page-guide-v2、docs-write同git-advanced-workflows四個Skills搞掂。
frontend-design幫你告別千篇一律嘅AI設計
frontend-design唔係簡單套模板，而係分析品牌定位，生成production-ready嘅代碼。例如你想做一個項目管理工具，可以話：「我要做落地頁，目標用戶係歐美中小企業主。」Claude會問你核心價值主張、競品參考、品牌色調，然後輸出React組件。
使用技巧：提供參考但唔好照搬，多迭代幾輪
landing-page-guide-v2基於DESIGNNAS框架，幫你檢查落地頁係咪包含11個高轉化要素，例如獨特價值主張、社會證明、對比表等。用數據說話，避免空洞描述。
- 1 獨特價值主張（UVP）：3秒內令用戶知你做咩
- 2 英雄圖/演示視頻：可視化展示產品
- 3 核心功能（3-5個）：聚焦主要賣點
- 4 工作原理：降低理解成本
- 5 社會證明：客戶評價、使用人數
- 6 對比表：同競品或傳統方案比較
- 7 價格表：透明定價，降低決策門檻
- 8 FAQ：提前回答用戶疑慮
docs-write令文檔成為增長引擎
docs-write用對話式風格寫文檔，內建SEO優化。例如寫API文檔時，傳統係「使用Bearer Token進行身份驗證」，docs-write會變成「5分鐘接入認證」，用第二人稱、提前回答疑問、加emoji同提示框。
git-advanced-workflows教你專業版本管理，例如用Feature Branch工作流、Rebase保持提交歷史整潔、Git Bisect快速定位Bug。獨立開發者都要養成好習慣：每個功能一個分支，提交信息跟約定（feat/fix/docs）。
專業出海網站方案：可持續增長嘅基礎
當MVP驗證成功、開始有付費用戶之後，就需要升級。呢套方案適合月收入超過$1000、需要頻繁更新內容同計劃長期運營嘅產品。核心工具係payload（開源CMS）同terraform-module-library（多雲部署）。
payload係開源免費嘅CMS，性能優秀
Payload基於Node.js+MongoDB，界面現代化，API優先，方便集成到任何前端框架。你可以自定義內容模型，例如博客文章Collection包含標題、作者、SEO元數據等。市場團隊可以自己發佈文章，自動化社交媒體分享。
terraform-module-library幫你多雲部署全球化
MVP階段用Vercel或Netlify就夠，但出海後要考慮全球用戶速度、避免單一雲廠商鎖定、數據合規。Terraform可以用 Infrastructure as Code 方式一鍵部署到AWS、Cloudflare等多個區域，延遲降低70%。
- 從社區模板開始，唔好從零寫
- 分環境管理：dev/staging/prod
- 用變量管理敏感信息（API密鑰等）
- 配置自動備份：backup_retention_period = 7
實戰計劃：7日從0到1建站
作者模擬咗一個真實場景：7日做一個AI寫作工具嘅完整網站。Day1-2用frontend-design設計品牌同落地頁；Day3-4用Payload搭建CMS同Next.js前端；Day5-6用Terraform部署、docs-write寫文檔、配置Git工作流；Day7上線優化。
7日內完成MVP，14日內做到專業站
安裝步驟好簡單：先安裝Claude Code（brew install claude-code或官網下載），再創建~/.claude/skills/目錄，clone對應Skill倉庫就得。大部分Skills係開源免費，只消耗Claude API額度。
講喺前面
上個週末，我朋友老李揾到我：「我想做個SaaS出海，預算得5萬，可唔可以幫我推薦個可靠嘅外包團隊呀？」
我反問佢：「點解一定要外包？」
佢話：「我一個後端，唔識前端設計，更唔知海外用戶鍾意咩風格。揾設計師要2萬，揾前端開發又要2萬，仲要揾運維部署……計落5萬都唔夠。」
呢個係大多數獨立開發者出海時面對嘅困境：
❌ 設計唔專業，網站一睇就知係套模板，轉化率好差 ❌ 技術棧太複雜，一個人根本搞唔掂前後端+運維+文檔 ❌ 時間緊、預算少，試錯成本高，失敗咗就血本無歸
三日後，老李用Claude Code同7個Skills，週末搞掂咗MVP，第二個星期就開始收到第一批海外用戶嘅付費。佢嘅建站成本？接近0。
今日我就嚟分享呢7個Skills，以及兩套完整嘅建站方案：快速MVP和專業出海站。
咩嘢係Claude Skills？
講具體Skills之前，先講嚇咩係Claude Skills。
簡單嚟講，**Claude Skills = Claude嘅「插件系統」**。就好似VSCode有插件、Chrome有擴展咁，Skills令Claude具備咗專業領域嘅能力。
同ChatGPT插件嘅分別：
ChatGPT插件：需要手動叫用，啱曬一次性任務 Claude Skills：自動識別場景，例如你話「幫我設計一個登錄頁」，Claude會自動叫用frontend-design
獲取渠道：
官方Skills：github.com/anthropics/skills 社區Skills：skillsmp.com（目前有44,000+個Skills）
安裝好簡單：
# 1. 克隆倉庫到本地
git clone https://github.com/xxx/skill-name.git
# 2. 複製到Claude目錄
cp -r skill-name ~/.claude/skills/
# 3. 重啓Claude Code，自動生效
跟住，我哋睇嚇具體嘅Skills同使用方法。
快速建站MVP方案（週末就上到線）
呢套方案適合：
✅ 預算有限嘅獨立開發者 ✅ 需要快速驗證諗法嘅產品經理 ✅ 想喺週末上線第一個版本嘅創業者
核心目標：最快速度上線，驗證市場需求。
1. frontend-design：告別千篇一律嘅AI設計
⭐ 來源： Anthropic官方 | ⭐ Stars： 47.9k
點解需要佢？
你有冇發現，好多AI生成嘅網站睇落都係同一個樣？圓角卡片、漸變按鈕、大標題小副標題……用戶一眼就睇得出係「AI造嘅」。
frontend-design解決嘅就係呢個問題。
佢唔係簡單套模板，而係：
🎨 分析你嘅品牌定位，生成符合目標用戶品味嘅設計 🎯 避開AI常見嘅設計陷阱（例如過度用漸變、圓角半徑唔統一） 💎 生成production-ready嘅代碼，唔係嗰啲「睇落好靚，實際用唔到」嘅demo
實際案例
場景： 你要做一個面向歐美用戶嘅SaaS工具，例如「項目管理工具」。
使用方法：
我要做一個項目管理工具的落地頁，目標用戶是歐美的中小企業主。
請幫我設計一個專業、現代、值得信賴的風格。
Claude會問你：
你嘅核心價值主張係乜？（例如：「令項目管理好似傾偈咁簡單」） 有冇競品參考？（例如：「類似Asana，但更輕量」） 品牌色調？（例如：「專業藍 + 活力橙」）
生成結果：
// 不是簡單的模板，而是根據你的需求定製的React組件
export function Hero() {
return (
<section className="relative overflow-hidden bg-slate-50">
<div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">
Project management,
<span className="text-blue-600"> as simple as chatting</span>
</h1>
<p className="mt-6 text-lg leading-8 text-slate-600">
Stop juggling spreadsheets and endless Slack threads.
Manage your team's work in one place—without the complexity.
</p>
<div className="mt-10 flex items-center gap-x-6">
<Button size="lg" variant="primary">
Start free trial
</Button>
<Button size="lg" variant="ghost">
Watch demo <PlayIcon className="ml-2 h-4 w-4" />
</Button>
</div>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none">
{/* 產品截圖 */}
</div>
</div>
</section>
)
}
留意呢啲細節：
✅ 用咗情感詞彙：「as simple as chatting」 ✅ 針對痛點：「Stop juggling spreadsheets」 ✅ 明確CTA：「Start free trial」 vs 「Watch demo」 ✅ 專業嘅間距同字體層級
使用技巧：
提供參考，但唔好照抄
❌ "幫我做一個和Linear一模一樣的設計"
✅ "我喜歡Linear的極簡風格，但希望更温暖一些，適合非技術團隊"多迭代幾次
第一輪："設計一個Hero區"
第二輪："再加一個Features對比表"
第三輪："把CTA按鈕改成更有緊迫感的文案"叫Claude解釋設計決策
"為什麼你選擇藍色作為主色調？"
"為什麼這裏用了卡片佈局而不是列表？"
適用場景：
✅ 產品落地頁 ✅ 營銷網站 ✅ SaaS應用界面 ✅ 博客同內容站 ❌ 電商網站（需要更多專業設計） ❌ 複雜嘅Dashboard（建議用成熟組件庫）
2. landing-page-guide-v2：高轉化落地頁嘅11個要素
⭐ 來源： 社區（基於DESIGNNAS框架）
點解需要佢？
一個殘酷事實： 90%嘅落地頁轉化率唔到1%。
唔係因為產品唔好，而係落地頁缺少關鍵要素。DESIGNNAS總結咗高轉化落地頁必備嘅11個元素，呢個Skill會幫你檢查並生成完整嘅落地頁。
11個必備要素：
✅ 獨特價值主張（UVP） - 3秒內令用戶知道你係做咩 ✅ 英雄圖/演示視頻 - 可視化展示產品 ✅ 核心功能（3-5個） - 聚焦主要賣點 ✅ 工作原理 - 降低理解成本 ✅ 社會證明 - 客戶評價、使用人數、知名客戶 ✅ 對比表 - 同競品或者傳統方案對比 ✅ 價格表 - 透明定價，降低決策門檻 ✅ FAQ - 提前回答用戶疑慮 ✅ 明確CTA - 每版都有清晰嘅下一步 ✅ 信任標識 - 安全認證、媒體報道 ✅ 緊迫感 - 限時優惠、剩餘名額
實際案例
使用方法：
我要做一個AI寫作工具的落地頁，幫我檢查是否包含了所有高轉化要素。
產品信息：
- 名稱：WriteFlow
- 價值主張：10分鐘寫出SEO友好的博客文章
- 目標用戶：內容創作者、市場營銷人員
- 核心功能：AI大綱生成、SEO關鍵詞優化、多語言支持
- 定價：免費試用 → $29/月
Claude會生成完整嘅落地頁結構：
## 1. Hero區（摺疊上方）
[大標題] Write SEO-ready blog posts in 10 minutes
[副標題] Stop spending hours on research. Let AI handle the heavy lifting while you focus on your unique insights.
[CTA] Start writing for free →
[信任標識] ⭐⭐⭐⭐⭐ 4.8/5 from 1,240 creators | No credit card required
## 2. 社會證明
"WriteFlow cut my content production time by 70%. I'm publishing 3x more without sacrificing quality."
— Sarah Chen, Content Lead @ TechStartup
[顯示] 10,000+ articles written | 2,500+ active users
## 3. 核心功能
### 🎯 AI-Powered Outlines
Input your topic, get a structured outline in seconds. Based on top-ranking articles in your niche.
### 🔍 Built-in SEO Optimization
Real-time keyword suggestions, readability scores, and meta description generation.
### 🌍 Multi-language Support
Write in English, translate to 12+ languages with native-level quality.
## 4. 工作原理（3步）
1️⃣ Enter your topic and target keywords
2️⃣ AI generates outline + research → You add your insights
3️⃣ One-click optimization for SEO and readability
[動畫演示視頻]
## 5. 對比表：傳統方式 vs WriteFlow
| 傳統方式 | WriteFlow |
|---------|-----------|
| 研究競品文章：2小時 | AI分析Top 10：2分鐘 |
| 手動優化SEO：1小時 | 實時SEO建議：0分鐘 |
| 總耗時：4-6小時 | 總耗時：10-20分鐘 |
## 6. 定價
### Free Trial
- 3 articles/month
- All core features
[CTA] Start free →
### Pro - $29/month
- Unlimited articles
- Priority support
- Advanced SEO tools
[CTA] Start 14-day trial →
## 7. FAQ
Q: 會不會生成"AI味"很重的內容？
A: 不會。WriteFlow只生成大綱和研究，核心內容由你撰寫，保持你的獨特風格。
Q: 支持中文嗎？
A: 支持中文、英文、日文等12種語言。
## 8. 最後的CTA
Ready to 10x your content output?
[CTA] Start your free trial — No credit card required →
[信任標識] 🔒 SSL Secured | 💳 Cancel anytime | 📧 24/7 Support
使用技巧：
用數據講嘢，唔好空泛描述
❌ "WriteFlow很快"
✅ "10分鐘完成，比傳統方式快6倍"每個區塊都要有明確嘅CTA
Hero區：Start free trial
功能區：See how it works
定價區：Choose your plan
底部：Last chance to try free針對唔同用戶羣，準備多個版本
版本A：強調速度（"10分鐘完成"）
版本B：強調質量（"SEO友好，排名更高"）
A/B測試，看哪個轉化率更高
適用場景：
✅ SaaS產品落地頁 ✅ 數碼產品（課程、電子書） ✅ App下載頁 ❌ 純內容網站 ❌ 企業官網（需求更複雜）
3. docs-write：令文檔成為你嘅增長引擎
⭐ 來源： Metabase | ⭐ Stars： 44.7k
點解需要佢？
好多人以為，文檔只係「畀用戶睇嘅使用說明」。
錯啦。好嘅文檔係增長引擎。
數據顯示：
📈 有完善文檔嘅產品，試用轉化率提升40% 📈 SEO流量中，**60%**嚟自文檔同教程頁面 📈 好嘅文檔可以減少**80%**嘅客服工作量
docs-write做啲乜：
✍️ 用對話式風格寫文檔，唔係冷冰冰嘅「技術手冊」 🎯 SEO優化，令文檔成為流量入口 📚 自動生成目錄、導航、搜尋功能
實際案例
場景： 你做咗一個API工具，需要寫API文檔。
傳統方式（沉悶）：
## Authentication
使用Bearer Token進行身份驗證。
請求示例：
```http
GET /api/users
Authorization: Bearer YOUR_TOKEN
**用docs-write（吸引人）：**
我要寫一個API認證嘅文檔，令開發者快速上手。
**Claude生成：**
```markdown
# 5分鐘接入認證
## 你需要什麼
在開始之前，確保你有：
- ✅ 一個WriteFlow賬號（[免費註冊](連結)）
- ✅ 你的API密鑰（在 設置 → API 中獲取）
## 快速開始
### 1. 獲取你的API密鑰
登錄後，進入 **設置 → API**，點擊"生成新密鑰"。
⚠️ **重要：** 請妥善保管你的密鑰，不要提交到GitHub！
### 2. 發起第一個請求
用你喜歡的工具（curl、Postman、或任何HTTP客戶端），發送這個請求：
```bash
curl -X GET "https://api.writeflow.com/users/me" \
-H "Authorization: Bearer YOUR_API_KEY"
期待嘅回應：
{
"id": "user_abc123",
"email": "you@example.com",
"plan": "pro",
"credits_remaining": 950
}
3. 常見問題
❓ 收到401錯誤？
檢查API密鑰有冇複製正確（唔好有多餘空格） 確認賬號狀態係咪正常
❓ 請求速率限制？
免費用戶：100次/小時 Pro用戶：1000次/小時 需要更多？聯絡我哋
下一步
而家你已經成功認證啦！下一步：
📝 建立你嘅第一篇文章 🔍 探索所有API端點 💬 加入開發者社區
仲有問題？ 喺我哋嘅Discord社區問，通常10分鐘內就有回覆。
**看到區別了嗎？**
| 傳統文檔 | docs-write風格 |
|---------|--------------|
| "使用Bearer Token" | "5分鐘接入認證" |
| 冷冰冰的代碼 | 對話式引導 |
| 假設用戶都懂 | 提前解答疑惑 |
| 沒有下一步 | 明確引導："接下來做什麼" |
**使用技巧：**
1. **用第二人稱，像和朋友聊天**
❌ 「用戶應該喺設定揾到API密鑰」 ✅ 「你可以喺 設定 → API 揾到你嘅密鑰」
2. **提前回答用戶的疑問**
每寫完一段，問自己：「用戶睇到呢度會有咩疑問？」然後用FAQ或者提示框解答
3. **多用視覺元素**
✅ 用emoji表示檢查項 ⚠️ 用警告框標註重要信息 💡 用提示框畀出最佳實踐
4. **SEO優化：每個標題都是搜索詞**
❌ 「認證」 ✅ 「點樣拎WriteFlow API密鑰並認證」
**適用場景：**
- ✅ API文檔
- ✅ 產品使用手冊
- ✅ 教程和最佳實踐
- ✅ 博客文章
- ❌ 法律條款（需要嚴謹表述）
---
### 4. git-advanced-workflows：一個人也能專業版本管理
**⭐ Stars：** 24.2k
#### 為什麼需要它？
很多獨立開發者的Git使用：
```bash
git add .
git commit -m "更新"
git push
咁做嘅問題：
❌ 提交歷史混亂，回滾困難 ❌ 多功能並行開發時，容易衝突 ❌ 出咗Bug唔知係邊次提交搞成咁
git-advanced-workflows教你：
🌿 Feature Branch工作流（唔同功能喺唔同分支開發） 🔄 Rebase保持提交歷史整潔 🐛 Git Bisect快速定位Bug 💾 Worktrees同時維護多個版本
實際案例
場景： 你正開發「用戶認證」功能，但突然有個緊急Bug需要修復。
糟糕嘅做法：
# 在當前分支修改，提交歷史混在一起
git commit -m "修了個Bug，還加了認證功能"
用git-advanced-workflows：
我正在開發用戶認證功能（feature/auth分支），
但現在有個緊急Bug需要修復，怎麼處理？
Claude會教你：
# 1. 保存當前工作（不提交）
git stash push -m "認證功能開發中"
# 2. 切換到main分支
git checkout main
# 3. 創建hotfix分支
git checkout -b hotfix/login-error
# 4. 修復Bug並提交
git commit -m "fix: 修復登錄時的空指針異常"
# 5. 合併到main
git checkout main
git merge hotfix/login-error
# 6. 部署修復
# 7. 回到feature分支繼續開發
git checkout feature/auth
git stash pop
更進階嘅用法：Rebase保持提交歷史整潔
我的feature分支有10個提交，但很多是"修復拼寫錯誤"、"忘記加分號"，
怎麼整理成幾個清晰的提交？
Claude教你Interactive Rebase：
# 1. 查看最近10個提交
git log --oneline -10
# 2. 交互式rebase
git rebase -i HEAD~10
# 3. 在編輯器中，把零碎提交合並（squash）
pick abc123 添加用戶認證基礎結構
squash def456 修復拼寫錯誤
squash ghi789 忘記加分號
pick jkl012 完成JWT驗證邏輯
squash mno345 修復測試用例
# 4. 保存後，整理提交信息
結果： 10個亂七八糟嘅提交 → 2個清晰嘅提交
使用技巧：
養成好習慣：每個功能一個分支
feature/user-auth # 用戶認證
feature/payment # 支付功能
hotfix/critical-bug # 緊急修復提交信息跟返約定
feat: 添加用戶註冊功能
fix: 修復登錄失敗的Bug
docs: 更新API文檔
refactor: 重構認證邏輯定期rebase，保持分支同步
# 每天開始工作前
git checkout main
git pull
git checkout feature/your-feature
git rebase main
適用場景：
✅ 獨立開發者（一個人都要專業） ✅ 小團隊協作 ✅ 需要頻繁回滾嘅項目 ❌ 簡單嘅靜態網站（用唔着）
專業出海網站方案（可持續增長）
如果你嘅MVP驗證成功，開始有付費用戶，就應該考慮升級到「專業方案」。
呢套方案適合：
✅ 月收入超過$1000嘅產品 ✅ 需要頻密更新內容（博客、產品更新） ✅ 計劃長期營運，唔係「一鑊過買賣」
核心目標：可擴展、易維護、全球化。
5. payload：開源CMS，內容管理唔使求人
⭐ Stars： 39.0k
點解需要佢？
MVP階段，你可能直接將文案寫喺代碼入面：
<h1>我們的產品很棒</h1>
但當你需要：
✏️ 每星期更新博客 📢 發佈產品更新日誌 🌍 加多語言支援 👥 讓市場團隊自己更新文案
呢個時候，你需要一個CMS（內容管理系統）。
Payload嘅優勢：
🆓 開源免費（WordPress太老，Contentful太貴） ⚡ 性能優秀（基於Node.js + MongoDB） 🎨 界面現代化（唔似WordPress咁老土） 🔌 API優先（方便整合到任何前端框架）
實際案例
場景： 你嘅SaaS工具需要一個博客，SEO引流。
步驟1：安裝Payload
npx create-payload-app my-blog
cd my-blog
npm run dev
步驟2：定義內容結構
幫我創建一個博客的Collection，包含：
- 標題、作者、正文、發佈時間
- SEO元數據（meta description、keywords）
- 特色圖片
Claude生成配置：
// collections/Posts.ts
export const Posts = {
slug: 'posts',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'author',
type: 'relationship',
relationTo: 'users',
},
{
name: 'content',
type: 'richText',
required: true,
},
{
name: 'featuredImage',
type: 'upload',
relationTo: 'media',
},
{
name: 'publishedAt',
type: 'date',
},
{
name: 'seo',
type: 'group',
fields: [
{
name: 'metaTitle',
type: 'text',
},
{
name: 'metaDescription',
type: 'textarea',
},
{
name: 'keywords',
type: 'text',
},
],
},
],
}
步驟3：喺前端叫用
// 在Next.js中獲取博客文章
const posts = await fetch('http://localhost:3000/api/posts')
.then(res => res.json())
// 渲染
posts.docs.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.author.name}</p>
<img src={post.featuredImage.url} alt={post.title} />
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
))
效果：
✅ 市場團隊可以自己發佈文章，唔使揾開發 ✅ 自動生成SEO元數據 ✅ 圖片自動壓縮同CDN加速 ✅ 支援草稿同定時發佈
使用技巧：
規劃好內容模型
不要一股腦把所有字段都加上
先列出核心字段，後續再擴展利用Hooks自動化
// 發佈文章時，自動發送到社交媒體
hooks: {
afterChange: [
async ({ doc }) => {
if (doc.published) {
await postToTwitter(doc.title, doc.url)
}
}
]
}配置權限
編輯人員：可以寫文章，但不能發佈
管理員：可以發佈和刪除
適用場景：
✅ 博客同內容營銷 ✅ 產品文檔 ✅ 多語言網站 ❌ 簡單嘅靜態頁面（用唔着） ❌ 電商（建議用Shopify）
6. terraform-module-library：多雲部署，全球化無煩惱
⭐ Stars： 24.2k
點解需要佢？
MVP階段： 你可能將網站部署喺Vercel或Netlify，㩒嚇滑鼠就搞掂。
但當你出海之後，會遇到呢啲問題：
🌍 歐洲用戶訪問好慢（伺服器喺美國） 💸 單一雲廠商鎖定（想轉會好麻煩） 🔒 數據合規要求（歐盟GDPR要求數據一定要喺歐洲）
terraform-module-library幫你：
🌐 多雲部署（AWS + Cloudflare + Vercel） 🚀 一鍵部署到全球多個節點 📝 基礎設施即代碼（方便團隊協作同版本管理）
實際案例
場景： 你嘅SaaS工具有美國、歐洲、亞洲用戶，需要部署到多個區域。
傳統方式：
打開AWS控制枱 → 手動建立EC2 設定負載均衡器 設定CDN 設定數據庫 重複以上步驟，分別喺us-east-1、eu-west-1、ap-southeast-1...
用Terraform（自動化）：
我要部署一個Next.js應用到AWS，
需要在美國、歐洲、亞洲各部署一個節點。
Claude生成Terraform配置：
# main.tf
module "us_deployment" {
source = "./modules/nextjs-app"
region = "us-east-1"
app_name = "myapp-us"
domain = "us.myapp.com"
}
module "eu_deployment" {
source = "./modules/nextjs-app"
region = "eu-west-1"
app_name = "myapp-eu"
domain = "eu.myapp.com"
}
module "asia_deployment" {
source = "./modules/nextjs-app"
region = "ap-southeast-1"
app_name = "myapp-asia"
domain = "asia.myapp.com"
}
# 配置Cloudflare負載均衡
resource "cloudflare_load_balancer" "main" {
zone_id = var.cloudflare_zone_id
name = "myapp.com"
default_pool_ids = [
cloudflare_load_balancer_pool.us.id,
cloudflare_load_balancer_pool.eu.id,
cloudflare_load_balancer_pool.asia.id,
]
# 根據用戶地理位置自動路由
geo_balancing = {
enabled = true
}
}
一鍵部署：
# 1. 初始化
terraform init
# 2. 預覽變更
terraform plan
# 3. 執行部署
terraform apply
結果：
🌍 美國用戶訪問美國節點 🇪🇺 歐洲用戶訪問歐洲節點 🌏 亞洲用戶訪問亞洲節點 ⚡ 延遲降低70%
使用技巧：
由模板開始，唔好從零寫
# 使用社區模板
git clone https://github.com/terraform-aws-modules/terraform-aws-vpc.git分環境管理
terraform/
├── dev/ # 開發環境
├── staging/ # 測試環境
└── prod/ # 生產環境用變量管理敏感資料
# 不要直接寫死API密鑰
variable "aws_access_key" {
type = string
sensitive = true
}設定自動備份
# 每天自動備份數據庫
resource "aws_db_instance" "main" {
backup_retention_period = 7
backup_window = "03:00-04:00"
}
適用場景：
✅ 全球化產品 ✅ 需要多區域部署 ✅ 團隊協作（大家用同一套配置） ❌ 簡單嘅單伺服器部署 ❌ 完全依賴無伺服器平台（Vercel/Netlify）
實戰：用呢7個Skills從0到1建站
等我哋模擬一個真實場景：7日做一個AI寫作工具嘅完整網站。
Day 1-2：設計同落地頁
目標： 完成品牌設計同高轉化落地頁
步驟：
# 1. 用frontend-design設計品牌風格
"幫我設計一個AI寫作工具的品牌風格，目標用戶是內容創作者"
# 2. 用landing-page-guide-v2生成落地頁結構
"根據DESIGNNAS框架，生成完整的落地頁"
# 3. 迭代優化
"這個Hero區的文案不夠吸引人，幫我改得更有衝擊力"
產出：
✅ 品牌配色、字體、Logo ✅ 落地頁嘅React組件代碼 ✅ 響應式設計（手機版適應）
Day 3-4：開發同CMS
目標： 搭建產品原型同博客系統
步驟：
# 1. 初始化項目
npx create-next-app@latest myapp
cd myapp
# 2. 集成Payload CMS
npx create-payload-app blog
cd blog && npm run dev
# 3. 配置Content Collections
"幫我創建Blog Post的Collection，包含SEO字段"
# 4. 連接前端
"在Next.js中調用Payload API，渲染博客文章列表"
產出：
✅ Next.js前端應用 ✅ Payload CMS後台 ✅ 博客系統（支援發佈文章）
Day 5-6：部署同文檔
目標： 部署到生產環境，編寫用戶文檔
步驟：
# 1. 用Terraform配置基礎設施
"幫我寫一個Terraform配置，部署到AWS"
# 2. 執行部署
terraform init
terraform apply
# 3. 用docs-write編寫文檔
"幫我寫一個快速開始文檔，教用戶如何使用AI寫作工具"
# 4. 配置Git工作流
"幫我設置Feature Branch工作流，配置CI/CD"
產出：
✅ 網站部署到生產環境 ✅ 用戶文檔同API文檔 ✅ 自動化部署流程
Day 7：上線同優化
目標： 最後檢查，正式上線
檢查清單：
[ ] 落地頁轉化元素齊全（UVP、CTA、社會證明） [ ] 博客至少有3篇SEO文章 [ ] 文檔完整（快速開始、API文檔、FAQ） [ ] 全球CDN加速 [ ] 手機版適應 [ ] SSL證書設定 [ ] Google Analytics埋點
上線：
# 切換DNS
# 監控網站性能
# 在Product Hunt發佈
安裝同使用指南
1. 安裝Claude Code
方式一：官網下載
訪問 claude.ai/code 下載對應系統版本（Mac/Windows/Linux） 安裝並登入
方式二：通過套件管理器（推薦）
# macOS
brew install --cask claude-code
# Windows
winget install Anthropic.ClaudeCode
# Linux
curl -fsSL https://claude.ai/install.sh | sh
2. 安裝Skills
方式一：從GitHub複製
# 1. 創建Skills目錄
mkdir -p ~/.claude/skills
# 2. 克隆Skill倉庫
cd ~/.claude/skills
# 安裝frontend-design
git clone https://github.com/anthropics/claude-code.git
cp -r claude-code/plugins/frontend-design/skills/frontend-design ./
# 安裝其他Skills
git clone https://github.com/xxx/landing-page-guide-v2.git
git clone https://github.com/xxx/docs-write.git
# ...
方式二：通過Claude Code插件市場（如果支援）
# 在Claude Code中執行
/plugin install frontend-design
/plugin install landing-page-guide-v2
/plugin install docs-write
/plugin install git-advanced-workflows
/plugin install payload
/plugin install terraform-module-library
3. 驗證安裝
啟動Claude Code，輸入：
列出我已安裝的所有Skills
你應該見到：
已安裝的Skills：
✅ frontend-design
✅ landing-page-guide-v2
✅ docs-write
✅ git-advanced-workflows
✅ payload
✅ terraform-module-library
4. 常見問題
Q：Skill唔生效點算？
# 1. 檢查目錄結構
ls -la ~/.claude/skills/frontend-design/
# 應該有 SKILL.md 文件
# 2. 重啓Claude Code
# 3. 手動加載
/skills reload
Q：可以同時用多個Skills嗎？
可以！Claude會自動識別場景，叫用合適嘅Skill。
Q：Skills會收費嗎？
大部分Skills係開源免費嘅。用Skills只係消耗你嘅Claude API額度。
Q：可以自己開發Skills嗎？
可以！參考官方文檔：docs.anthropic.com/skills
講喺最後
返回文章開頭嘅問題：出海建站，5萬預算夠唔夠？
用呢7個Skills，你連5000蚊都唔使花。
快速建站MVP方案（成本：接近0）：
frontend-design：設計費慳返2萬 landing-page-guide-v2：文案策劃慳返5000 docs-write：技術寫作慳返8000 git-advanced-workflows：版本管理規範，避免翻工
專業出海網站方案（成本：伺服器費用）：
payload：CMS訂閲費慳返每月$299 terraform-module-library：運維成本降低70%
更重要嘅係時間成本：
傳統方式：揾外包2-3個月 用Skills：7日MVP，14日專業站
揀適合你嘅方案
如果你係：
🚀 首次創業者 / 想快速驗證諗法
→ 揀快速MVP方案
先用frontend-design + landing-page-guide-v2做落地頁 用docs-write寫1-2篇SEO文章 跑通第一批用戶之後，先考慮升級
💼 有產品經驗 / 計劃長期營運
→ 直接上專業方案
前期多花3-5日，搭建Payload CMS 設定Terraform多區域部署 建立規範嘅Git工作流
🎯 技術團隊 / 需要可擴展性
→ 兩個方案都用
MVP階段：快速驗證 成長階段：升級基礎設施 成熟階段：多雲、多區域、CDN
下一步
立即行動：
安裝Claude Code → claude.ai/code 安裝7個Skills → 跟住上面嘅指南操作 揾個週末，做個MVP → 7日後，你會擁有自己嘅產品
進階學習：
📚 skillsmp.com - 探索更多Skills（44,000+個） 📖 Claude Code文檔 - 深入學習 💬 Discord社區 - 同其他開發者交流
最後，記住一句話：
「最好嘅產品唔係最完美嘅，而係最快上線嗰個。」
唔好等到萬事俱備先開始。用呢7個Skills，呢個週末就鬱手啦。
你嘅第一個出海產品，正等緊你。🚀
如果呢篇文章對你有幫助，歡迎分享畀更多出海創業者。
有問題？喺留言區留言，我會盡快回覆。👇
寫在前面
上週末，我的朋友老李找到我：「我想做個SaaS出海，預算只有5萬，能幫我推薦個靠譜的外包團隊嗎？」
我反問他：「為什麼一定要外包？」
他說：「我一個後端，不懂前端設計，更不懂海外用戶喜歡什麼風格。找設計師要2萬，找前端開發又要2萬，還得找運維部署……算下來5萬都不夠。」
這是大多數獨立開發者出海時面臨的困境：
❌ 設計不專業，網站一看就是套的模板，轉化率慘淡 ❌ 技術棧太複雜，一個人根本搞不定前後端+運維+文檔 ❌ 時間緊、預算少，試錯成本高，失敗了就血本無歸
三天後，老李用Claude Code和7個Skills，週末搞定了MVP，第二週就開始收到第一批海外用戶的付費。他的建站成本？接近0。
今天我就來分享這7個Skills，以及兩套完整的建站方案：快速MVP和專業出海站。
什麼是Claude Skills？
在講具體Skills之前，先說說什麼是Claude Skills。
簡單來說，**Claude Skills = Claude的"插件系統"**。就像VSCode有插件、Chrome有擴展一樣，Skills讓Claude具備了專業領域的能力。
和ChatGPT插件的區別：
ChatGPT插件：需要手動調用，適合單次任務 Claude Skills：自動識別場景，比如你說"幫我設計一個登錄頁"，Claude會自動調用frontend-design
獲取渠道：
官方Skills：github.com/anthropics/skills 社區Skills：skillsmp.com（目前有44,000+個Skills）
安裝很簡單：
# 1. 克隆倉庫到本地
git clone https://github.com/xxx/skill-name.git
# 2. 複製到Claude目錄
cp -r skill-name ~/.claude/skills/
# 3. 重啓Claude Code，自動生效
接下來，我們看看具體的Skills和使用方法。
快速建站MVP方案（週末就能上線）
這套方案適合：
✅ 預算有限的獨立開發者 ✅ 需要快速驗證想法的產品經理 ✅ 想要在週末上線第一個版本的創業者
核心目標：最快速度上線，驗證市場需求。
1. frontend-design：告別千篇一律的AI設計
⭐ 來源： Anthropic官方 | ⭐ Stars： 47.9k
為什麼需要它？
你有沒有發現，很多AI生成的網站看起來都一個樣？圓角卡片、漸變按鈕、大標題小副標題……用戶一眼就能看出是"AI做的"。
frontend-design解決的就是這個問題。
它不是簡單地套模板，而是：
🎨 分析你的品牌定位，生成符合目標用戶審美的設計 🎯 避免AI常見的設計陷阱（比如過度使用漸變、圓角半徑不統一） 💎 生成production-ready的代碼，不是那種"看起來很美，實際無法使用"的demo
實際案例
場景： 你要做一個面向歐美用戶的SaaS工具，比如"項目管理工具"。
使用方法：
我要做一個項目管理工具的落地頁，目標用戶是歐美的中小企業主。
請幫我設計一個專業、現代、值得信賴的風格。
Claude會問你：
你的核心價值主張是什麼？（比如："讓項目管理像聊天一樣簡單"） 有沒有競品參考？（比如："類似Asana，但更輕量"） 品牌色調？（比如："專業藍 + 活力橙"）
生成結果：
// 不是簡單的模板，而是根據你的需求定製的React組件
export function Hero() {
return (
<section className="relative overflow-hidden bg-slate-50">
<div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">
Project management,
<span className="text-blue-600"> as simple as chatting</span>
</h1>
<p className="mt-6 text-lg leading-8 text-slate-600">
Stop juggling spreadsheets and endless Slack threads.
Manage your team's work in one place—without the complexity.
</p>
<div className="mt-10 flex items-center gap-x-6">
<Button size="lg" variant="primary">
Start free trial
</Button>
<Button size="lg" variant="ghost">
Watch demo <PlayIcon className="ml-2 h-4 w-4" />
</Button>
</div>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none">
{/* 產品截圖 */}
</div>
</div>
</section>
)
}
注意這些細節：
✅ 使用了情感詞彙："as simple as chatting" ✅ 針對痛點："Stop juggling spreadsheets" ✅ 明確CTA："Start free trial" vs "Watch demo" ✅ 專業的間距和字體層級
使用技巧：
提供參考，但不要照搬
❌ "幫我做一個和Linear一模一樣的設計"
✅ "我喜歡Linear的極簡風格，但希望更温暖一些，適合非技術團隊"多迭代幾輪
第一輪："設計一個Hero區"
第二輪："再加一個Features對比表"
第三輪："把CTA按鈕改成更有緊迫感的文案"讓Claude解釋設計決策
"為什麼你選擇藍色作為主色調？"
"為什麼這裏用了卡片佈局而不是列表？"
適用場景：
✅ 產品落地頁 ✅ 營銷網站 ✅ SaaS應用界面 ✅ 博客和內容站 ❌ 電商網站（需要更多專業設計） ❌ 複雜的Dashboard（建議用成熟組件庫）
2. landing-page-guide-v2：高轉化落地頁的11個要素
⭐ 來源： 社區（基於DESIGNNAS框架）
為什麼需要它？
一個殘酷的事實： 90%的落地頁轉化率不到1%。
不是因為產品不好，而是因為落地頁缺少關鍵要素。DESIGNNAS總結了高轉化落地頁必備的11個元素，這個Skill會幫你檢查並生成完整的落地頁。
11個必備要素：
✅ 獨特價值主張（UVP） - 3秒內讓用戶知道你是幹什麼的 ✅ 英雄圖/演示視頻 - 可視化展示產品 ✅ 核心功能（3-5個） - 聚焦主要賣點 ✅ 工作原理 - 降低理解成本 ✅ 社會證明 - 客戶評價、使用人數、知名客戶 ✅ 對比表 - 和競品或傳統方案對比 ✅ 價格表 - 透明定價，降低決策門檻 ✅ FAQ - 提前回答用戶疑慮 ✅ 明確CTA - 每屏都有清晰的下一步 ✅ 信任標識 - 安全認證、媒體報道 ✅ 緊迫感 - 限時優惠、剩餘名額
實際案例
使用方法：
我要做一個AI寫作工具的落地頁，幫我檢查是否包含了所有高轉化要素。
產品信息：
- 名稱：WriteFlow
- 價值主張：10分鐘寫出SEO友好的博客文章
- 目標用戶：內容創作者、市場營銷人員
- 核心功能：AI大綱生成、SEO關鍵詞優化、多語言支持
- 定價：免費試用 → $29/月
Claude會生成完整的落地頁結構：
## 1. Hero區（摺疊上方）
[大標題] Write SEO-ready blog posts in 10 minutes
[副標題] Stop spending hours on research. Let AI handle the heavy lifting while you focus on your unique insights.
[CTA] Start writing for free →
[信任標識] ⭐⭐⭐⭐⭐ 4.8/5 from 1,240 creators | No credit card required
## 2. 社會證明
"WriteFlow cut my content production time by 70%. I'm publishing 3x more without sacrificing quality."
— Sarah Chen, Content Lead @ TechStartup
[顯示] 10,000+ articles written | 2,500+ active users
## 3. 核心功能
### 🎯 AI-Powered Outlines
Input your topic, get a structured outline in seconds. Based on top-ranking articles in your niche.
### 🔍 Built-in SEO Optimization
Real-time keyword suggestions, readability scores, and meta description generation.
### 🌍 Multi-language Support
Write in English, translate to 12+ languages with native-level quality.
## 4. 工作原理（3步）
1️⃣ Enter your topic and target keywords
2️⃣ AI generates outline + research → You add your insights
3️⃣ One-click optimization for SEO and readability
[動畫演示視頻]
## 5. 對比表：傳統方式 vs WriteFlow
| 傳統方式 | WriteFlow |
|---------|-----------|
| 研究競品文章：2小時 | AI分析Top 10：2分鐘 |
| 手動優化SEO：1小時 | 實時SEO建議：0分鐘 |
| 總耗時：4-6小時 | 總耗時：10-20分鐘 |
## 6. 定價
### Free Trial
- 3 articles/month
- All core features
[CTA] Start free →
### Pro - $29/month
- Unlimited articles
- Priority support
- Advanced SEO tools
[CTA] Start 14-day trial →
## 7. FAQ
Q: 會不會生成"AI味"很重的內容？
A: 不會。WriteFlow只生成大綱和研究，核心內容由你撰寫，保持你的獨特風格。
Q: 支持中文嗎？
A: 支持中文、英文、日文等12種語言。
## 8. 最後的CTA
Ready to 10x your content output?
[CTA] Start your free trial — No credit card required →
[信任標識] 🔒 SSL Secured | 💳 Cancel anytime | 📧 24/7 Support
使用技巧：
用數據說話，不要空洞描述
❌ "WriteFlow很快"
✅ "10分鐘完成，比傳統方式快6倍"每個區塊都要有明確的CTA
Hero區：Start free trial
功能區：See how it works
定價區：Choose your plan
底部：Last chance to try free針對不同用戶羣體，準備多個版本
版本A：強調速度（"10分鐘完成"）
版本B：強調質量（"SEO友好，排名更高"）
A/B測試，看哪個轉化率更高
適用場景：
✅ SaaS產品落地頁 ✅ 數字產品（課程、電子書） ✅ App下載頁 ❌ 純內容網站 ❌ 企業官網（需求更復雜）
3. docs-write：讓文檔成為你的增長引擎
⭐ 來源： Metabase | ⭐ Stars： 44.7k
為什麼需要它？
很多人以為，文檔只是"給用戶看的使用說明"。
錯了。好的文檔是增長引擎。
數據顯示：
📈 有完善文檔的產品，試用轉化率提升40% 📈 SEO流量中，**60%**來自文檔和教程頁面 📈 好的文檔能減少**80%**的客服工作量
docs-write做什麼：
✍️ 用對話式風格寫文檔，不是冷冰冰的"技術手冊" 🎯 SEO優化，讓文檔成為流量入口 📚 自動生成目錄、導航、搜索功能
實際案例
場景： 你做了一個API工具，需要寫API文檔。
傳統方式（枯燥）：
## Authentication
使用Bearer Token進行身份驗證。
請求示例：
```http
GET /api/users
Authorization: Bearer YOUR_TOKEN
**用docs-write（吸引人）：**
我要寫一個API認證的文檔，讓開發者快速上手。
**Claude生成：**
```markdown
# 5分鐘接入認證
## 你需要什麼
在開始之前，確保你有：
- ✅ 一個WriteFlow賬號（[免費註冊](連結)）
- ✅ 你的API密鑰（在 設置 → API 中獲取）
## 快速開始
### 1. 獲取你的API密鑰
登錄後，進入 **設置 → API**，點擊"生成新密鑰"。
⚠️ **重要：** 請妥善保管你的密鑰，不要提交到GitHub！
### 2. 發起第一個請求
用你喜歡的工具（curl、Postman、或任何HTTP客戶端），發送這個請求：
```bash
curl -X GET "https://api.writeflow.com/users/me" \
-H "Authorization: Bearer YOUR_API_KEY"
期待的響應：
{
"id": "user_abc123",
"email": "you@example.com",
"plan": "pro",
"credits_remaining": 950
}
3. 常見問題
❓ 收到401錯誤？
檢查API密鑰是否複製正確（不要有多餘空格） 確認賬號狀態是否正常
❓ 請求速率限制？
免費用戶：100次/小時 Pro用戶：1000次/小時 需要更多？聯繫我們
下一步
現在你已經成功認證了！接下來：
📝 創建你的第一篇文章 🔍 探索所有API端點 💬 加入開發者社區
還有問題？ 在我們的Discord社區提問，通常10分鐘內就有回覆。
**看到區別了嗎？**
| 傳統文檔 | docs-write風格 |
|---------|--------------|
| "使用Bearer Token" | "5分鐘接入認證" |
| 冷冰冰的代碼 | 對話式引導 |
| 假設用戶都懂 | 提前解答疑惑 |
| 沒有下一步 | 明確引導："接下來做什麼" |
**使用技巧：**
1. **用第二人稱，像和朋友聊天**
❌ "用戶應該在設置中找到API密鑰" ✅ "你可以在 設置 → API 中找到你的密鑰"
2. **提前回答用戶的疑問**
每寫完一段，問自己："用戶看到這裏會有什麼疑問？" 然後用FAQ或提示框解答
3. **多用視覺元素**
✅ 用emoji表示檢查項 ⚠️ 用警告框標註重要信息 💡 用提示框給出最佳實踐
4. **SEO優化：每個標題都是搜索詞**
❌ "認證" ✅ "如何獲取WriteFlow API密鑰並認證"
**適用場景：**
- ✅ API文檔
- ✅ 產品使用手冊
- ✅ 教程和最佳實踐
- ✅ 博客文章
- ❌ 法律條款（需要嚴謹表述）
---
### 4. git-advanced-workflows：一個人也能專業版本管理
**⭐ Stars：** 24.2k
#### 為什麼需要它？
很多獨立開發者的Git使用：
```bash
git add .
git commit -m "更新"
git push
這樣做的問題：
❌ 提交歷史混亂，回滾困難 ❌ 多功能並行開發時，容易衝突 ❌ 出了Bug不知道是哪次提交導致的
git-advanced-workflows教你：
🌿 Feature Branch工作流（不同功能在不同分支開發） 🔄 Rebase保持提交歷史整潔 🐛 Git Bisect快速定位Bug 💾 Worktrees同時維護多個版本
實際案例
場景： 你正在開發"用戶認證"功能，但突然有個緊急Bug需要修復。
糟糕的做法：
# 在當前分支修改，提交歷史混在一起
git commit -m "修了個Bug，還加了認證功能"
用git-advanced-workflows：
我正在開發用戶認證功能（feature/auth分支），
但現在有個緊急Bug需要修復，怎麼處理？
Claude會教你：
# 1. 保存當前工作（不提交）
git stash push -m "認證功能開發中"
# 2. 切換到main分支
git checkout main
# 3. 創建hotfix分支
git checkout -b hotfix/login-error
# 4. 修復Bug並提交
git commit -m "fix: 修復登錄時的空指針異常"
# 5. 合併到main
git checkout main
git merge hotfix/login-error
# 6. 部署修復
# 7. 回到feature分支繼續開發
git checkout feature/auth
git stash pop
更進階的用法：Rebase保持提交歷史整潔
我的feature分支有10個提交，但很多是"修復拼寫錯誤"、"忘記加分號"，
怎麼整理成幾個清晰的提交？
Claude教你Interactive Rebase：
# 1. 查看最近10個提交
git log --oneline -10
# 2. 交互式rebase
git rebase -i HEAD~10
# 3. 在編輯器中，把零碎提交合並（squash）
pick abc123 添加用戶認證基礎結構
squash def456 修復拼寫錯誤
squash ghi789 忘記加分號
pick jkl012 完成JWT驗證邏輯
squash mno345 修復測試用例
# 4. 保存後，整理提交信息
結果： 10個雜亂的提交 → 2個清晰的提交
使用技巧：
養成好習慣：每個功能一個分支
feature/user-auth # 用戶認證
feature/payment # 支付功能
hotfix/critical-bug # 緊急修復提交信息遵循約定
feat: 添加用戶註冊功能
fix: 修復登錄失敗的Bug
docs: 更新API文檔
refactor: 重構認證邏輯定期rebase，保持分支同步
# 每天開始工作前
git checkout main
git pull
git checkout feature/your-feature
git rebase main
適用場景：
✅ 獨立開發者（一個人也要專業） ✅ 小團隊協作 ✅ 需要頻繁回滾的項目 ❌ 簡單的靜態網站（用不上）
專業出海網站方案（可持續增長）
如果你的MVP驗證成功，開始有付費用戶了，就該考慮升級到"專業方案"。
這套方案適合：
✅ 月收入超過$1000的產品 ✅ 需要頻繁更新內容（博客、產品更新） ✅ 計劃長期運營，不是"一錘子買賣"
核心目標：可擴展、易維護、全球化。
5. payload：開源CMS，內容管理不求人
⭐ Stars： 39.0k
為什麼需要它？
MVP階段，你可能直接把文案寫在代碼裏：
<h1>我們的產品很棒</h1>
但當你需要：
✏️ 每週更新博客 📢 發佈產品更新日誌 🌍 添加多語言支持 👥 讓市場團隊自己更新文案
這時候，你需要一個CMS（內容管理系統）。
Payload的優勢：
🆓 開源免費（WordPress太老，Contentful太貴） ⚡ 性能優秀（基於Node.js + MongoDB） 🎨 界面現代化（不像WordPress那樣老舊） 🔌 API優先（方便集成到任何前端框架）
實際案例
場景： 你的SaaS工具需要一個博客，SEO引流。
步驟1：安裝Payload
npx create-payload-app my-blog
cd my-blog
npm run dev
步驟2：定義內容結構
幫我創建一個博客的Collection，包含：
- 標題、作者、正文、發佈時間
- SEO元數據（meta description、keywords）
- 特色圖片
Claude生成配置：
// collections/Posts.ts
export const Posts = {
slug: 'posts',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'author',
type: 'relationship',
relationTo: 'users',
},
{
name: 'content',
type: 'richText',
required: true,
},
{
name: 'featuredImage',
type: 'upload',
relationTo: 'media',
},
{
name: 'publishedAt',
type: 'date',
},
{
name: 'seo',
type: 'group',
fields: [
{
name: 'metaTitle',
type: 'text',
},
{
name: 'metaDescription',
type: 'textarea',
},
{
name: 'keywords',
type: 'text',
},
],
},
],
}
步驟3：在前端調用
// 在Next.js中獲取博客文章
const posts = await fetch('http://localhost:3000/api/posts')
.then(res => res.json())
// 渲染
posts.docs.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.author.name}</p>
<img src={post.featuredImage.url} alt={post.title} />
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
))
效果：
✅ 市場團隊可以自己發佈文章，不用找開發 ✅ 自動生成SEO元數據 ✅ 圖片自動壓縮和CDN加速 ✅ 支持草稿和定時發佈
使用技巧：
規劃好內容模型
不要一股腦把所有字段都加上
先列出核心字段，後續再擴展利用Hooks自動化
// 發佈文章時，自動發送到社交媒體
hooks: {
afterChange: [
async ({ doc }) => {
if (doc.published) {
await postToTwitter(doc.title, doc.url)
}
}
]
}配置權限
編輯人員：可以寫文章，但不能發佈
管理員：可以發佈和刪除
適用場景：
✅ 博客和內容營銷 ✅ 產品文檔 ✅ 多語言網站 ❌ 簡單的靜態頁面（用不上） ❌ 電商（建議用Shopify）
6. terraform-module-library：多雲部署，全球化無憂
⭐ Stars： 24.2k
為什麼需要它？
MVP階段： 你可能把網站部署在Vercel或Netlify，點點鼠標就搞定。
但當你出海後，會遇到這些問題：
🌍 歐洲用戶訪問很慢（服務器在美國） 💸 單一雲廠商鎖定（想換很麻煩） 🔒 數據合規要求（歐盟GDPR要求數據必須存在歐洲）
terraform-module-library幫你：
🌐 多雲部署（AWS + Cloudflare + Vercel） 🚀 一鍵部署到全球多個節點 📝 基礎設施即代碼（方便團隊協作和版本管理）
實際案例
場景： 你的SaaS工具有美國、歐洲、亞洲用戶，需要部署到多個區域。
傳統方式：
打開AWS控制枱 → 手動創建EC2 配置負載均衡器 配置CDN 配置數據庫 重複以上步驟，分別在us-east-1、eu-west-1、ap-southeast-1...
用Terraform（自動化）：
我要部署一個Next.js應用到AWS，
需要在美國、歐洲、亞洲各部署一個節點。
Claude生成Terraform配置：
# main.tf
module "us_deployment" {
source = "./modules/nextjs-app"
region = "us-east-1"
app_name = "myapp-us"
domain = "us.myapp.com"
}
module "eu_deployment" {
source = "./modules/nextjs-app"
region = "eu-west-1"
app_name = "myapp-eu"
domain = "eu.myapp.com"
}
module "asia_deployment" {
source = "./modules/nextjs-app"
region = "ap-southeast-1"
app_name = "myapp-asia"
domain = "asia.myapp.com"
}
# 配置Cloudflare負載均衡
resource "cloudflare_load_balancer" "main" {
zone_id = var.cloudflare_zone_id
name = "myapp.com"
default_pool_ids = [
cloudflare_load_balancer_pool.us.id,
cloudflare_load_balancer_pool.eu.id,
cloudflare_load_balancer_pool.asia.id,
]
# 根據用戶地理位置自動路由
geo_balancing = {
enabled = true
}
}
一鍵部署：
# 1. 初始化
terraform init
# 2. 預覽變更
terraform plan
# 3. 執行部署
terraform apply
結果：
🌍 美國用戶訪問美國節點 🇪🇺 歐洲用戶訪問歐洲節點 🌏 亞洲用戶訪問亞洲節點 ⚡ 延遲降低70%
使用技巧：
從模板開始，不要從零寫
# 使用社區模板
git clone https://github.com/terraform-aws-modules/terraform-aws-vpc.git分環境管理
terraform/
├── dev/ # 開發環境
├── staging/ # 測試環境
└── prod/ # 生產環境用變量管理敏感信息
# 不要直接寫死API密鑰
variable "aws_access_key" {
type = string
sensitive = true
}配置自動備份
# 每天自動備份數據庫
resource "aws_db_instance" "main" {
backup_retention_period = 7
backup_window = "03:00-04:00"
}
適用場景：
✅ 全球化產品 ✅ 需要多區域部署 ✅ 團隊協作（大家用同一套配置） ❌ 簡單的單服務器部署 ❌ 完全依賴無服務器平台（Vercel/Netlify）
實戰：用這7個Skills從0到1建站
讓我們模擬一個真實場景：7天做一個AI寫作工具的完整網站。
Day 1-2：設計和落地頁
目標： 完成品牌設計和高轉化落地頁
步驟：
# 1. 用frontend-design設計品牌風格
"幫我設計一個AI寫作工具的品牌風格，目標用戶是內容創作者"
# 2. 用landing-page-guide-v2生成落地頁結構
"根據DESIGNNAS框架，生成完整的落地頁"
# 3. 迭代優化
"這個Hero區的文案不夠吸引人，幫我改得更有衝擊力"
產出：
✅ 品牌配色、字體、Logo ✅ 落地頁的React組件代碼 ✅ 響應式設計（移動端適配）
Day 3-4：開發和CMS
目標： 搭建產品原型和博客系統
步驟：
# 1. 初始化項目
npx create-next-app@latest myapp
cd myapp
# 2. 集成Payload CMS
npx create-payload-app blog
cd blog && npm run dev
# 3. 配置Content Collections
"幫我創建Blog Post的Collection，包含SEO字段"
# 4. 連接前端
"在Next.js中調用Payload API，渲染博客文章列表"
產出：
✅ Next.js前端應用 ✅ Payload CMS後台 ✅ 博客系統（支持發佈文章）
Day 5-6：部署和文檔
目標： 部署到生產環境，編寫用戶文檔
步驟：
# 1. 用Terraform配置基礎設施
"幫我寫一個Terraform配置，部署到AWS"
# 2. 執行部署
terraform init
terraform apply
# 3. 用docs-write編寫文檔
"幫我寫一個快速開始文檔，教用戶如何使用AI寫作工具"
# 4. 配置Git工作流
"幫我設置Feature Branch工作流，配置CI/CD"
產出：
✅ 網站部署到生產環境 ✅ 用戶文檔和API文檔 ✅ 自動化部署流程
Day 7：上線和優化
目標： 最後檢查，正式上線
檢查清單：
[ ] 落地頁轉化元素齊全（UVP、CTA、社會證明） [ ] 博客至少有3篇SEO文章 [ ] 文檔完整（快速開始、API文檔、FAQ） [ ] 全球CDN加速 [ ] 移動端適配 [ ] SSL證書配置 [ ] Google Analytics埋點
上線：
# 切換DNS
# 監控網站性能
# 在Product Hunt發佈
安裝和使用指南
1. 安裝Claude Code
方式一：官網下載
訪問 claude.ai/code 下載對應系統版本（Mac/Windows/Linux） 安裝並登錄
方式二：通過包管理器（推薦）
# macOS
brew install --cask claude-code
# Windows
winget install Anthropic.ClaudeCode
# Linux
curl -fsSL https://claude.ai/install.sh | sh
2. 安裝Skills
方式一：從GitHub克隆
# 1. 創建Skills目錄
mkdir -p ~/.claude/skills
# 2. 克隆Skill倉庫
cd ~/.claude/skills
# 安裝frontend-design
git clone https://github.com/anthropics/claude-code.git
cp -r claude-code/plugins/frontend-design/skills/frontend-design ./
# 安裝其他Skills
git clone https://github.com/xxx/landing-page-guide-v2.git
git clone https://github.com/xxx/docs-write.git
# ...
方式二：通過Claude Code插件市場（如果支持）
# 在Claude Code中執行
/plugin install frontend-design
/plugin install landing-page-guide-v2
/plugin install docs-write
/plugin install git-advanced-workflows
/plugin install payload
/plugin install terraform-module-library
3. 驗證安裝
啓動Claude Code，輸入：
列出我已安裝的所有Skills
你應該看到：
已安裝的Skills：
✅ frontend-design
✅ landing-page-guide-v2
✅ docs-write
✅ git-advanced-workflows
✅ payload
✅ terraform-module-library
4. 常見問題
Q：Skill不生效怎麼辦？
# 1. 檢查目錄結構
ls -la ~/.claude/skills/frontend-design/
# 應該有 SKILL.md 文件
# 2. 重啓Claude Code
# 3. 手動加載
/skills reload
Q：可以同時使用多個Skills嗎？
可以！Claude會自動識別場景，調用合適的Skill。
Q：Skills會收費嗎？
大部分Skills是開源免費的。使用Skills只消耗你的Claude API額度。
Q：可以自己開發Skills嗎？
可以！參考官方文檔：docs.anthropic.com/skills
寫在最後
回到文章開頭的問題：出海建站，5萬預算夠不夠？
用這7個Skills，你連5000塊都不用花。
快速建站MVP方案（成本：接近0）：
frontend-design：設計費省下2萬 landing-page-guide-v2：文案策劃省下5000 docs-write：技術寫作省下8000 git-advanced-workflows：版本管理規範，避免返工
專業出海網站方案（成本：服務器費用）：
payload：CMS訂閲費省下每月$299 terraform-module-library：運維成本降低70%
更重要的是時間成本：
傳統方式：找外包2-3個月 用Skills：7天MVP，14天專業站
選擇適合你的方案
如果你是：
🚀 首次創業者 / 想快速驗證想法
→ 選快速MVP方案
先用frontend-design + landing-page-guide-v2做落地頁 用docs-write寫1-2篇SEO文章 跑通第一批用戶後，再考慮升級
💼 有產品經驗 / 計劃長期運營
→ 直接上專業方案
前期多花3-5天，搭建Payload CMS 配置Terraform多區域部署 建立規範的Git工作流
🎯 技術團隊 / 需要可擴展性
→ 兩個方案都用
MVP階段：快速驗證 成長階段：升級基礎設施 成熟階段：多雲、多區域、CDN
下一步
立即行動：
安裝Claude Code → claude.ai/code 安裝7個Skills → 按照上面的指南操作 找個週末，做個MVP → 7天后，你會有自己的產品
進階學習：
📚 skillsmp.com - 探索更多Skills（44,000+個） 📖 Claude Code文檔 - 深入學習 💬 Discord社區 - 和其他開發者交流
最後，記住一句話：
"最好的產品不是最完美的，而是最快上線的那個。"
不要等一切就緒才開始。用這7個Skills，這個週末就動手吧。
你的第一個出海產品，正在等着你。🚀
如果這篇文章對你有幫助，歡迎分享給更多出海創業者。
有問題？在評論區留言，我會盡快回復。👇