1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | Webflow Page Structure（designer-tools-webflow-webflow-skills） | — |
| 作者/维护者 | Webflow, Inc.（官方 GitHub 组织），子目录历史提交者含 yan-xie-webflow、Adam Lehman、viratatwebflow 等具名员工 | GitHub API |
| 来源链接 | github.com/webflow/webflow-skills/tree/main/plugins/webflow-skills/skills/designer-tools | — |
| 许可证 | MIT | GitHub API |
| GitHub Stars / Forks | 合集仓库整体 106 / 16（该数字属整个 webflow-skills 插件包，不代表本子技能自身热度） | GitHub API（认证取数） |
| 最新版本 | 插件清单 plugin.json 标注 “1.0.7” | 仓库文件核实 |
| 安装方式 | Claude Code 插件市场一键安装，或 npx skills 跨 Agent CLI，或手工复制技能目录 |
官方 README |
2. 功能介绍与亮点
Page Structure 是 Webflow 官方 webflow-skills 插件包中负责“搭建”的核心技能：在 Webflow Designer 中新增、检查、修改页面元素、组件与样式，覆盖从“看现在页面长什么样”到“加一个新的两栏布局”再到“改一个组件里的文案”的全过程。
核心能力按五个阶段组织：
- 发现阶段：确定目标站点与页面，无需打开 Designer 界面即可定位
- 检查阶段（只读）：列出页面全部元素与嵌套结构、列出与检视站点组件
- 规划阶段：任何改动前先对目标区域做前后快照，向用户完整说明将要创建/修改/删除的内容
- 确认门槛：所有写操作都要求用户明确回应（如“请确认是否继续”），删除等破坏性操作还需用户输入“confirm”或“delete”，并提示会一并影响的子元素
- 执行与核验阶段：应用改动后再次快照，对比呈现最终结果
大部分操作（拉取/新建元素、设置样式、编辑组件属性与变体）都直接对指定页面 ID 无头（headless）运行，不需要保持 Webflow Designer 处于打开状态；仅“读取/切换当前打开的画布页面”“交互式点选元素”“创建页面文件夹”“打开组件画布视图”这几项操作依赖 Designer 会话。SKILL.md 附带 5 个完整场景示例（列出元素、搭建 Hero 区块、更新组件文案、重构布局、创建两栏网格），指令细节具体到每一步该调用哪个 MCP 工具。
一名外部用户（GitHub 账号 susflow）曾在 issue 中指出该技能引用的部分 MCP 工具名称已过时（如 de_page_tool），Webflow 团队在约 11 天后完成一批文档修复提交，将全部工具名迁移为 Webflow MCP 2.0.1 的正确命名——当前 SKILL.md 内容已确认不再含任何过时工具名。
3. 适用场景
所属分类：前端与设计
适合已经在用 AI 编程助手日常维护 Webflow 站点、且需要直接改页面结构而不只是审计内容的开发者与网站运营者——例如给某个页面加一个新区块、调整现有布局、批量修改某个组件的文案或样式。相比打开 Webflow Designer 手动拖拽，这类改动可以在对话里描述需求、看到变更预览、确认后由 Agent 完成。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | 原生支持 | README 提供官方插件市场安装命令与专属 skills 目录 ~/.claude/skills/ |
| Codex | 原生支持 | README 官方支持表格列出 OpenAI Codex，skills 目录路径 ~/.codex/skills/；仓库内另含 .codex-plugin 清单目录 |
| OpenClaw | 未验证 | README 未提及，无法判断 |
| Hermes Agent | 未验证 | README 未提及，无法判断 |
5. 推荐理由
日常维护 Webflow 站点时，“改页面结构”往往比“审计内容”更高频，但也更容易因为一次误操作影响生产站点。这个技能把搭建/编辑页面元素、组件、样式的整套操作放进对话里：大多数读取和构建动作无需保持 Designer 打开，任何真正改动前都会先给出前后快照与完整计划，删除等破坏性操作还额外要求输入“confirm”或“delete”才会执行。一名外部用户报告的工具名过时问题在约 11 天内被官方修复，说明该技能仍在被真实使用并持续维护，而不是发布后无人问津的文档。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 官方 Webflow 出品，所属合集仓库持续活跃维护（最近一次推送 2026-07-23）；有外部具名用户针对本技能提交过真实 issue 并推动了官方修复，但作为子技能未检索到独立于官方生态之外的第三方评价 |
| 可用性 | 8 | 需预先配置好 Webflow MCP server 与账号连接（非零配置一键用），但 SKILL.md 含完整分阶段流程与 5 个具体场景示例；多数读取/构建操作无需保持 Designer 打开；子目录本身 2026-07-19 刚完成两次针对性文档修复，响应外部用户反馈及时 |
| 安全性 | 9 | 见下方安全检查清单 |
安全检查清单：
- ①shell/权限：无 shell 执行，全部操作限定通过 Webflow MCP 的
data_*/designer_tool系列工具完成，且写操作范围明确（仅指定页面/元素/组件/样式） - ②联网外发：仅对用户已连接的 Webflow 站点自身内容做读取与更新，无第三方网络外发
- ③凭据：技能本身不索取或存储凭据，依赖用户已配置好的 Webflow MCP 连接
- ④可疑指令：全文通读未发现可疑指令或混淆代码；每一次创建/修改/删除都设有显式确认门槛，删除类操作要求输入“confirm”或“delete”且会提示受影响的子元素
- ⑤作者信誉：Webflow 官方仓库，具名员工持续提交，无刷星或自我造假迹象
- ⑥License：MIT，明确
- ⑦最近维护：子目录本身有 2026-07-19 的两次针对性文档修复提交，距今约 9 天，是全仓库内近期维护痕迹较新的技能之一
综合评分（三项均值）：8.0
7. 跟同类 Skills 相比的优势
| 维度 | Webflow Page Structure | Relume（第三方 AI 建站工具） |
|---|---|---|
| 定位 | 面向已存在的 Webflow 站点，做增量的页面/元素/组件编辑 | 面向“从零开始”，一次性 AI 生成整站线框图与站点地图 |
| 工作方式 | 对话内描述需求，Agent 逐步搭建/修改，前后快照 + 显式确认 | 输入网站主题/描述后批量生成，人工在可视化编辑器里逐页调整 |
| 运行位置 | 直接在 AI 编程助手对话中运行，改动实时生效于生产站点 | 独立 SaaS 工具，生成结果需导出或复制进 Webflow 项目 |
| 破坏性操作保护 | 删除类操作强制要求输入“confirm”/“delete”确认词 | 生成结果覆盖式呈现，改动前无逐项写操作确认机制 |
| 计费 | 随 webflow-skills 插件包免费开源分发 | 独立订阅制 SaaS 产品 |
两者解决的是设计-构建流程中不同阶段的问题：Relume 擅长从一个想法快速生成整站结构的初稿，适合项目起步阶段；Page Structure 面向已经上线、需要持续维护和小幅调整的 Webflow 站点，把“加一个区块”“改一个组件文案”这类高频小改动放进开发者日常已在用的 AI 编程助手对话里完成，且每一步写操作都有前后快照与确认门槛兜底，更适合已进入维护期、需要谨慎变更生产站点的场景。
8. 用户评价
该技能目前在第三方平台尚无独立于官方描述之外的具名用户评价。唯一可查的具名外部互动是 GitHub 用户 susflow 提交的一份技术问题报告（指出工具名称过时），Webflow 团队据此完成了修复，但这属于缺陷报告而非使用体验评价。
9. 其他补充
技能本身未标注独立版本号，随所属 webflow-skills 插件包统一发版（当前 1.0.7）。同一插件包内还有 flowkit-naming、custom-code-management 等同属“发布与代码”相关分类的姊妹技能，负责命名规范应用与自定义脚本管理，与本技能的页面结构搭建职责不重叠。
10. 安装使用方式
- Claude Code 插件市场：
claude plugin marketplace add webflow/webflow-skills claude plugin install webflow-skills@webflow-skills - npx skills（跨 Agent CLI）：
npx skills add https://github.com/webflow/webflow-skills --skill designer-tools - 手工复制：克隆仓库后，将
plugins/webflow-skills/skills/designer-tools目录复制到对应 Agent 的 skills 目录（如 Claude Code 的~/.claude/skills/）
安装后需预先配置好 Webflow MCP server 并完成账号鉴权，随后用触发短语（如“帮我在首页加一个 Hero 区块”）即可调用，无需重启 Agent。
11. 注意事项
- 可视化前后快照（
element_snapshot_tool）依赖 Webflow Designer 处于连接状态，若 Designer 未打开，技能会退化为仅用文字描述结构变化，损失直观的视觉核验 - 单次构建深度最多 3 层嵌套元素，更复杂的结构需要分多次调用搭建
- 依赖 Webflow MCP 服务器连接是否稳定，若工具调用失败，规划阶段给出的变更预览可能不完整