Claude Code 使用洞察

1,682 則訊息，共 81 個對話（總計 144 個）| 2026-03-19 至 2026-03-31

快速總覽

表現良好：你已建立了一套非常有效的設計評審到部署流程——在單一對話中讓 Claude 評審 UI、實作修正並發布。你使用 Chrome DevTools MCP 進行截圖驅動的視覺 QA 是一個出色的做法，能夠捕捉到原本可能遺漏的版面和渲染問題。你也在管理一個橫跨 Cloudflare、GitHub、Telegram 機器人和 Notion 整合的複雜多專案生態系統。令人印象深刻的成就 →

阻礙你的事：就 Claude 而言，它經常針對錯誤的元件、目錄或專案——例如在你指的是 Telegram 機器人時卻修改終端機程式碼，或從錯誤的資料夾部署。它也傾向於過度工程化，或重新設計你沒有要求更改的內容，導致痛苦的回滾操作。就你而言，提前更明確地說明你指的是哪個特定檔案、服務或部署目標，並將已知的平台特性（如 iOS Safari 的行為）記錄在 CLAUDE.md 中，可以減少許多這類失誤。問題所在 →

可以嘗試的快速改進：嘗試為你最常用的工作流程建立自訂斜線指令——例如你的評審-實作-部署循環或 Cloudflare 部署步驟——讓 Claude 在每個對話開始時就具備正確的背景和限制條件。你也可以設定 hooks 在任何部署指令前自動執行目錄驗證，這樣就能捕捉到在你的專案中不斷重複出現的錯誤目錄問題。值得嘗試的功能 →

進階工作流程：隨著模型能力越來越強大，你的截圖驅動 QA 工作流程可以成為完全自主的循環——Claude 編輯、部署、截圖、對照你的設計標準並自我修正，無需你指出每個視覺問題。你的多專案部署設定也很適合自動化：Claude 可以維護一個將每個應用程式映射到正確部署路徑的專案登錄檔，並執行部署前檢查，消除一直是你最頑固摩擦點的跨專案污染問題。最終，你可以執行並行代理——一個評審設計、一個實作、一個驗證——將你 40 多則訊息的優化對話壓縮成一個單一流程。未來展望 →

1,682

訊息數

+30,031/-3,655

程式碼行數

169

檔案數

天數

140.2

訊息/天

工作內容

自由潛水與 Mouthfill 訓練 App 約 5 個對話

自由潛水課程網站和 Mouthfill 訓練 App 的迭代設計評審、UI 優化和部署。Claude Code 用於全端 HTML/CSS 實作、輕度主題改版、版面修正和 Cloudflare 部署，大量使用 Chrome DevTools MCP 進行視覺驗證。

帛琉旅行與旅遊作品集網站約 10 個對話

構建並優化了多個旅行相關網頁專案，包括透過 Cloudflare Workers 整合 Notion 的帛琉旅行費用追蹤器、像素風格生物畫廊、GitHub Pages 旅行入口網站，以及帶有動態海洋生物的 PWA 作品集。Claude Code 處理了全端開發、Cloudflare/GitHub Pages 部署和迭代視覺優化，在錯誤部署目錄和像素藝術生成方面遇到了顯著摩擦。

Telegram 機器人開發與監控約 9 個對話

擴展開發 Telegram 機器人，包括顯示 API 使用統計的置頂狀態訊息、修復回覆通知、解決 macOS TCC 提示的逾時問題，以及支援多機器人配置。Claude Code 用於 Python 程式碼編輯和除錯，但在獲取準確的即時使用資料和最初定向到錯誤元件方面遇到了反覆摩擦。

智慧家庭規劃與儀表板約 4 個對話

研究和規劃智慧家庭設備，包括磁吸軌道燈和 Aqara 面板，以及構建帶有固定標籤和手機體驗的架構圖和儀表板。Claude Code 用於比較頁面建立、專案計劃更新和帶 Chrome DevTools 截圖驗證的迭代 UI 設計。

基礎設施與專案管理約 8 個對話

從 GitHub Pages 遷移到具備 Google 登入保護的 Cloudflare Pages、專案目錄重組、自動提交 hook 設定、Chrome DevTools MCP 配置，以及防止 Mac 休眠等系統維護。Claude Code 大量用於 bash 操作、部署配置、檔案清理和跨專案重組。

你想要的事

修復錯誤

樣式調整

UI 內容修改

資訊查詢

樣式主題

資訊查找

