用 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 后台“营销 › 在线表单”与“顾客 › 联系人”，并寄发通知信给您。

相关文件