創作者面臨的問題：工具分散、流程割裂
靈感存在 Notion、數據開 IG App 看、對手追蹤靠記性、貼文排程開 Buffer、AI 新聞滑 X。在多個工具之間切換，導致想法、數據、發佈三件事分散在不同地方，難以統一管理。
「內容儀表板」（Content Dashboard，亦稱 Content OS）將這些分散的流程整合進一個自行掌控的後台。它是自建工具，而非再增加一個 SaaS 訂閱。使用 Claude Code，即使不具備程式基礎也可完成建置。
用自然語言描述需求，Claude Code 負責生成對應程式碼。
本指南涵蓋六個模組的建置方式：靈感金庫（Hook Vault）、數據分析（Analytics）、對手追蹤（Competitor Tracker）、排程器（Scheduler）、內容行事曆（Content Calendar）、趨勢雷達（What's Trending）。每個模組提供可直接複製的 prompt、運作機制說明，以及常見問題。
開始前的環境需求
Claude Code 是 Anthropic 開發的終端機 AI 工具，可讀取檔案、執行指令、串接 API，以自然語言指令操作。（官方最佳實踐）
① 安裝清單
Node.js（18 以上），Next.js 的執行環境。至 nodejs.org 下載 LTS 版即可。
Claude 訂閱（Pro 或以上方案），Claude Code 的運行前提，Pro 約 US$20/月。
程式碼編輯器，建議 VS Code；Claude Code 本身在終端機運行，編輯器非必要。
② 安裝 Claude Code
開啟終端機（Terminal / 命令提示字元），貼上這行：
# 全域安裝 Claude Code CLI
npm install -g @anthropic-ai/claude-code
# 進到你要放專案的資料夾，然後啟動
mkdir content-os && cd content-os
claude首次啟動會要求登入 Anthropic 帳號授權，完成後出現輸入框即可開始使用。
技術棧各元件的職責說明
本指南的建置 prompt 指定 Next.js + Tailwind + shadcn/ui，各元件職責如下：
| 名詞 | 它是什麼 | 白話比喻 |
|---|---|---|
Next.js | React 的網頁框架，負責頁面、路由、前後端 | 房子的鋼骨結構 |
Tailwind | 用 class 直接寫樣式的 CSS 工具 | 一桶分裝好的油漆與工具 |
shadcn/ui | 可複製貼上的現成元件（按鈕、卡片、側欄） | 組裝好的家具 |
CLAUDE.md | 專案的規則書，每次開工 Claude 都先讀它 | 給工班的施工守則 |
在 prompt 中指定這些工具後，Claude Code 會自動處理安裝、設定與相依套件。根據公開案例，使用同一組合（Next.js 16 + Tailwind 4 + shadcn/ui）已建置出通過無障礙檢測的頁面。（參考案例）
在第一個 prompt 之前，先建立 CLAUDE.md
CLAUDE.md 是 Claude Code 每次開啟新對話時優先讀取的檔案，作為專案的持久規則書。依官方文件中一位長期用戶的說法，其 CLAUDE.md 約 200 行，每一條規則都對應 Claude 曾產生的特定錯誤，其中行為規範條目影響最大。（來源）
官方建議保持簡短且易讀，避免冗長。基本範例如下：
// CLAUDE.md — 放在專案根目錄
# 專案：個人內容儀表板（Content OS）
## 技術棧
- Next.js (App Router) + TypeScript
- Tailwind CSS + shadcn/ui
- 深色模式為預設，主色為 terracotta (#C0573A)
- 資料先用本地 mock / SQLite，之後再接真實 API
## 常用指令
- npm run dev 啟動開發伺服器
- npm run build 打包
- npm run lint 檢查程式碼
## 程式風格
- 元件用函式寫法，檔名用 PascalCase
- 共用元件放 /components，頁面放 /app
- 盡量用 shadcn/ui 既有元件，不要重造輪子
## 行為規範（最重要）
- 動工前先「計畫」：先列出要改哪些檔案，等我確認再寫
- 一次只做一件事，做完先讓我看再繼續
- 任何破壞性指令（刪檔、改設定）一定先問
- 每完成一個模組就 git commit，訊息寫清楚改了什麼
- 不確定就問我，不要亂猜規格啟動 Claude Code 後執行 /init，工具會掃描專案並自動生成 CLAUDE.md 草稿，再依上述範例補入行為規範即可。
第一個 prompt：建立六頁骨架
完成 Claude Code 安裝與 CLAUDE.md 設定後，貼入以下 prompt。此 prompt 定義六個頁面的骨架，Claude Code 會自動處理套件安裝、路由建立與側邊欄生成。
// 貼進 Claude Code 的第一個 prompt
幫我蓋一個給創作者事業用的內容儀表板，要有這六個頁面：
› Hook Vault — 我存下的每一個爆款開場白，自動轉錄並模板化
› Analytics — IG 觀看、儲存、追蹤數，以及本週最熱的貼文
› Competitor Tracker — 我追蹤的創作者最強的 Reels，每週自動抓取
› Scheduler — 一鍵多平台排程，並自動產生文案
› Content Calendar — 由 /script 自動填入 hook 與切角
› What's Trending — 每天從 12 個來源抓 AI 新聞，標記是否有 hook 潛力
技術棧用 Next.js + Tailwind + shadcn/ui。深色模式、terracotta 主色。
側邊欄最上方放我的帳號 @yourhandle。
建立一份 CLAUDE.md 記錄你選用的技術與所有決策。送出後，Claude 會先列出計畫（前提是 CLAUDE.md 已包含行為規範），說明打算建立哪些檔案。確認後回覆「開始」，Claude Code 即開始生成。完成後執行 npm run dev，可在瀏覽器看到六頁的初始結構。
後續流程是一個頁面對應一段獨立對話，逐一深化各模組。每個模組在新的對話脈絡中處理，可避免上下文累積造成的干擾。
寫 CLAUDE.md
FLOW
先定規則
蓋骨架
FLOW
一個大 prompt
逐頁深化
FLOW
一頁一 prompt
接資料 / MCP
FLOW
最後串真實來源
六個核心模組的建置說明
以下每一塊都附上可直接複製的 prompt、它背後在做什麼、以及實作時的注意事項。
01 Hook Vault · 靈感金庫
儲存並模板化開場白，支援分類搜尋
// prompt：Hook Vault 頁
蓋出 Hook Vault 頁。
我存下的每個 hook 都自動轉錄、模板化，
例如「[X] 剛剛幹掉了 [Y]」「別再做 [X]」「[數字] 件我希望早點知道的事」。
可依主題、hook 類型、觀看數搜尋。
顯示原始創作者、觀看數，以及一個「use this」按鈕，
點下去就把這個 hook 丟進 /script。**運作機制：**將收集的開場白存入資料庫，並抽象為填空模板。撰寫腳本時可依主題或類型篩選，直接套用已有記錄的句型。
可以直接拿去用的 hook 模板
| 模板 | 類型 | 常用度 |
|---|---|---|
| 「別再做 [X]。開始做 [Y]。」 | SWAP 對比 | 38× |
| 「我用 [時間] 做出了 [產品]。」 | BUILD 過程 | 24× |
| 「你需要一個 [工具]。原因如下。」 | CLAIM 主張 | 19× |
| 「[數字] 件我在 [X] 之前希望早點知道的事。」 | LIST 清單 | 15× |
| 「沒有人在談 [趨勢]。」 | CONTRARIAN 反共識 | 12× |
小陷阱：「自動轉錄」需要把影片音訊轉文字，這一步通常要接語音轉錄 API（如 Whisper）。第一版可以先讓你手動貼逐字稿，把搜尋、模板、use this 流程做順，再回頭自動化轉錄。
02 Analytics · 數據分析
追蹤數據走勢，標記超出個人中位數的貼文
// prompt：Analytics 頁
蓋出 Analytics 頁。
拉進 IG 觀看、儲存、追蹤與私訊量。
每個指標用 sparkline 顯示 7 / 30 / 90 天 走勢。
任何一支貼文若超過我 30 天中位數的 2 倍，標記為「heater（爆款）」。
顯示前 5 名 heater，依觀看數排序，
每一支附一句話說明它為什麼爆。**運作機制：**以個人 30 天中位數為基準標記表現異常的貼文，並附加說明該貼文的特徵。這份說明直接回饋至 Hook Vault，供腳本參考。
**設計說明：**以個人 30 天中位數為基準，而非與其他帳號比較。此設計使 heater 定義具有個人參考性，不受單次偶發高流量影片影響判斷。
**小陷阱：**Instagram 官方 API 對個人帳號的數據存取有限制。初期建議先用匯出的 CSV 或手動填數據把邏輯跑通，等流程穩定再評估串接。
03 Competitor Tracker · 對手追蹤
每週排程抓取追蹤帳號的熱門 Reels
// prompt：Competitor Tracker 頁
蓋出 Competitor Tracker 頁。
每週日早上 6 點，抓取我追蹤的 8 個帳號各自最強的 5 支 Reels。
轉錄音訊，抽出 hook 與畫面上的文字。
依觀看數排序，顯示創作者 handle、追蹤數，
以及一個「save to Hook Vault」按鈕。**運作機制：**每週排程抓取指定帳號的熱門 Reels，轉錄音訊並擷取文字，提供「存入 Hook Vault」按鈕，將競品 hook 納入個人靈感庫，串接對手追蹤、靈感金庫與腳本三個環節。
小陷阱：「scrape（抓取）」社群平台內容涉及各平台的服務條款與技術限制，且常需要瀏覽器自動化。實務上多半透過 MCP 接瀏覽器自動化工具或第三方 API 完成；請務必確認你使用的方式符合平台規範。
04 Scheduler · 排程器
多平台排程與文案自動生成
// prompt：Scheduler 頁
蓋出 Scheduler 頁。
一鍵把我的 Reel 排程到我選的平台，
Instagram、TikTok、YouTube Shorts。
從 hook + 切角 + CTA 自動產生文案。
用 排程 MCP 來處理實際發佈。**運作機制：**將多平台發文操作整合為單一動作，並從已積累的 hook 與切角自動生成各平台文案，維持訊息一致性。
關於「排程 MCP」的實際串接方式，詳見下一節。
05 Content Calendar · 內容行事曆
已排程內容的月曆總覽視圖
// prompt：Content Calendar 頁
蓋出 Content Calendar 頁。
用月曆網格顯示所有已排程的內容。
每個格子顯示確切的日期＋時間、平台，以及 hook。
點任一格，在側邊面板看到完整腳本與文案。**運作機制：**以月曆格式呈現所有已排程內容，可見到各日期的發布缺口與各平台的發文頻率。點擊格子可在側邊面板查看完整腳本與文案。
設計原則：行事曆應為 Scheduler 排程後自動產生的視圖，資料只有一份，行事曆是其呈現方式，無需手動維護。
06 What's Trending · 趨勢雷達
每日從多個來源聚合趨勢資訊並自動分類
// prompt：What's Trending 頁
蓋出 What's Trending 頁。
每天從 12 個來源抓取，Anthropic 部落格、OpenAI 部落格、X 清單、利基 RSS。
自動為每則標記：「hook potential」「explainer」「skip」。
把前 5 則最有 hook 潛力的，依時間新舊排成一個 feed。
早上 7 點把重點丟到我的 Slack。**運作機制：**每日從 12 個來源聚合資訊，由 Claude 初步分類為三類標籤，僅將前 5 則高潛力項目推送至 Slack，減少人工篩選的時間成本。
**設計說明：**自動分類標籤決定了這個模組的實用程度。RSS 與 Slack 通知均有標準串接方式，在六個模組中自動化實作難度最低。
排程發佈與 MCP 的實際情況
範例 prompt 中的「Zernio MCP」是一個示意名稱，代表「某個負責實際發文的 MCP 工具」，並非現成可直接安裝使用的工具。這點需要先說明清楚，以免在此卡關。
先搞懂 MCP 是什麼
MCP（Model Context Protocol，模型脈絡協定）是一套標準，允許 Claude 安全地存取外部工具，包含資料庫、GitHub、Figma、Slack 等。每個 MCP server 提供一組工具給所有 Claude 代理使用，設定方式是在 .claude/settings.json 的 mcpServers 區塊中填入對應伺服器資訊。
// .claude/settings.json（示意）
{
"mcpServers": {
"slack": { "type": "url", "url": "https://mcp.slack.com/mcp" },
"notion": { "type": "url", "url": "https://mcp.notion.com/mcp" }
}
}社群的誠實提醒
就社群媒體發佈而言，目前不存在一個通用的社群 MCP 可直接接管所有平台發文。可行的做法是將 Claude Code 的內容生成能力與以下三種方案之一搭配：
官方平台 MCP，例如 Meta 於 2026 年 4 月底推出的官方 MCP，可讓 Claude Code 直接操作 FB / IG 廣告，無需自行串接。（來源）
瀏覽器自動化 MCP，讓 Claude 操作網頁版發文介面，適用於未開放 API 的平台。
排程工具匯出，Claude 生成內容與發布時間表後，匯出至現有排程工具執行發佈。
進階 Prompt 設計：訪談→規格→執行流程
當需求較複雜時，比起撰寫更長的 prompt，更有效的做法是讓 Claude 先訪談、輸出規格文件，再另開對話執行。以下示範此工作流與其輸出結構。
① 設計過的 master prompt
// 設計過的 prompt：先訪談，再寫規格
我想蓋一套創作者內容儀表板（六個模組，前面已列）。
先別寫程式。請用 AskUserQuestion 工具訪談我，
針對技術實作、UI/UX、邊界情況、取捨深入提問，
不要問顯而易見的問題，挖我可能還沒想到的硬骨頭。
問到我們把重要決策都覆蓋完，再把完整規格寫進 SPEC.md。
規格完成後，先停。我會開一個全新對話來執行它。此方法將規劃與執行分離：訪談階段將模糊需求轉化為明確規格，執行階段在乾淨的對話脈絡中按規格進行，不受前期討論雜訊影響。（官方建議工作流）
② 示意輸出：Claude 大概會回什麼
下面是此類 prompt 執行後的輸出結構示意：一份檔案結構、一段 CLAUDE.md，以及一個元件範例。（為說明用途的示意，非實際執行結果。）
content-os/
├── app/
│ ├── overview/ # 總覽
│ ├── hook-vault/ # 模組 01
│ ├── analytics/ # 模組 02
│ ├── competitors/ # 模組 03
│ ├── scheduler/ # 模組 04
│ ├── calendar/ # 模組 05
│ └── trending/ # 模組 06
├── components/
│ ├── Sidebar.tsx
│ ├── HookCard.tsx
│ └── Sparkline.tsx
├── lib/mock-data.ts # 第一版用假資料
├── SPEC.md # 訪談後產出的規格
└── CLAUDE.md # 專案規則書以及一個 Hook 卡片元件，使用 terracotta 主色與 shadcn/ui 元件庫：
// components/HookCard.tsx（示意輸出）
export function HookCard({ hook }: { hook: Hook }) {
return (
<div className="rounded-xl border border-border bg-card p-4">
<p className="font-medium">{hook.template}</p>
<div className="mt-2 flex items-center gap-2 text-sm text-muted-foreground">
<span>@{hook.creator}</span>
<span className="text-[--terra]">{hook.views}×</span>
</div>
<Button onClick={() => dropToScript(hook)}>use this</Button>
</div>
);
}來自社群文件與公開分享的實作建議
以下整理自 DEV、官方文件與公開案例，說明在基本建置完成後提升實用性的具體做法。
CLAUDE.md 的每一條規則應對應具體問題
每一條規則建議源自 Claude 曾產生的錯誤。行為規範條目比技術設定更影響結果，決定 Claude 是否在未確認的情況下採取行動。
來源 · Substack 長期用戶 / 官方文件
複雜任務使用 Plan Mode
複雜任務先讓 Claude 讀檔、列出計畫但不執行，確認後再開始。小範圍修改（修正錯字、加一行 log）直接執行反而更有效率。
來源 · Claude Code 官方最佳實踐
每個模組使用獨立的對話脈絡
不要將六個頁面放在同一段對話中處理。每個模組開新脈絡，可避免上下文累積對輸出品質造成的干擾。
來源 · 社群共識 / 範例工作流
管理 token 用量以避免觸及每日上限
保持 prompt 精簡、避免脈絡累積不必要的資訊，並適時使用 /clear 與 /compact 指令，可延長每日可用工作量。
來源 · Claude Code 進階技巧整理
使用 Subagents 平行處理多個模組
Claude Code 支援多代理協作與 agent view，可指派子代理分別負責前端 QA、測試、程式審查，主代理負責統籌。模組數量多時可縮短整體時間。
來源 · Code w/ Claude 2026 發表
定期更新 CLAUDE.md 以反映累積的偏好
官方功能「Dreaming」會回顧過去工作記錄，整理反覆出現的偏好與問題，回饋至記憶。另有社群實踐「self-evolving CLAUDE.md」，提供每週修訂建議。
來源 · Anthropic 2026 / DEV 社群
個人使用的儀表板採用 local-first 架構
資料留本地、開發伺服器綁定 127.0.0.1 而非 0.0.0.0，無對外流量，無需維護雲端資料庫。
來源 · DEV 本地優先儀表板實作
每個頁面完成後執行無障礙檢查
LLM 可能生成不存在的 ARIA 屬性。建議每頁完成後執行 axe-core，重點確認 shadcn 自訂主題的文字對比度是否達標。
來源 · 14 個無障礙 Next.js App 實測
MCP 選擇順序：官方 → 瀏覽器自動化 → 自建
不存在通用社群 MCP。優先選用官方平台 MCP（如 Meta），其次考慮瀏覽器自動化，最後才自建。寫入 settings.json 後可跨代理共用。
來源 · Claude Code 社群媒體自動化指南
頻繁 commit，以 CHANGELOG.md 記錄工作進度
依官方文件建議：根目錄放置 CLAUDE.md、以 CHANGELOG.md 記錄工作進度、頻繁 commit，長時間任務搭配 tmux 維持 session。
來源 · Anthropic 科學運算工作流
常見問題與對應處理方式
**單一 prompt 包含所有模組。**會導致頁面互相干擾，Claude 修改 A 時破壞 B。處理方式：骨架一次建立，深化逐頁進行。
**跳過 CLAUDE.md。**Claude 缺乏規則參考，每次風格不一致、選擇非預期方案。處理方式：先執行
/init，再補入行為規範。**第一版就嘗試串接真實 API。**容易卡在金鑰申請、權限設定、爬蟲限制。處理方式：先以 mock 資料或 CSV 讓流程跑通，再串接真實資料來源。
**將「Zernio MCP」當作現成工具查找。**它是 prompt 中的示意名稱。處理方式：第一版先完成文案生成與發佈清單，手動執行發佈，後續再接入真實 MCP。
**每日 API 發文超過 2 篇。**可能觸發平台降觸及機制。處理方式：自動化用於減少操作切換，而非增加發文頻率。
**未執行對比度與 ARIA 檢查。**介面外觀正常但可能不符無障礙標準。處理方式：每頁完成後執行一次無障礙檢測。
建議順序：先讓它能跑，再讓它好用，最後才處理自動化。
下一步
骨架建立、六頁深化、mock 資料流程跑通後，選一個最需要的模組優先串接真實資料。根據實作難度，What's Trending（RSS + Slack 通知）通常是最容易完成自動化的起點；若以立即可用性為優先，則從 Hook Vault 開始。
畫面設計與內容整理 · Tenten
用 Claude Code 打造你的 Content OS
本指南可自由參考、改寫、套用於你自己的專案