本指南說明如何以 Claude Code 將六個獨立工作流整合為一套 Content OS，涵蓋完整 prompt、CLAUDE.md 範例與各模組實作注意事項。
靈感存在 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，以自然語言指令操作。（官方最佳實踐）
開啟終端機（Terminal / 命令提示字元），貼上這行：
# 全域安裝 Claude Code CLI npm install -g @anthropic-ai/claude-code # 進到你要放專案的資料夾，然後啟動 mkdir content-os && cd content-os claude
首次啟動會要求登入 Anthropic 帳號授權，完成後出現輸入框即可開始使用。
Claude Code 有五層設定可配置：CLAUDE.md（專案規則）、MCP（外部工具）、Skills（可重用流程）、Hooks（自動化檢查）、Subagents（分工代理）。本指南使用前兩層，後三層收錄於進階技巧節。
本指南的建置 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）已建置出通過無障礙檢測的頁面。（參考案例）
CLAUDE.md 是 Claude Code 每次開啟新對話時優先讀取的檔案，作為專案的持久規則書。依官方文件中一位長期用戶的說法，其 CLAUDE.md 約 200 行，每一條規則都對應 Claude 曾產生的特定錯誤，其中行為規範條目影響最大。（來源）
官方建議保持簡短且易讀，避免冗長。基本範例如下：
# 專案：個人內容儀表板（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 的操作邊界。缺少此段時，Claude 可能一次修改過多檔案，或在未確認的情況下選擇非預期方案。寫入 CLAUDE.md 後，每次對話自動套用，無需重複指示。
啟動 Claude Code 後執行 /init，工具會掃描專案並自動生成 CLAUDE.md 草稿，再依上述範例補入行為規範即可。
完成 Claude Code 安裝與 CLAUDE.md 設定後，貼入以下 prompt。此 prompt 定義六個頁面的骨架，Claude Code 會自動處理套件安裝、路由建立與側邊欄生成。
幫我蓋一個給創作者事業用的內容儀表板，要有這六個頁面： › 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 記錄你選用的技術與所有決策。
原始範例把帳號寫死在側邊欄。請換成你自己的 handle。本教學的所有畫面與內容由 Tenten 整理，示意中一律用 @yourhandle 代表你自己。
送出後，Claude 會先列出計畫（前提是 CLAUDE.md 已包含行為規範），說明打算建立哪些檔案。確認後回覆「開始」，Claude Code 即開始生成。完成後執行 npm run dev，可在瀏覽器看到六頁的初始結構。
後續流程是一個頁面對應一段獨立對話，逐一深化各模組。每個模組在新的對話脈絡中處理，可避免上下文累積造成的干擾。
以下每一塊都附上可直接複製的 prompt、它背後在做什麼、以及實作時的注意事項。
蓋出 Hook Vault 頁。 我存下的每個 hook 都自動轉錄、模板化， 例如「[X] 剛剛幹掉了 [Y]」「別再做 [X]」「[數字] 件我希望早點知道的事」。 可依主題、hook 類型、觀看數搜尋。 顯示原始創作者、觀看數，以及一個「use this」按鈕， 點下去就把這個 hook 丟進 /script。
運作機制：將收集的開場白存入資料庫，並抽象為填空模板。撰寫腳本時可依主題或類型篩選，直接套用已有記錄的句型。
| 模板 | 類型 | 常用度 |
|---|---|---|
| 「別再做 [X]。開始做 [Y]。」 | SWAP 對比 | 38× |
| 「我用 [時間] 做出了 [產品]。」 | BUILD 過程 | 24× |
| 「你需要一個 [工具]。原因如下。」 | CLAIM 主張 | 19× |
| 「[數字] 件我在 [X] 之前希望早點知道的事。」 | LIST 清單 | 15× |
| 「沒有人在談 [趨勢]。」 | CONTRARIAN 反共識 | 12× |
小陷阱：「自動轉錄」需要把影片音訊轉文字，這一步通常要接語音轉錄 API（如 Whisper）。第一版可以先讓你手動貼逐字稿，把搜尋、模板、use this 流程做順，再回頭自動化轉錄。
蓋出 Analytics 頁。 拉進 IG 觀看、儲存、追蹤與私訊量。 每個指標用 sparkline 顯示 7 / 30 / 90 天 走勢。 任何一支貼文若超過我 30 天中位數的 2 倍，標記為「heater（爆款）」。 顯示前 5 名 heater，依觀看數排序， 每一支附一句話說明它為什麼爆。
運作機制：以個人 30 天中位數為基準標記表現異常的貼文，並附加說明該貼文的特徵。這份說明直接回饋至 Hook Vault，供腳本參考。
設計說明：以個人 30 天中位數為基準，而非與其他帳號比較。此設計使 heater 定義具有個人參考性，不受單次偶發高流量影片影響判斷。
小陷阱：Instagram 官方 API 對個人帳號的數據存取有限制。初期建議先用匯出的 CSV 或手動填數據把邏輯跑通，等流程穩定再評估串接。
蓋出 Competitor Tracker 頁。 每週日早上 6 點，抓取我追蹤的 8 個帳號各自最強的 5 支 Reels。 轉錄音訊，抽出 hook 與畫面上的文字。 依觀看數排序，顯示創作者 handle、追蹤數， 以及一個「save to Hook Vault」按鈕。
運作機制：每週排程抓取指定帳號的熱門 Reels，轉錄音訊並擷取文字，提供「存入 Hook Vault」按鈕，將競品 hook 納入個人靈感庫，串接對手追蹤、靈感金庫與腳本三個環節。
小陷阱：「scrape（抓取）」社群平台內容涉及各平台的服務條款與技術限制，且常需要瀏覽器自動化。實務上多半透過 MCP 接瀏覽器自動化工具或第三方 API 完成；請務必確認你使用的方式符合平台規範。
蓋出 Scheduler 頁。 一鍵把我的 Reel 排程到我選的平台， Instagram、TikTok、YouTube Shorts。 從 hook + 切角 + CTA 自動產生文案。 用 排程 MCP 來處理實際發佈。
運作機制：將多平台發文操作整合為單一動作，並從已積累的 hook 與切角自動生成各平台文案，維持訊息一致性。
透過 API 一天發超過 2 篇，可能觸發垃圾訊息過濾或降觸及（shadowban）。排程器的主要價值在於降低操作切換成本，而非提升發文頻率。（來源）
關於「排程 MCP」的實際串接方式，詳見下一節。
蓋出 Content Calendar 頁。 用月曆網格顯示所有已排程的內容。 每個格子顯示確切的日期＋時間、平台，以及 hook。 點任一格，在側邊面板看到完整腳本與文案。
運作機制：以月曆格式呈現所有已排程內容，可見到各日期的發布缺口與各平台的發文頻率。點擊格子可在側邊面板查看完整腳本與文案。
設計原則：行事曆應為 Scheduler 排程後自動產生的視圖，資料只有一份，行事曆是其呈現方式，無需手動維護。
蓋出 What's Trending 頁。 每天從 12 個來源抓取，Anthropic 部落格、OpenAI 部落格、X 清單、利基 RSS。 自動為每則標記：「hook potential」「explainer」「skip」。 把前 5 則最有 hook 潛力的，依時間新舊排成一個 feed。 早上 7 點把重點丟到我的 Slack。
運作機制：每日從 12 個來源聚合資訊，由 Claude 初步分類為三類標籤，僅將前 5 則高潛力項目推送至 Slack，減少人工篩選的時間成本。
設計說明：自動分類標籤決定了這個模組的實用程度。RSS 與 Slack 通知均有標準串接方式，在六個模組中自動化實作難度最低。
範例 prompt 中的「Zernio 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 的內容生成能力與以下三種方案之一搭配：
第一版 Scheduler 先完成「生成文案＋整理發佈清單」兩項功能，發佈步驟暫時手動執行。待流程穩定後，依主要使用平台選擇上述三種方案之一接入 MCP。直接追求全自動是最常見的卡關點。
當需求較複雜時，比起撰寫更長的 prompt，更有效的做法是讓 Claude 先訪談、輸出規格文件，再另開對話執行。以下示範此工作流與其輸出結構。
我想蓋一套創作者內容儀表板（六個模組，前面已列）。 先別寫程式。請用 AskUserQuestion 工具訪談我， 針對技術實作、UI/UX、邊界情況、取捨深入提問， 不要問顯而易見的問題，挖我可能還沒想到的硬骨頭。 問到我們把重要決策都覆蓋完，再把完整規格寫進 SPEC.md。 規格完成後，先停。我會開一個全新對話來執行它。
此方法將規劃與執行分離：訪談階段將模糊需求轉化為明確規格，執行階段在乾淨的對話脈絡中按規格進行，不受前期討論雜訊影響。（官方建議工作流）
下面是此類 prompt 執行後的輸出結構示意：一份檔案結構、一段 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> ); }
元件使用 shadcn/ui 語意化色票（如 text-muted-foreground）。自訂主題時，muted 文字疊於 muted 背景容易對比度不足，建議完成各頁面後讓 Claude 執行一次 axe-core 無障礙檢測。
以下整理自 DEV、官方文件與公開案例，說明在基本建置完成後提升實用性的具體做法。
每一條規則建議源自 Claude 曾產生的錯誤。行為規範條目比技術設定更影響結果，決定 Claude 是否在未確認的情況下採取行動。
來源 · Substack 長期用戶 / 官方文件複雜任務先讓 Claude 讀檔、列出計畫但不執行，確認後再開始。小範圍修改（修正錯字、加一行 log）直接執行反而更有效率。
來源 · Claude Code 官方最佳實踐不要將六個頁面放在同一段對話中處理。每個模組開新脈絡，可避免上下文累積對輸出品質造成的干擾。
來源 · 社群共識 / 範例工作流保持 prompt 精簡、避免脈絡累積不必要的資訊，並適時使用 /clear 與 /compact 指令，可延長每日可用工作量。
來源 · Claude Code 進階技巧整理Claude Code 支援多代理協作與 agent view，可指派子代理分別負責前端 QA、測試、程式審查，主代理負責統籌。模組數量多時可縮短整體時間。
來源 · Code w/ Claude 2026 發表官方功能「Dreaming」會回顧過去工作記錄，整理反覆出現的偏好與問題，回饋至記憶。另有社群實踐「self-evolving CLAUDE.md」，提供每週修訂建議。
來源 · Anthropic 2026 / DEV 社群資料留本地、開發伺服器綁定 127.0.0.1 而非 0.0.0.0，無對外流量，無需維護雲端資料庫。
LLM 可能生成不存在的 ARIA 屬性。建議每頁完成後執行 axe-core，重點確認 shadcn 自訂主題的文字對比度是否達標。
來源 · 14 個無障礙 Next.js App 實測不存在通用社群 MCP。優先選用官方平台 MCP（如 Meta），其次考慮瀏覽器自動化，最後才自建。寫入 settings.json 後可跨代理共用。
來源 · Claude Code 社群媒體自動化指南依官方文件建議：根目錄放置 CLAUDE.md、以 CHANGELOG.md 記錄工作進度、頻繁 commit，長時間任務搭配 tmux 維持 session。
來源 · Anthropic 科學運算工作流/init，再補入行為規範。建議順序：先讓它能跑，再讓它好用，最後才處理自動化。
骨架建立、六頁深化、mock 資料流程跑通後，選一個最需要的模組優先串接真實資料。根據實作難度，What's Trending（RSS + Slack 通知）通常是最容易完成自動化的起點；若以立即可用性為優先，則從 Hook Vault 開始。