mcpField
W
webflow-mcp:custom-code-management

webflow-mcp:custom-code-management

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

关于 webflow-mcp:custom-code-management

用于查看、添加和管理 Webflow 网站内联自定义脚本的技能，适合维护分析、跟踪或聊天代码的站点管理者。它涵盖站点级和页面级脚本，并要求变更前明确确认、变更后重新检查。

主要功能

  1. 01列出已注册和已应用的脚本
  2. 02查看指定页面的自定义代码
  3. 03添加站点级内联脚本
  4. 04新增或更新页面级代码
  5. 05删除脚本前要求明确确认

适用场景

  1. 01核对网站当前使用的脚本
  2. 02为所有页面添加内联跟踪代码
  3. 03更新特定页面的自定义代码
  4. 04清除脚本前检查将受影响的内容

MCP 相关

此技能通过 Webflow MCP 列出、读取、添加、更新和删除脚本。MCP 不支持托管或外部脚本，站点级删除操作会移除全部脚本。

安装

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

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

安装后在 Claude Code 中输入/webflow-mcp: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