1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | Webflow FlowKit Naming（flowkit-naming-webflow-webflow-skills） | — |
| 作者/维护者 | Webflow, Inc.（官方 GitHub 组织），子目录提交历史含具名员工 Adam Lehman、viratatwebflow | GitHub API |
| 来源链接 | github.com/webflow/webflow-skills/tree/main/plugins/webflow-skills/skills/flowkit-naming | — |
| 许可证 | MIT | GitHub API |
| GitHub Stars / Forks | 合集仓库整体 106 / 16（该数字属整个 webflow-skills 插件包，不代表本子技能自身热度） | GitHub API（认证取数） |
| 最新版本 | 插件清单 plugin.json 标注 “1.0.7”；SKILL.md 声明对接 Webflow MCP 2.0.1 工具集 | 仓库文件核实 |
| 安装方式 | Claude Code 插件市场一键安装，或 npx skills 跨 Agent CLI，或手工复制技能目录 |
官方 README |
2. 功能介绍与亮点
FlowKit Naming 是 Webflow 官方 webflow-skills 插件包中专门负责“命名规范”的技能：在 Webflow Designer 项目里应用或审计 FlowKit——Webflow 官方 CSS 工具类框架——的类名约定。
核心能力覆盖四种场景：
- 新建：为新组件生成符合 FlowKit 规范的类名结构（如
fk-card、fk-card-title、组合修饰类fk-button.is-primary） - 审计：检查现有类名是否符合规范，逐条标出问题（缺前缀、大小写错误、分隔符用错、驼峰命名等）并给出修正建议
- 搭建整页区块：按组件-元素层级批量生成一整套结构化类名（如 Hero 区块、卡片组件、导航栏）
- 重构迁移：把非 FlowKit 命名的既有页面分阶段迁移到 FlowKit 规范，并保留旧类名做过渡期兼容
大部分操作对指定页面 ID 无头（headless）运行，无需保持 Webflow Designer 打开——这一点与同插件包内负责页面结构搭建的姊妹技能不同，后者的可视化前后快照依赖 Designer 保持连接。SKILL.md 附带完整的命名参考表（布局/排版/间距/颜色/边框工具类）与 4 个逐步演示的完整场景示例，并列出一份上线前检查清单（结构层级、工具类、响应式、状态修饰符、文档、校验、性能）。批量应用时以 10–15 个元素为一组处理并显示进度，任何实际写入前都会展示预览并等待用户确认。
3. 适用场景
所属分类：前端与设计
适合已经采用（或计划采用）Webflow 官方 FlowKit CSS 框架的团队与开发者——例如需要给新页面区块套用统一命名规范、审计遗留页面里混乱的类名、或把旧项目分阶段迁移到 FlowKit 约定。对尚未使用 FlowKit 框架的 Webflow 项目，本技能提供的命名体系针对性较强，适用面相应变窄。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | 原生支持 | README 提供官方插件市场安装命令与专属 skills 目录 ~/.claude/skills/ |
| Codex | 原生支持 | README 官方支持表格列出 OpenAI Codex，skills 目录路径 ~/.codex/skills/ |
| OpenClaw | 未验证 | README 未提及，无法判断 |
| Hermes Agent | 未验证 | README 未提及，无法判断 |
5. 推荐理由
命名规范混乱是团队协作维护 Webflow 站点时的常见痛点——不同人加的类名风格不一致，样式复用越来越难。这个技能把 Webflow 官方 FlowKit 命名体系的应用、审计、批量搭建与渐进式迁移都放进对话里完成：核心工作流无需保持 Designer 打开，任何真正的写入前都会先展示完整的类名结构预览并等待确认，是目前 webflow-skills 插件包中少数专注解决“命名一致性”这一具体问题的技能。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 官方 Webflow 出品，被官方 Skills 总览文档页收录并列在“Publishing & Code”分类下；但子目录自身未检索到独立的 GitHub issue 讨论，第三方技能目录站点（lobehub.com、mcpmarket.com）访问受限，未获得可验证的安装量或评价数字 |
| 可用性 | 8 | 核心工作流对指定页面无头运行，不强制保持 Designer 连接；SKILL.md 含完整命名参考表、4 个逐步示例与上线检查清单，文档深度充分；子目录本身 2026-07-19 有两次针对性维护提交（修复过时工具名引用、迁移到 MCP 2.0.1），响应及时 |
| 安全性 | 9 | 见下方安全检查清单 |
安全检查清单：
- ①shell/权限：无 shell 执行，全部操作限定通过 Webflow MCP 的
data_pages_tool/data_element_tool/data_style_tool/designer_tool完成，写操作范围明确（仅创建/更新指定页面的 CSS 类与元素） - ②联网外发：仅对用户已连接的 Webflow 站点自身内容做读取与更新，无第三方网络外发
- ③凭据：技能本身不索取或存储凭据，依赖用户已配置好的 Webflow MCP 连接
- ④可疑指令：全文通读未发现可疑指令或混淆代码；批量创建/应用类名前均展示完整预览并等待用户明确回应（yes/no）
- ⑤作者信誉：Webflow 官方仓库，具名员工持续提交，无刷星或自我造假迹象
- ⑥License：MIT，明确
- ⑦最近维护：子目录本身有 2026-07-19 的两次针对性维护提交，距今约 9 天
综合评分（三项均值）：8.0
7. 跟同类 Skills 相比的优势
| 维度 | Webflow FlowKit Naming | Stylelint（通用 CSS 规范检查工具） |
|---|---|---|
| 定位 | 专门应用/审计 Webflow 官方 FlowKit 命名体系 | 通用 CSS/SCSS 代码规范检查器，需自行编写命名规则 |
| 运行方式 | 对话内描述需求，直接对 Webflow Designer 项目的实时类名生效 | 静态分析源码文件，需接入构建流程或 CI |
| 是否理解 Designer 实时状态 | 是，可直接读取页面当前元素与类名并批量应用修正 | 否，只检查代码文本，不感知可视化编辑器里的实际结构 |
| 配置成本 | 随插件包开箱即用，规则内置 | 需手写自定义命名规则配置文件才能匹配 FlowKit 约定 |
| 适用对象 | Webflow 可视化编辑器用户 | 传统代码仓库开发者 |
两者面向不同的工作方式：Stylelint 是成熟的通用 CSS 规范检查生态，但它只能对着代码文本做静态分析，无法理解 Webflow Designer 里“这个元素现在应用的是哪些类”这类实时可视化状态，也不自带 FlowKit 专属规则，需要开发者自行编写配置。FlowKit Naming 直接对接 Webflow 的实时项目数据，规则内置、开箱即用，更适合本身就在可视化编辑器里搭建页面、而非维护独立前端代码仓库的 Webflow 用户。
8. 用户评价
该技能目前在第三方平台尚无可查证的具名用户评价；技能页面可见于 lobehub.com、mcpmarket.com 等第三方技能目录站点的收录列表中，但页面内容因访问限制未能取得。
9. 其他补充
技能本身未标注独立版本号，随所属 webflow-skills 插件包统一发版（当前 1.0.7）。同一插件包内还有 custom-code-management、safe-publish 等同属“发布与代码”相关分类的姊妹技能，分别负责自定义脚本管理与发布流程确认，与本技能的命名规范应用/审计职责不重叠。
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 flowkit-naming - 手工复制：克隆仓库后，将
plugins/webflow-skills/skills/flowkit-naming目录复制到对应 Agent 的 skills 目录（如 Claude Code 的~/.claude/skills/）
安装后需预先配置好 Webflow MCP server 并完成账号鉴权，随后用触发短语（如“审计一下这个页面的类名是否符合 FlowKit 规范”）即可调用，无需重启 Agent。
11. 注意事项
- 命名体系本身针对性较强，仅适用于已采用或计划采用 Webflow 官方 FlowKit CSS 框架的项目；未使用 FlowKit 的站点收益有限
- 批量创建/应用类名以 10–15 个元素为一组处理，非常大规模的迁移需要分多次调用完成
- 仅“读取/切换当前打开的画布页面”这类交互式便利功能依赖 Designer 保持连接，核心的类名审计与应用工作流不受此限制