最常用工具

Bash

1676

Edit

1039

Read

835

Grep

263

Write

169

Mcp Chrome-Devtools Take Screenshot

126

程式語言

HTML

1299

Python

238

Markdown

121

JSON

105

JavaScript

Shell

對話類型

迭代優化

多任務

探索

單一任務

快速提問

你如何使用 Claude Code

你是一個高度視覺化、迭代式的建構者，將 Claude Code 視為即時設計夥伴，而非規格執行引擎。在短短 13 天內完成 81 個對話，每個對話平均超過 20 則訊息，不斷審查輸出結果——通常透過 Chrome DevTools 截圖（126 次使用）——並即時進行修正。你的工作流程具有明顯的循環特性：你請求一個修改、視覺檢查結果、指出問題所在，然後重複。這在你的自由潛水 App、帛琉旅行追蹤器和像素風格生物等 UI 重型工作中尤為明顯，Claude 頻繁採取錯誤方式（44 次摩擦事件），需要你重新引導。你不怕拒絕全面修改——當 Claude 用新顏色、字體和版面過度重新設計你的自由潛水網站時，你撤銷了幾乎所有修改，只保留了小幅的 UX 調整。

你的專案以前端 HTML 工作為主（1,299 次 HTML 檔案修改），強調樣式調整和視覺精緻度，而非後端邏輯。你非常重視手機體驗，尤其是 iOS Safari 的特性，如過度滾動白色閃爍和滑動導航，你會為了解決這些問題而堅持進行令人沮喪的多次除錯循環。你還維護著一個出人意料地廣泛的基礎設施——管理 Cloudflare 部署、Telegram 機器人、Notion 整合和 GitHub Pages 遷移——通常在單一對話中同時處理多個專案。一個值得注意的模式是你傾向於在 Claude 發現之前就視覺上發現 Claude 的錯誤：錯誤的部署目錄、Telegram 狀態列中不正確的資料來源，以及被錯誤識別的像素風格生物，都需要你的介入。你以高度自主性運作，將 Claude 作為熟練的執行者，而你仍然是創意總監和品質把關者。

關鍵模式：你是一個快速的視覺迭代者，將 Claude 作為實作的設計工具，不斷檢查輸出並重新引導錯誤方式，而非預先提供詳細規格。

使用者回應時間分布

2-10s

102

10-30s

317

30s-1m

349

1-2m

307

2-5m

204

5-15m

121

>15m

中位數：55.8 秒 • 平均：162.5 秒

多重 Claude（並行對話）

重疊事件

涉及對話數

23%

訊息佔比

你同時執行多個 Claude Code 對話。當對話在時間上重疊時即偵測到多重 Claude，表明你使用並行工作流程。

使用者訊息按時段分布

早晨 (6-12)

144

下午 (12-18)

309

傍晚 (18-24)

426

深夜 (0-6)

803

遇到的工具錯誤

其他

141

指令失敗

檔案過大

找不到檔案

編輯失敗

使用者拒絕

令人印象深刻的成就

你是一個在 12 天內完成 81 個對話的進階使用者，構建並部署了多個網頁專案，擁有強大的視覺設計回饋循環。

設計評審到部署的流程

你已開發出一套非常有效的工作流程：要求 Claude 評審你的 UI 設計、實作所有修正並部署——全部在一個對話中完成。在你的自由潛水 App、Mouthfill 訓練器和智慧家庭儀表板上，你持續使用這個評審-實作-部署循環來快速發布精緻的產品。

透過 Chrome DevTools 進行視覺 QA

你設定了 Chrome DevTools MCP 整合，使用截圖驅動開發來即時驗證視覺變更。透過 126 張截圖和 79 次頁面導航，你實際上給了 Claude 一雙眼睛來觀察你的工作，這對於捕捉 iOS Safari 特性和僅靠程式碼審查會遺漏的手機版面問題特別強大。

多專案基礎設施管理

你協調了一個複雜的生態系統，包括跨多個專案的 Cloudflare Pages 部署、GitHub 儲存庫、Telegram 機器人、Notion 整合和 Cloudflare Workers。你從 GitHub Pages 遷移到 Cloudflare Pages 並加入 Google 登入保護和統一入口路由，展示了與 Claude 執行力相結合的精密基礎設施思維。

最有幫助的事（Claude 的能力）

多檔案修改

良好的除錯

良好的解釋

正確的程式碼編輯

快速/精準搜尋

主動協助

成果

未達成

