用 AI 打造自訂前端

現在許多創業者、設計師與工作室會使用 Cursor、Claude Code、v0 或 Lovable 等 AI 寫碼工具（俗稱 Vibe Coding），做出視覺互動高度客製化的品牌網站，並部署在 Vercel 或 Cloudflare Pages。

但如果把所有文案、案例照片與部落格文章都寫死在程式碼裡，每次改一個字或發一篇文章都要重新改程式部署，也沒有表單防灌水與聯絡人後台。

最省力的組合是：「前端畫面請 AI 寫在您的專案裡，內容資料、部落格與聯絡表單交給 Kanorio 管」。您只需要跟著下面三個步驟做，AI 就會自己把兩邊接起來。

第一步：將您的 AI 助理連上 Kanorio 並準備好內容

1. 依照，將您的 Cursor 或 Claude Code 連上 Kanorio。
2. 在後台建立一個新網站（不需要按發布），並在對話框貼上這段指令，請 AI 幫您開好 Headless 模式與資料結構：

我正在用外部前端做一個品牌形象網站 + 部落格，想拿這個 Kanorio 網站當 CMS 後台。請幫我：
1. 呼叫 site.update_developer_settings 開啟 headlessEnabled: true，並告訴我這個網站的永久系統網址（systemHost）
2. 幫我建立我需要的資料集合（例如作品案例 projects、常見問題 faqs），並先塞入幾筆已發布的示範資料
3. 幫我檢查網站是否已有「聯絡我們」線上表單（forms.list），把表單的 formId 與欄位結構列給我

完成後，AI 已經知道您網站的所有集合欄位、API 網址與表單編號了。

---

第二步：請 AI 在您的前端專案接上讀取與表單 API

在 Cursor 或 Claude Code 打開您的前端專案（例如 Next.js 或 Astro 專案），直接貼上下方提示詞。AI 會自動讀取 Kanorio 的自描述 Schema 端點（/api/v1/collections）並寫好所有串接程式碼：

請幫我把這個前端專案接上剛剛那個 Kanorio 網站的 Content Delivery API（基底網址用該站的 https://s-xxx.kanorio.com）：
1. 所有公開內容讀取都不需要帶 API 金鑰（絕對不要把 knr_pat_ 放進前端環境變數）
2. 請先讀取 GET /api/v1/collections 了解各集合與 blog 系統集合的欄位，幫我產生 TypeScript 型別
3. 圖片與檔案請從回應頂層的 assets[assetId].url 取得公開 CDN 網址與寬高
4. 部落格文章列表與內頁請讀取 /api/v1/collections/blog/items（帶上 expand=authors,categories,tags 與 formats=markdown,html），分類篩選用 filter[categories][has_slug]=分類slug
5. 聯絡我們表單請接 GET /api/v1/forms/{formId}/challenge 取得挑戰後，POST 到 /api/v1/forms/{formId}/submit

如果您使用的是沒有連 MCP 的外部 AI 工具（如 v0、Lovable、Bolt），只要把您的系統網址以及 Kanorio 的 AI 規格索引網址 https://kanorio.com/llms.txt 一起貼給它即可：

我的後台使用 Kanorio Headless CMS，API 基底網址是 https://s-xxxxxxxxxxxx.kanorio.com
請先閱讀 https://kanorio.com/llms.txt 了解 Kanorio Content Delivery API 的格式，並讀取 https://s-xxxxxxxxxxxx.kanorio.com/api/v1/collections 查看我的資料表結構，幫我把首頁案例、部落格與聯絡表單接上真實資料。

---

第三步：部署上線並設定跨網域與自動更新

當您把前端部署到 Vercel 或 Cloudflare Pages（假設正式網址為 https://www.yourbrand.com）後，回 Cursor 對 AI 說這句話即可完成收尾：

我的前端已經部署到 https://www.yourbrand.com 了，請幫我：
1. 把 https://www.yourbrand.com 加進這個 Kanorio 網站的 allowedOrigins（CORS 白名單），並將 externalStorefrontUrl 設為 https://www.yourbrand.com
2. 幫我在前端專案新增一個接收 Kanorio Webhook 的 /api/revalidate 路由（驗證 X-Kanorio-Signature 並對 payload.data.cacheTags 執行 revalidateTag），再用 webhooks.create 把 https://www.yourbrand.com/api/revalidate 註冊到 Kanorio

完成後：

• 您或同事在 Kanorio 後台「數據與資料 › 資料表」改表格、或在「內容 › 部落格」發布新文章時，您的外部網站會在幾秒內自動更新。
• 訪客在外部網站填寫聯絡表單，會直接進到 Kanorio 後台「行銷 › 線上表單」與「顧客 › 聯絡人」，並寄發通知信給您。

相關文件