AI导哈

Webflow开发技能

一个用于通过Webflow MCP Bridge和浏览器自动化在Webflow Designer中构建和样式化网站的Claude Code技能。

  • by monmush
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 monmush/webflow-development

使用说明

Claude代码的Webflow开发技巧

A. 克劳德代码 使用Webflow MCP桥和浏览器自动化在Webflow Designer中构建和设计网站的技能。

它做什么

此技能教Claude如何以编程方式使用Webflow的可视化设计器——构建元素、应用样式、管理组件、处理响应断点和发布网站。它涵盖了三个主要工作流程：

  • 本地→ Webflow传输 --在Webflow中以像素完美的精度复制本地web项目（React、Next.js、HTML/CSS、Vue等）
  • 从头开始构建 --通过适当的设计令牌管理，从Figma设计或从头开始创建Webflow网站
  • 修复并迭代 --调试样式问题、修复响应式布局、更新内容和管理组件

包括关键知识

  • Webflow MCP工具参考(element_tool, style_tool, element_builder等等）
  • 桌面优先断点系统，移动优先→ 桌面优先CSS映射
  • SVG、自定义CSS和复杂布局的代码嵌入模式
  • JSX SVG→ HTML SVG属性转换
  • Webflow代码编辑器的CodeMirror内容注入
  • 8+记录在案的变通方法（例如。， pseudo: "noPseudo" 要求）
  • 用于一致响应布局的分段容器模式
  • 组件创建和实例管理

先决条件

安装

克劳德代码（推荐）

# Install to user scope (available across all projects)
claude skill add --user monmush/webflow-development

手动安装

# Clone and copy to user skills directory
git clone https://github.com/monmush/webflow-development.git
cp -r webflow-development ~/.claude/skills/webflow-development

技能结构

webflow-development/
├── SKILL.md                                # Core workflow, tool reference, gotchas
└── references/
    ├── breakpoints-and-styles.md           # Breakpoint mapping, typography, style patterns
    ├── local-to-webflow.md                 # Step-by-step local project transfer guide
    ├── code-embeds-and-svgs.md             # SVG conversion, CodeMirror injection, custom CSS
    └── gotchas.md                          # Complete issue catalog with workarounds

示例用法

安装后，当你问以下问题时，Claude会自动使用此技能：

  • “在Webflow中构建英雄部分，以匹配我的本地React组件”
  • “修复Webflow中about页面上的响应式布局”
  • “在Webflow中创建可重复使用的卡组件”
  • “将我的Next.js登录页面转移到Webflow”
  • “在Webflow的功能部分添加SVG插图”

基于真实经验构建

这项技能是从几十个小时的真实Webflow开发会话中提炼出来的——通过MCP将一个完整的多页面网站从本地React+CSS模块代码库转移到Webflow。每个陷阱、模式和工作流程都是通过实际实施发现和验证的。

许可证

麻省理工学院

相关 MCP