部分達成

大部分達成

完全達成

問題所在

你的對話深受 Claude 在找到正確方式之前採用錯誤方式的影響，以及誤解要修改哪個元件或專案，以及產生需要多輪修正的有問題程式碼。

錯誤的目標或範圍

Claude 經常在你糾正之前處理錯誤的元件、目錄或專案。提前更明確地說明你指的是哪個檔案、服務或部署目標，可以減少這些失誤。

Claude 多次編輯了終端機狀態列程式碼而非 Telegram 機器人程式碼，在你指出它修改了錯誤元件之前浪費了多輪時間
Claude 從錯誤目錄部署導致專案間的跨專案污染，並且最初在錯誤的專案資料夾而非 project-ashley 中構建功能

過度工程化與多餘的修改

Claude 傾向於在你想要精準修復時過度重新設計或使用過於複雜的解決方案。明確限定修改範圍（例如「只修改 X，不要碰 Y」）可以防止大規模回滾。

Claude 的視覺重新設計修改了顏色、字體、主視覺區塊並移除了動畫——你拒絕了大部分修改，不得不進行大規模回滾到原始設計
Claude 實作了一個複雜的 JS 方向鎖定機制用於標籤滾動，而你只是想禁用垂直滾動，還在需要垂直箭頭時使用了水平箭頭

平台特定錯誤的反覆試錯

iOS Safari 和 Chrome DevTools 問題在找到解決方案之前消耗了多輪失敗嘗試。透過 CLAUDE.md 向 Claude 提供已知限制或過去的解決方案，可以縮短這些循環。

iOS 過度滾動白色閃爍修復經過多個錯誤方式（固定背景、禁用彈跳、錯誤顏色目標），直到你引導 Claude 匹配漸層頭尾顏色
Chrome DevTools MCP 設定在多個對話中需要多次失敗嘗試，才找到 --browser-url 和 --user-data-dir 旗標的正確組合

主要摩擦類型

錯誤方式

有問題的程式碼

誤解需求

過度修改

部署到錯誤目錄

環境問題

推測滿意度（模型估算）

沮喪

不滿意

可能滿意

136

滿意

愉快

值得嘗試的現有 CC 功能

建議加入 CLAUDE.md 的內容

將此內容複製到 Claude Code 以加入你的 CLAUDE.md。

永遠部署到正確的專案目錄。在執行任何部署指令（wrangler、gh-pages 等）之前，先確認目前的工作目錄與目標專案一致。絕對不要從父目錄或同層專案目錄進行部署。

錯誤目錄部署在多個對話中造成了跨專案污染和摩擦——這是最常重複出現的問題之一。

永遠使用繁體中文回應，除非明確要求使用英文。

使用者在多個對話中不得不中斷並糾正 Claude 的語言選擇，從英文切換到中文。

進行 UI/設計修改時，只做被要求的特定修正。除非明確要求，否則不要重新設計顏色、字體、版面或移除動畫。偏好精準的小幅修改而非全面性的重新設計。

Claude 在多個對話中過度重新設計，使用者拒絕了大部分更改，需要大量回滾——過度修改是反覆出現的摩擦模式。

處理 Telegram 機器人程式碼與終端機狀態列程式碼時，在做任何修改前，務必確認使用者指的是哪個元件。Telegram 機器人狀態列與終端機狀態列是不同的系統。

Claude 在多個對話中反覆編輯了錯誤的元件（終端機而非 Telegram 機器人），浪費了時間並讓使用者感到沮喪。

使用 Chrome DevTools MCP 截圖後，在回報成功之前先確認視覺變更符合使用者的要求。主動使用截圖來發現渲染錯誤，而不是等待使用者回饋。

儘管 Claude 有截圖能力且已使用 126 次，使用者仍經常需要自己發現部署和渲染錯誤。

將此內容複製到 Claude Code，它會幫你設定好。

自訂技能（Skills）

為重複性工作流程建立可重複使用的斜線指令

為何適合你：你頻繁部署（14 個部署對話）、反覆進行設計評審，並推送 git 達 188 次——一個 /deploy 技能可以強制執行正確的目錄檢查，而 /critique 技能可以包含你偏好的格式（中文、僅做最小化修改）

mkdir -p .claude/skills/deploy && cat > .claude/skills/deploy/SKILL.md << 'EOF'
# 部署技能
1. 執行 `pwd` 確認目前目錄與目標專案一致
2. 執行 `git status` 檢查是否有未提交的更改
3. 使用專案設定的方式進行部署（wrangler 或 gh-pages）
4. 截圖驗證部署結果
5. 回報上線的 URL
EOF

