mcpField
C
custom-code-management

custom-code-management

github.com/webflow开发132353 次安装6 天前更新
代码仓库

关于 custom-code-management

用于管理 Webflow 网站内嵌自定义 JavaScript 的技能，涵盖全站和页面级代码。它通过 Webflow MCP 工具指导发现、审查、确认变更及验证。

主要功能

  1. 01列出已注册和已应用脚本
  2. 02查看页面级自定义代码
  3. 03添加或更新内嵌脚本
  4. 04删除全站或页面的全部脚本
  5. 05确认变更并验证结果

适用场景

  1. 01检查网站已注册的脚本
  2. 02添加分析或跟踪代码
  3. 03更新特定页面的代码
  4. 04审查后删除全部脚本

MCP 相关

需要使用 Webflow MCP 工具执行网站和脚本操作，并须先调用 webflow_guide_tool。脚本操作包括列出、添加、更新和删除自定义代码。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/webflow/webflow-skills --skill custom-code-management

安装后在 Claude Code 中输入/custom-code-management确认已加载。

详细介绍

自定义代码管理

在 Webflow 网站上添加、审核和管理内联自定义脚本——分析、跟踪像素、聊天小组件或任何自定义 JavaScript。

重要说明

所有操作始终使用 Webflow MCP 工具：

  • 在调用任何其他工具之前，使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
  • 使用 Webflow MCP 的 data_sites_tool，并指定 action list_sites，识别可用的网站
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action list_registered_scripts，列出所有已注册的脚本
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action list_applied_scripts，列出已应用到页面的脚本
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action add_inline_site_script，注册新的内联脚本
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action delete_all_site_scripts，移除所有网站脚本（无法选择性删除）
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action get_page_script，获取特定页面的自定义代码
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action upsert_page_script，添加或更新页面级自定义代码
  • 使用 Webflow MCP 的 data_scripts_tool，并指定 action delete_all_page_scripts，移除页面上的所有自定义代码
  • 所有工具调用都必须包含必需的 context 参数（15-25 个词，以第三人称视角撰写）

操作说明

阶段 1：发现
  1. 首先调用 webflow_guide_tool——这始终是第一个 MCP 工具调用
  2. 获取网站：使用 data_sites_tool，并指定 action list_sites。如果只有一个网站，则自动使用该网站。
阶段 2：分析
  1. 列出脚本：并行调用 list_registered_scripts 和 list_applied_scripts
  2. 检查页面级脚本（如适用）：对特定页面使用 get_page_script
  3. 展示结果：名称、版本、位置（页眉/页脚）、注册状态与应用状态
阶段 3：规划与确认

进行任何更改之前，先展示计划并要求用户明确确认：

  • 添加脚本：用户必须输入 "add"
  • 移除所有网站脚本：用户必须输入 "delete all"（警告：无法选择性删除）
  • 页面级更改：用户必须输入 "update"
阶段 4：执行
  1. 添加网站脚本：使用 add_inline_site_script，并提供 displayName、sourceCode、version、location、canCopy
  2. 移除所有网站脚本：使用 delete_all_site_scripts
  3. 添加/更新页面脚本：使用 upsert_page_script
  4. 移除页面脚本：使用 delete_all_page_scripts
阶段 5：验证
  1. 重新列出脚本以确认操作成功
  2. 报告更改内容（名称、位置、版本、字符数）
  3. 提醒用户发布——建议使用 safe-publish skill

示例

示例 1：查看脚本

用户：“我的网站上有哪些脚本？”

  1. webflow_guide_tool → data_sites_tool → 并行调用 list_registered_scripts 和 list_applied_scripts
  2. 展示所有脚本的摘要
示例 2：添加 Google Tag Manager

用户：“在我的网站上添加 GTM”

  1. webflow_guide_tool → data_sites_tool → 询问 GTM 容器 ID
  2. 预览脚本，要求用户输入 "add" → add_inline_site_script（页眉，版本 "1.0.0"）
  3. 验证并提醒用户发布
示例 3：移除所有脚本

用户：“移除所有脚本”

  1. webflow_guide_tool → data_sites_tool → 列出当前脚本
  2. 警告：将移除所有脚本。要求用户输入 "delete all" → delete_all_site_scripts
  3. 验证并提醒用户发布
示例 4：页面专属跟踪

用户：“在我的感谢页面上添加转化跟踪”

  1. webflow_guide_tool → data_sites_tool → 使用 get_page_script 检查现有脚本
  2. 预览，要求用户输入 "update" → upsert_page_script
  3. 验证并提醒用户发布

指南

  • 始终先调用 webflow_guide_tool — 然后才能使用其他 MCP 工具
  • 不要使用 <script> 标签 — Webflow 会自动添加
  • 每个脚本最多 10,000 个字符；displayName + version 必须唯一
  • 站点级脚本（add_inline_site_script）适用于所有页面；页面级脚本（upsert_page_script）仅适用于一个页面
  • 无法选择性删除 — delete_all_site_scripts 会删除所有内容；务必先列出脚本，让用户了解哪些内容会被删除
  • MCP 不支持托管脚本或外部脚本 — 仅支持内联脚本
  • 建议将分析脚本（GA、GTM）放在页眉；将聊天小组件和非关键脚本放在页脚
  • 如果 displayName + version 已存在，建议递增版本号
  • 务必提醒用户更改后要发布

评论

支持 Markdown