1. 從零到上線Claude Code 與 Vibe Coding 搭建 n8n 模板站全流程n8n 是個(gè)好東西節(jié)點(diǎn)式自動(dòng)化工作流拖拖拽拽就能把 API、數(shù)據(jù)庫(kù)、消息推送串起來(lái)。但問(wèn)題也來(lái)了工作流一多本地 JSON 文件散落各處想分享給同事得打包發(fā)壓縮包想找上周調(diào)好的那個(gè)「飛書(shū)通知 定時(shí)抓取」得翻半天文件夾。我試過(guò)用筆記軟件存 JSON結(jié)果格式全亂導(dǎo)入 n8n 直接報(bào)錯(cuò)。于是我想干脆做個(gè)網(wǎng)站把 n8n 工作流模板集中展示、分類、一鍵復(fù)制 JSON。目標(biāo)很明確一個(gè)能訪問(wèn)的模板站有列表、有詳情、有復(fù)制按鈕不需要用戶系統(tǒng)不需要后臺(tái)管理數(shù)據(jù)先用本地 JSON 文件驅(qū)動(dòng)。整個(gè)站不手寫(xiě)一行代碼全程用 Claude Code 配合 Vibe Coding 的方式完成模型通道統(tǒng)一走 TaoToken。這篇文章就是完整復(fù)現(xiàn)記錄。你會(huì)看到怎么把模糊需求拆成 Claude Code 能執(zhí)行的提示詞、怎么配置 Claude Code 的 Base URL 和 API Key、n8n 模板的 JSON 結(jié)構(gòu)長(zhǎng)什么樣、本地怎么跑起來(lái)驗(yàn)證、以及部署到 Vercel 后常見(jiàn)的 401 和 OAuth 報(bào)錯(cuò)怎么排查。適合想用 AI 輔助做小工具但不想深陷前端工程化的朋友也適合已經(jīng)在用 n8n 想整理自己工作流庫(kù)的人。核心檢索詞先擺出來(lái)Claude Code 配置、Vibe Coding 做網(wǎng)站、n8n 模板站搭建、TaoToken API 接入。這四個(gè)詞貫穿全文你跟著步驟走就能復(fù)現(xiàn)。先說(shuō)清楚 Vibe Coding 是什么。它不是「AI 幫你補(bǔ)全代碼」而是你用自然語(yǔ)言描述意圖AI 負(fù)責(zé)生成、修改、調(diào)試你負(fù)責(zé)驗(yàn)收和提需求。Claude Code 是 Anthropic 出的命令行編程助手能讀你本地文件、執(zhí)行命令、改代碼。兩者結(jié)合做靜態(tài)站這種需求邊界清晰的項(xiàng)目效率很高。但 Claude Code 默認(rèn)走官方通道國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下經(jīng)常遇到連接問(wèn)題。TaoToken 在這里的角色是統(tǒng)一 API 通道你拿一個(gè) Key配好 Base URLClaude Code 就能穩(wěn)定調(diào)用模型。后面我會(huì)給出完整的 settings.json 配置片段你直接復(fù)制改 Key 就行。整個(gè)流程分六步需求拆解、TaoToken 前置配置、Claude Code 可復(fù)制配置、n8n 模板結(jié)構(gòu)設(shè)計(jì)、本地運(yùn)行驗(yàn)證、常見(jiàn)報(bào)錯(cuò)排查。每一步都有具體命令和文件內(nèi)容不跳步。2. TaoToken 前置準(zhǔn)備統(tǒng)一 Key 與 API 通道接入 Claude Code在開(kāi)始讓 Claude Code 干活之前得先把模型通道配好。這一步不做后面所有命令都會(huì)卡在連接上。TaoToken 的作用是提供一個(gè)統(tǒng)一的 API 入口你不需要分別去配不同模型的官方通道一個(gè) Key 走天下。先訪問(wèn)官網(wǎng)注冊(cè)賬號(hào)https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。注冊(cè)流程不復(fù)雜郵箱驗(yàn)證后進(jìn)控制臺(tái)。進(jìn)控制臺(tái)后找 API Keys 頁(yè)面路徑是 console 下的 api-keys。點(diǎn)創(chuàng)建新 Key復(fù)制出來(lái)保存好。這個(gè) Key 只顯示一次丟了就得重新建。建議命名成「claude-code-n8n」這種帶項(xiàng)目標(biāo)識(shí)的名字方便后面管理。TaoToken 的 API 基礎(chǔ)地址是https://taotoken.net/api 。注意這個(gè)地址不帶任何查詢參數(shù)就是純 Base URL。Claude Code 配置里填這個(gè)。模型 ID 怎么選Claude Code 本身是 Anthropic 的工具推薦用 claude-sonnet 系列模型 ID具體名稱在模型對(duì)話頁(yè)面能看到當(dāng)前可用的列表。你可以在模型對(duì)話里先發(fā)一條測(cè)試消息確認(rèn) Key 和模型都能通再去配 Claude Code。這里有個(gè)關(guān)鍵點(diǎn)Claude Code 的配置文件和普通環(huán)境變量不一樣。它讀的是 settings.json路徑通常在~/.claude/settings.jsonmacOS/Linux或C:\Users\你的用戶名\.claude\settings.jsonWindows。這個(gè)文件如果不存在就手動(dòng)創(chuàng)建。配置的核心三件套Base URL、API Key、Model ID。缺一不可。很多人只配了 Key 沒(méi)改 Base URL結(jié)果請(qǐng)求還是打到默認(rèn)地址報(bào) 401 或者連接超時(shí)。另外提醒一句TaoToken 是合規(guī)的 API 通道服務(wù)你用它來(lái)調(diào)用模型做開(kāi)發(fā)不要把它理解成其他東西。配置過(guò)程中如果遇到網(wǎng)絡(luò)層面的問(wèn)題優(yōu)先檢查本地防火墻和 DNS不要往奇怪的方向想。配好之后你可以先用 curl 測(cè)一下通道是否通curl https://taotoken.net/api/v1/messages \ -H Content-Type: application/json \ -H x-api-key: 你的Key \ -H anthropic-version: 2023-06-01 \ -d { model: claude-sonnet-4-20250514, max_tokens: 100, messages: [{role: user, content: 回復(fù)ok}] }如果返回 JSON 里有 content 字段說(shuō)明通道沒(méi)問(wèn)題。如果返回 401檢查 Key 是否復(fù)制完整如果返回 model not found去模型對(duì)話頁(yè)面確認(rèn)模型 ID 拼寫(xiě)。這一步做完Claude Code 的「燃料」就加滿了。接下來(lái)配 Claude Code 本身。3. Claude Code 可復(fù)制配置settings.json 與項(xiàng)目初始化Claude Code 的安裝方式這里不展開(kāi)假設(shè)你已經(jīng)裝好了claude命令。重點(diǎn)講配置。打開(kāi)或創(chuàng)建~/.claude/settings.json寫(xiě)入以下內(nèi)容。這是一個(gè)完整的可復(fù)制片段你只需要替換你的TaoTokenKey這一處{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的TaoTokenKey, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npm run *), Bash(npx *), Bash(git *) ], deny: [] } }逐字段說(shuō)明。ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址這是整個(gè)配置的關(guān)鍵不改這里請(qǐng)求會(huì)走默認(rèn)通道。ANTHROPIC_API_KEY填你剛才在 console 里創(chuàng)建的 Key。ANTHROPIC_MODEL和ANTHROPIC_SMALL_FAST_MODEL都填同一個(gè)模型 ID前者用于主對(duì)話后者用于快速補(bǔ)全類任務(wù)統(tǒng)一填省事。permissions.allow里我放開(kāi)了 Read、Write、Edit 和幾個(gè)常用 Bash 命令。這樣 Claude Code 在生成文件、跑 npm 腳本時(shí)不會(huì)每一步都彈確認(rèn)效率高很多。如果你對(duì)安全比較敏感可以只留 Read 和 WriteBash 相關(guān)的手動(dòng)確認(rèn)。配好之后在終端里驗(yàn)證claude --version claude 你好請(qǐng)回復(fù)當(dāng)前配置的模型名稱如果第二條命令能正常返回內(nèi)容說(shuō)明 Claude Code 已經(jīng)通過(guò) TaoToken 通道連上模型了。如果報(bào)local proxy failed或者連接被拒檢查 Base URL 是否多了斜杠、Key 是否有多余空格。接下來(lái)初始化項(xiàng)目。新建一個(gè)目錄mkdir n8n-template-site cd n8n-template-site npm init -y然后啟動(dòng) Claude Code 交互模式claude進(jìn)去之后第一句話很關(guān)鍵。不要上來(lái)就說(shuō)「幫我做個(gè)網(wǎng)站」太模糊。用我實(shí)測(cè)有效的提示詞你是一個(gè)資深前端工程師。我要做一個(gè) n8n 工作流模板分享網(wǎng)站技術(shù)棧用 Vite React TypeScript樣式用 Tailwind CSS。功能只要三個(gè)首頁(yè)展示模板卡片列表、點(diǎn)擊卡片進(jìn)詳情頁(yè)顯示完整 JSON、詳情頁(yè)有復(fù)制 JSON 按鈕。數(shù)據(jù)從本地src/data/workflows.json讀取。不要用戶系統(tǒng)不要后臺(tái)不要數(shù)據(jù)庫(kù)。代碼完成后我會(huì)部署到 Vercel。這段話把技術(shù)棧、功能邊界、數(shù)據(jù)來(lái)源、部署目標(biāo)全說(shuō)清楚了。Claude Code 會(huì)開(kāi)始生成文件結(jié)構(gòu)。你可以在它生成過(guò)程中隨時(shí)打斷比如「卡片間距再大一點(diǎn)」「JSON 展示用代碼高亮」。這里有個(gè) Vibe Coding 的實(shí)操技巧每次只提一個(gè)修改點(diǎn)。不要一口氣說(shuō)「把顏色改了、字體改了、布局也調(diào)一下」AI 容易顧此失彼。一次說(shuō)一個(gè)改完看效果再提下一個(gè)。項(xiàng)目初始化完成后目錄結(jié)構(gòu)大概是這樣n8n-template-site/ ├── src/ │ ├── data/workflows.json │ ├── components/ │ │ ├── WorkflowCard.tsx │ │ └── JsonViewer.tsx │ ├── pages/ │ │ ├── Home.tsx │ │ └── Detail.tsx │ ├── App.tsx │ └── main.tsx ├── index.html ├── package.json ├── tailwind.config.js └── vite.config.ts如果 Claude Code 生成的目錄和這個(gè)有出入不用慌只要功能對(duì)就行。Vibe Coding 不追求結(jié)構(gòu)完美追求能跑。配置階段最容易踩的坑是 settings.json 的 JSON 格式錯(cuò)誤。多一個(gè)逗號(hào)、少一個(gè)引號(hào)Claude Code 啟動(dòng)時(shí)不會(huì)報(bào)錯(cuò)但請(qǐng)求會(huì)靜默失敗。建議用cat ~/.claude/settings.json | python -m json.tool驗(yàn)證一下格式。4. n8n 模板結(jié)構(gòu)設(shè)計(jì)與頁(yè)面生成讓 AI 理解數(shù)據(jù)形狀網(wǎng)站能不能用取決于數(shù)據(jù)長(zhǎng)什么樣。n8n 工作流導(dǎo)出后是一個(gè) JSON 文件里面節(jié)點(diǎn)、連接、參數(shù)一大堆。如果直接把原始 JSON 塞給前端渲染頁(yè)面會(huì)又亂又慢。所以要先設(shè)計(jì)一個(gè)「模板元數(shù)據(jù) 原始工作流」的結(jié)構(gòu)。我在src/data/workflows.json里定義的結(jié)構(gòu)是這樣的{ templates: [ { id: feishu-notify, name: 飛書(shū)群通知, description: 定時(shí)抓取 RSS 并通過(guò)飛書(shū)機(jī)器人推送, category: 通知, tags: [飛書(shū), RSS, 定時(shí)], nodeCount: 5, workflow: { nodes: [], connections: {} } } ] }外層是 templates 數(shù)組每個(gè)模板有 id、name、description、category、tags、nodeCount 這些展示用字段workflow 字段放 n8n 原始 JSON。這樣首頁(yè)只讀元數(shù)據(jù)詳情頁(yè)才加載完整 workflow性能好。把這個(gè)結(jié)構(gòu)告訴 Claude Code數(shù)據(jù)文件 src/data/workflows.json 的結(jié)構(gòu)是 templates 數(shù)組每個(gè)元素包含 id、name、description、category、tags、nodeCount 和 workflow。首頁(yè)只渲染前六個(gè)字段詳情頁(yè)根據(jù) id 找到對(duì)應(yīng)模板把 workflow 字段用 JSON.stringify 格式化后展示并加一個(gè)復(fù)制按鈕。Claude Code 會(huì)生成對(duì)應(yīng)的 TypeScript 類型定義和組件。這里注意一個(gè)細(xì)節(jié)n8n 的 workflow JSON 里可能有循環(huán)引用或者特殊字符直接 JSON.stringify 可能報(bào)錯(cuò)。讓 Claude Code 加一個(gè) try-catch在 JsonViewer 組件里對(duì) workflow 做 JSON.stringify 時(shí)用 try-catch 包裹如果失敗就顯示「該工作流包含無(wú)法序列化的內(nèi)容」。這個(gè)提示詞很實(shí)用因?yàn)?n8n 某些節(jié)點(diǎn)會(huì)帶函數(shù)字符串序列化時(shí)容易出問(wèn)題。頁(yè)面生成過(guò)程中Claude Code 可能會(huì)問(wèn)你要不要加路由?；卮鹨?react-router-dom首頁(yè)路徑/詳情頁(yè)/template/:id。這樣部署到 Vercel 后刷新詳情頁(yè)不會(huì) 404因?yàn)?Vercel 默認(rèn)支持 SPA 回退。生成完首頁(yè)后你可以讓 Claude Code 跑一下本地開(kāi)發(fā)服務(wù)器npm run dev它會(huì)輸出一個(gè) localhost 地址。打開(kāi)瀏覽器看效果。如果頁(yè)面白屏按 F12 看控制臺(tái)報(bào)錯(cuò)把報(bào)錯(cuò)信息直接復(fù)制給 Claude Code它會(huì)定位問(wèn)題。我實(shí)測(cè)下來(lái)Claude Code 處理這類「數(shù)據(jù)驅(qū)動(dòng) 路由 復(fù)制按鈕」的需求很穩(wěn)基本兩三輪對(duì)話就能出可用頁(yè)面。復(fù)雜的是樣式微調(diào)比如卡片陰影、hover 效果、響應(yīng)式斷點(diǎn)。這些用 Tailwind 的類名描述就行比如「卡片用 rounded-lg shadow-md hover:shadow-lg transition」。還有一個(gè)提效技巧讓 Claude Code 一次性生成多個(gè)示例模板數(shù)據(jù)。你可以說(shuō)在 workflows.json 里生成 6 條示例數(shù)據(jù)分類覆蓋通知、數(shù)據(jù)處理、定時(shí)任務(wù)每條 workflow 字段放一個(gè)最簡(jiǎn)單的 n8n 工作流 JSON包含一個(gè) manualTrigger 節(jié)點(diǎn)和一個(gè) set 節(jié)點(diǎn)。這樣你本地跑起來(lái)就有內(nèi)容可看不用手動(dòng)造數(shù)據(jù)。數(shù)據(jù)結(jié)構(gòu)和頁(yè)面都生成后重點(diǎn)轉(zhuǎn)向驗(yàn)證。很多人到這里就以為完事了其實(shí)本地跑通和部署上線之間還有坑。5. 本地運(yùn)行驗(yàn)證與常見(jiàn)報(bào)錯(cuò)排查401、local proxy failed、OAuth本地驗(yàn)證分三層模型通道通不通、頁(yè)面能不能渲染、復(fù)制功能是否正常。第一層模型通道。在項(xiàng)目目錄下直接問(wèn) Claude Codeclaude 讀取 src/data/workflows.json告訴我里面有幾條模板如果它能正確讀出數(shù)量說(shuō)明 Claude Code 通過(guò) TaoToken 通道能正常讀寫(xiě)本地文件。如果報(bào) 401按這個(gè)順序查Key 是否復(fù)制完整、settings.json 里ANTHROPIC_API_KEY字段名是否拼錯(cuò)、Key 是否過(guò)期。TaoToken 控制臺(tái)的 api-keys 頁(yè)面可以重新生成 Key。第二層頁(yè)面渲染。npm run dev后打開(kāi) localhost檢查三件事首頁(yè)卡片是否顯示、點(diǎn)擊卡片是否跳詳情、詳情頁(yè) JSON 是否格式化顯示。如果首頁(yè)空白看控制臺(tái)有沒(méi)有Cannot read property map of undefined這通常是 workflows.json 結(jié)構(gòu)不對(duì)templates 字段沒(méi)對(duì)上。第三層復(fù)制功能。點(diǎn)復(fù)制按鈕去任意文本框粘貼看是不是完整 JSON。如果復(fù)制出來(lái)是[object Object]說(shuō)明復(fù)制的是對(duì)象不是字符串讓 Claude Code 改成JSON.stringify(workflow, null, 2)。下面是我踩過(guò)的幾個(gè)真實(shí)報(bào)錯(cuò)和解法。報(bào)錯(cuò)一401 Unauthorized。返回體里通常有invalid api key。原因九成是 Key 錯(cuò)了或者 Base URL 沒(méi)改。檢查 settings.json 里ANTHROPIC_BASE_URL是不是https://taotoken.net/api注意結(jié)尾沒(méi)有斜杠。Key 重新從 console 復(fù)制一次不要手動(dòng)輸入。報(bào)錯(cuò)二local proxy failed或ECONNREFUSED。這是 Claude Code 嘗試連接本地代理失敗。檢查系統(tǒng)環(huán)境變量里有沒(méi)有殘留的HTTP_PROXY或HTTPS_PROXY有的話臨時(shí) unset 掉。另外確認(rèn) settings.json 里沒(méi)有配ANTHROPIC_PROXY之類的字段。報(bào)錯(cuò)三reading choices或reading content。這個(gè)報(bào)錯(cuò)通常出現(xiàn)在模型返回格式和 Claude Code 預(yù)期不一致時(shí)。檢查ANTHROPIC_MODEL填的模型 ID 是否在 TaoToken 模型對(duì)話頁(yè)面里存在。如果模型 ID 寫(xiě)錯(cuò)返回體結(jié)構(gòu)不對(duì)就會(huì)報(bào)這個(gè)。去模型對(duì)話頁(yè)面復(fù)制準(zhǔn)確的模型 ID。報(bào)錯(cuò)四OAuth 相關(guān)報(bào)錯(cuò)比如OAuth token expired。Claude Code 某些版本會(huì)嘗試走 OAuth 流程。如果你用的是 API Key 模式確保 settings.json 里沒(méi)有ANTHROPIC_AUTH_TOKEN字段只保留ANTHROPIC_API_KEY。兩者同時(shí)存在會(huì)沖突。報(bào)錯(cuò)五Vercel 部署后詳情頁(yè)刷新 404。這是 SPA 路由問(wèn)題。在項(xiàng)目根目錄加一個(gè)vercel.json{ rewrites: [ { source: /(.*), destination: /index.html } ] }這個(gè)配置讓所有路徑都回退到 index.htmlreact-router 就能接管路由。排查順序建議先確認(rèn)模型通道用 claude 命令讀文件再確認(rèn)本地頁(yè)面npm run dev最后確認(rèn)部署配置vercel.json。一層一層來(lái)不要跳。如果你在排查過(guò)程中需要重新生成 Key 或查看模型列表去 console 和模型對(duì)話頁(yè)面操作。接入文檔里有更詳細(xì)的參數(shù)說(shuō)明遇到不確定的字段先查文檔再改配置。6. 部署上線與后續(xù)迭代用 TaoToken 持續(xù)驅(qū)動(dòng) Vibe Coding本地跑通后部署到 Vercel 就是幾條命令的事。先把代碼推到 GitHubgit init git add . git commit -m init n8n template site git remote add origin 你的倉(cāng)庫(kù)地址 git push -u origin main然后去 Vercel 導(dǎo)入這個(gè)倉(cāng)庫(kù)框架預(yù)設(shè)選 Vite構(gòu)建命令npm run build輸出目錄dist。點(diǎn)部署等一兩分鐘就能拿到一個(gè)*.vercel.app的地址。部署完成后打開(kāi)線上地址重復(fù)本地那三層驗(yàn)證首頁(yè)卡片、詳情跳轉(zhuǎn)、復(fù)制按鈕。如果線上白屏但本地正常大概率是構(gòu)建時(shí)環(huán)境變量或路徑問(wèn)題?？?Vercel 的構(gòu)建日志找 error 關(guān)鍵字。后續(xù)迭代才是 Vibe Coding 真正省事的地方。比如你想加一個(gè)「按分類篩選」功能不需要自己寫(xiě)篩選邏輯直接對(duì) Claude Code 說(shuō)在首頁(yè)加一個(gè)分類篩選欄從 workflows.json 里提取所有 category 去重后渲染成按鈕點(diǎn)擊按鈕過(guò)濾卡片列表默認(rèn)顯示全部。Claude Code 會(huì)改 Home.tsx 和相關(guān)的狀態(tài)管理。改完你本地npm run dev看一眼沒(méi)問(wèn)題就 commit pushVercel 自動(dòng)重新部署。再比如你想讓模板詳情頁(yè)顯示節(jié)點(diǎn)數(shù)量統(tǒng)計(jì)或者加一個(gè)「下載 JSON」按鈕都是一句話的事。Vibe Coding 的核心心法就是把需求描述清楚讓 AI 改你驗(yàn)收。不要自己動(dòng)手改代碼一改就破壞了「AI 可維護(hù)」的一致性。關(guān)于模型通道長(zhǎng)期做這類小項(xiàng)目建議用 Coding Plan。它比按量計(jì)費(fèi)更適合頻繁調(diào)用的場(chǎng)景Claude Code 每次對(duì)話都在消耗 token包月模式心里有底。具體在 console 里能看到套餐選項(xiàng)。還有一點(diǎn)n8n 模板的 workflow 字段會(huì)越來(lái)越大如果模板多了workflows.json 會(huì)變成幾百 KB。這時(shí)候可以讓 Claude Code 幫你拆成多個(gè)文件按分類放src/data/notifications.json、src/data/data-processing.json首頁(yè)動(dòng)態(tài) import。這個(gè)優(yōu)化等模板超過(guò) 20 條再做前期不用過(guò)度設(shè)計(jì)。最后說(shuō)一個(gè)實(shí)用技巧每次讓 Claude Code 改完代碼讓它自己跑一遍npm run build。構(gòu)建通過(guò)再提交能擋掉大部分類型錯(cuò)誤和導(dǎo)入路徑問(wèn)題。我習(xí)慣在提示詞末尾加一句「改完后執(zhí)行 npm run build 確認(rèn)無(wú)報(bào)錯(cuò)」省得部署時(shí)才發(fā)現(xiàn)問(wèn)題。整個(gè)站從零到上線一個(gè)晚上足夠。核心成本不在寫(xiě)代碼而在把需求說(shuō)清楚。TaoToken 在這里解決的是通道穩(wěn)定性問(wèn)題讓你不用折騰網(wǎng)絡(luò)配置專注在 Vibe Coding 本身。模型對(duì)話頁(yè)面可以隨時(shí)測(cè)試模型可用性接入文檔里有完整的參數(shù)對(duì)照表遇到配置問(wèn)題先查文檔。