Hooks（鉤子）

在生命週期事件（如編輯前或工具呼叫後）自動執行 shell 指令

為何適合你：你反覆遇到錯誤目錄部署和忘記提交的問題——一個預指令 hook 可以在任何部署前驗證工作目錄，而對話結束後的 hook 可以警告未提交的更改

# 加入 .claude/settings.json：
{
  "hooks": {
    "PreToolExecution": [{
      "matcher": "Bash",
      "hooks": [{
        "type": "command",
        "command": "if echo \"$TOOL_INPUT\" | grep -q 'wrangler deploy\|gh-pages'; then echo \"⚠️  正在從以下目錄部署: $(pwd)\"; fi"
      }]
    }]
  }
}

無頭模式（Headless Mode）

從腳本以非互動方式執行 Claude，用於自動化任務

為何適合你：你進行批次操作，如清理儲存庫、遷移多個專案和檢查所有專案的問題——無頭模式可以自動化多專案檢查和部署

# 檢查所有專案的未提交更改：
for dir in ~/projects/*/; do
  claude -p "檢查 $dir 的 git 狀態，回報任何未提交的更改或未推送的 commit" --allowedTools "Bash,Read"
done

使用 Claude Code 的新方式

將此內容複製到 Claude Code，它會引導你完成。

錯誤方式的摩擦是你的首要問題

在提示詞中預先說明限制條件和反模式，防止 Claude 走向錯誤路徑。

在 45 個對話中出現 44 次錯誤方式摩擦是極高的。Claude 反覆嘗試過於複雜的解決方案（JS 方向鎖定而非簡單 CSS、照片轉像素而非手繪），編輯錯誤元件（終端機 vs Telegram），並從錯誤目錄部署。添加明確的限制條件，如「不要重新設計整個東西」或「這是 TELEGRAM 機器人，不是終端機」，可以節省大量來回。

貼入 Claude Code：

修復 iOS Safari 上的過度滾動白色閃爍問題。限制條件：只修改背景/body 顏色以匹配漸層端點。不要禁用彈跳滾動、不要添加 JavaScript 事件監聽器、不要修改漸層顏色本身。部署到正確的專案目錄（先確認 pwd）。

主動使用截圖進行視覺驗證

要求 Claude 在回報 UI 任務完成前先截圖並自我驗證。

你已大量使用 Chrome DevTools MCP（126 張截圖，79 次導航），但 Claude 仍然在沒有發現視覺錯誤的情況下回報成功，而你不得不指出這些問題。你的主要目標是樣式調整、UI 內容修改和樣式主題——全都是視覺性的。讓 Claude 在宣告完成前透過截圖驗證自己的工作，將顯著減少你的 49 次不滿意互動。

貼入 Claude Code：

完成修改後，在手機（375px）和桌面視窗上各截一張圖。對照我的要求，在告訴我已完成之前先修正任何不符之處。

將測試/除錯對話批次處理以減少迭代循環

預先提供 Claude 完整的「正確」樣貌，特別是資料精確度任務。

Telegram 機器人狀態對話特別痛苦——Claude 不斷產生錯誤的百分比值，因為它不知道正確的值應該是什麼。除錯顯示問題時，將預期輸出和實際輸出一起貼上，讓 Claude 可以針對確切的差異而不是猜測資料來源。這適用於你的 16 個錯誤修復對話，其中誤解需求（24 次）是主要的摩擦來源。

貼入 Claude Code：

Telegram 機器人狀態列目前顯示：'5h: 45% | 7d: 23% | ctx: 67%'。來自官方 API 儀表板的正確值為：'5h: 72% | 7d: 41% | ctx: 33%'。找出機器人從哪裡獲取這些值，並修復為使用官方 API 端點，而非快取/估算資料。

未來展望

你的 81 個對話揭示了一個透過 Claude Code 驅動複雜多專案工作流程的進階使用者，有明確的機會消除佔你大部分不滿意度的迭代摩擦。

使用 Chrome DevTools 的視覺 QA 循環

你已廣泛使用 Chrome DevTools MCP（200+ 次呼叫），但你最大的摩擦來源——iOS 過度滾動修復、漸層顏色不匹配、部署渲染錯誤——都源於 Claude 在未系統性視覺驗證的情況下進行修改。一個自主循環——編輯程式碼、部署、截圖、對照驗收標準並自我修正——可以消除困擾你樣式調整對話的痛苦來回。

開始方式：使用你現有的 Chrome DevTools MCP 設定和 Claude Code，並在開始工作前定義明確的視覺驗收標準。

貼入 Claude Code：

請幫我修復已部署網站上的 iOS Safari 過度滾動白色閃爍問題。以下是自主工作的方式：

1. 讀取目前的 CSS，識別頁面邊界處的所有背景/漸層顏色
2. 使用 chrome-devtools 瀏覽已部署的 URL，並截圖作為基準
3. 進行修復（匹配頭尾漸層顏色以消除白色閃爍）
4. 使用正確的專案目錄部署到 Cloudflare Pages（先用 `ls` 確認）
5. 等待 30 秒，然後對已部署版本截圖
6. 比較：修復有效嗎？有沒有其他顏色被意外改變？
7. 如果有任何問題，只回滾有問題的部分並重試

不要修改頁面邊界以外的漸層顏色。在每個驗證步驟給我看截圖。

帶目錄保護的多專案部署

錯誤目錄部署和跨專案污染是你在對話中最常重複的摩擦模式。Claude 可以透過建立目錄驗證檢查點、執行部署前差異比較以發現污染，並維護將每個應用程式映射到正確部署路徑的專案登錄檔，自主管理你的多專案 Cloudflare Pages 設定——將你最令人沮喪的失敗模式轉變為零錯誤的工作流程。

開始方式：建立一個 CLAUDE.md 專案記憶檔案，將每個專案映射到其部署目錄，並在任何部署指令前提示 Claude 驗證。

貼入 Claude Code：

在做任何工作之前，閱讀 CLAUDE.md 並建立我的專案結構心智圖。然後：

1. 列出所有專案及其 Cloudflare Pages 部署目錄
2. 對於我要求你修改的每個專案，在編輯前務必執行 `pwd` 和 `ls` 以確認你在正確的目錄中
3. 在部署前，執行 `git diff --stat` 並確認每個更改的檔案都屬於目標專案
4. 如果你在差異中看到來自另一個專案的檔案，立即停止並警告我
5. 成功部署後，執行 `curl -s <deployed-url> | head -20` 以確認正確的內容已上線

現在更新我的自由潛水網站上的主視覺文字並部署。在每個步驟展示你的目錄驗證。

並行代理設計評審流程

你最成功的對話遵循一個模式：建立設計原則、依此評審、實作所有修正，然後部署。目前這是一個有許多修正輪次的串列對話。你可以生成並行的 Claude 代理——一個作為設計評審者依據你建立的原則進行評估，一個實作修正，一個執行視覺回歸檢查——將你 40+ 則訊息的評審和修正對話壓縮成一個自主的單一流程。

開始方式：使用 Claude Code 執行子流程和 bash 指令的能力，協調一個帶有內建檢查點的結構化評審-實作工作流程。

貼入 Claude Code：

我希望你為我的 Mouthfill 訓練 App 進行完整的設計評審和修復循環。自主地按以下階段工作：

第一階段 - 審核：讀取所有 HTML/CSS 檔案。從 CLAUDE.md 讀取我的設計原則。使用 chrome-devtools 對每個主要視圖截圖。列出所有違反我的設計原則的地方，按嚴重程度分類（嚴重/中等/輕微）。

第二階段 - 規劃：以繁體中文向我呈現評審結果。等待我批准要實作的修復。未經我同意不要繼續。

第三階段 - 實作：只套用已批准的修復。不要重新設計任何我未批准的內容。除非明確批准，否則不要更改字體、配色方案或版面。每次編輯檔案後截圖驗證。

第四階段 - 部署：確認正確目錄，部署到 Cloudflare Pages，對上線網站截圖，確認所有修復都可見且其他內容沒有改變。

重要提醒：如果你不確定某個修改是屬於「過度重新設計」還是「已批准的修復」，傾向於不做修改。

「使用者請 Claude 繪製像素風格的海洋生物——Claude 的嘗試解剖結構錯誤到使用者不得不像一個沮喪的美術老師一樣不斷糾正它」

在一個帛琉旅行專案對話中，Claude 首先嘗試將照片轉換為像素風格（完全錯誤的方式），然後改為手繪生物，但在多次痛苦的迭代中反覆失敗於基本的解剖結構、比例和視覺品質。使用者對結果經常感到不滿意。