Loading...
Loading...
Compare original and translation side by side
webflow_guide_tooldata_sites_toollist_sitesde_page_toolelement_toolstyle_toolde_learn_more_about_stylescontextwebflow_guide_tooldata_sites_toollist_sitesde_page_toolelement_toolstyle_toolde_learn_more_about_stylescontextde_page_toolde_page_toolelement_toolfk-element_toolfk-fk-[component]fk-[component]-[element]is-[state]fk-flexfk-gridfk-stackfk-space-[size]fk-py-[size]fk-px-[size]fk-text-[style]fk-[component]fk-[component]-[element]is-[state]fk-flexfk-gridfk-stackfk-space-[size]fk-py-[size]fk-px-[size]fk-text-[style]style_toolelement_toolstyle_toolelement_tool| Pattern | Purpose | Example |
|---|---|---|
| Component wrapper (base class) | |
| Child element within component | |
| Combo class modifier (state/variant) | |
| Typography utility | |
| Layout utilities | |
| Spacing utilities | |
| State modifiers (combo) | |
| 模式 | 用途 | 示例 |
|---|---|---|
| 组件容器（基础类） | |
| 组件内的子元素 | |
| 组合类修饰符（状态/变体） | |
| 排版工具类 | |
| 布局工具类 | |
| 间距工具类 | |
| 状态修饰符（组合类） | |
fk-section Section wrapper with padding
fk-container Max-width container (centered)
fk-flex Flexbox container
fk-flex-center Centered flex (both axes)
fk-flex-between Space-between flex
fk-flex-around Space-around flex
fk-flex-col Flex column direction
fk-grid Grid container (base)
fk-grid-2 2-column grid
fk-grid-3 3-column grid
fk-grid-4 4-column grid
fk-grid-6 6-column grid
fk-stack Vertical stack (gap between items)
fk-row Horizontal row
fk-wrap Flex wrap enabledfk-section 带内边距的区块容器
fk-container 最大宽度容器（居中）
fk-flex Flexbox容器
fk-flex-center 双轴居中的Flex容器
fk-flex-between 两端对齐的Flex容器
fk-flex-around 环绕对齐的Flex容器
fk-flex-col 垂直方向的Flex容器
fk-grid 基础Grid容器
fk-grid-2 2列网格
fk-grid-3 3列网格
fk-grid-4 4列网格
fk-grid-6 6列网格
fk-stack 垂直堆叠容器（元素间带间距）
fk-row 水平行容器
fk-wrap 启用Flex换行fk-text-xs Extra small text (12px)
fk-text-sm Small text (14px)
fk-text-md Medium text (16px - default)
fk-text-lg Large text (18px)
fk-text-xl Extra large text (24px)
fk-text-2xl 2x large text (32px)
fk-text-3xl 3x large text (48px)
fk-text-bold Bold weight (700)
fk-text-semibold Semibold weight (600)
fk-text-medium Medium weight (500)
fk-text-light Light weight (300)
fk-text-center Center aligned
fk-text-left Left aligned
fk-text-right Right aligned
fk-text-uppercase Uppercase transform
fk-text-lowercase Lowercase transform
fk-text-capitalize Capitalize transformfk-text-xs 超小字号（12px）
fk-text-sm 小字号（14px）
fk-text-md 中号字号（16px - 默认）
fk-text-lg 大字号（18px）
fk-text-xl 超大字号（24px）
fk-text-2xl 2倍大字号（32px）
fk-text-3xl 3倍大字号（48px）
fk-text-bold 粗体（700）
fk-text-semibold 半粗体（600）
fk-text-medium 中等粗细（500）
fk-text-light 细体（300）
fk-text-center 文本居中对齐
fk-text-left 文本左对齐
fk-text-right 文本右对齐
fk-text-uppercase 文本大写
fk-text-lowercase 文本小写
fk-text-capitalize 文本首字母大写fk-space-xs 4px spacing
fk-space-sm 8px spacing
fk-space-md 16px spacing (default)
fk-space-lg 24px spacing
fk-space-xl 32px spacing
fk-space-2xl 48px spacing
fk-space-3xl 64px spacing
Directional Spacing:
fk-py-[size] Padding vertical (top + bottom)
fk-px-[size] Padding horizontal (left + right)
fk-pt-[size] Padding top
fk-pb-[size] Padding bottom
fk-pl-[size] Padding left
fk-pr-[size] Padding right
fk-my-[size] Margin vertical (top + bottom)
fk-mx-[size] Margin horizontal (left + right)
fk-mt-[size] Margin top
fk-mb-[size] Margin bottom
fk-ml-[size] Margin left
fk-mr-[size] Margin rightfk-space-xs 4px间距
fk-space-sm 8px间距
fk-space-md 16px间距（默认）
fk-space-lg 24px间距
fk-space-xl 32px间距
fk-space-2xl 48px间距
fk-space-3xl 64px间距
方向间距：
fk-py-[size] 垂直内边距（上下）
fk-px-[size] 水平内边距（左右）
fk-pt-[size] 顶部内边距
fk-pb-[size] 底部内边距
fk-pl-[size] 左侧内边距
fk-pr-[size] 右侧内边距
fk-my-[size] 垂直外边距（上下）
fk-mx-[size] 水平外边距（左右）
fk-mt-[size] 顶部外边距
fk-mb-[size] 底部外边距
fk-ml-[size] 左侧外边距
fk-mr-[size] 右侧外边距fk-bg-primary Primary background color
fk-bg-secondary Secondary background color
fk-bg-accent Accent background color
fk-bg-light Light background
fk-bg-dark Dark background
fk-text-primary Primary text color
fk-text-secondary Secondary text color
fk-text-muted Muted text colorfk-bg-primary 主背景色
fk-bg-secondary 次背景色
fk-bg-accent 强调背景色
fk-bg-light 浅色背景
fk-bg-dark 深色背景
fk-text-primary 主文本色
fk-text-secondary 次文本色
fk-text-muted 弱化文本色fk-rounded Border radius (default)
fk-rounded-sm Small border radius
fk-rounded-lg Large border radius
fk-rounded-full Fully rounded (pill/circle)
fk-border Border (1px solid)
fk-border-top Border top only
fk-border-bottom Border bottom only
fk-shadow Box shadow (default)
fk-shadow-sm Small shadow
fk-shadow-lg Large shadowfk-rounded 边框圆角（默认）
fk-rounded-sm 小边框圆角
fk-rounded-lg 大边框圆角
fk-rounded-full 完全圆角（胶囊/圆形）
fk-border 边框（1px实线）
fk-border-top 仅顶部边框
fk-border-bottom 仅底部边框
fk-shadow 盒子阴影（默认）
fk-shadow-sm 小阴影
fk-shadow-lg 大阴影is-active Active state (navigation, tabs)
is-hidden Hidden visibility
is-visible Visible visibility
is-disabled Disabled state
is-loading Loading state
is-error Error state
is-success Success state
is-primary Primary variant
is-secondary Secondary variant
is-featured Featured/highlighted variant
is-horizontal Horizontal layout variant
is-vertical Vertical layout variantis-active 激活状态（导航、标签页）
is-hidden 隐藏状态
is-visible 显示状态（覆盖隐藏）
is-disabled 禁用状态
is-loading 加载状态
is-error 错误状态
is-success 成功状态
is-primary 主要变体
is-secondary 次要变体
is-featured 推荐/高亮变体
is-horizontal 水平布局变体
is-vertical 垂直布局变体Build a hero section with FlowKit naming🎨 FlowKit Hero Section Structure
I'll create a hero section following FlowKit v2 conventions.
Structure:
fk-section (wrapper with padding)
└── fk-container (max-width container)
└── fk-hero (component wrapper)
├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center
│ ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm
│ ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md
│ ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg
│ └── fk-hero-actions + fk-flex + fk-space-md
│ ├── fk-button.is-primary
│ └── fk-button.is-secondary
└── fk-hero-image + fk-rounded-lg
Total classes to create: 12 base classes + 2 combo classes
Ready to create these in Webflow Designer? (yes/no)🔄 Creating FlowKit Hero Classes...
Progress: ████████████████████ 100% (14/14 classes)
✅ Classes Created:
**Layout Classes:**
- ✅ fk-section - Section wrapper with padding
- ✅ fk-container - Max-width container
- ✅ fk-hero - Hero component wrapper
**Element Classes:**
- ✅ fk-hero-content - Hero content container
- ✅ fk-hero-eyebrow - Small label above title
- ✅ fk-hero-title - Main hero heading
- ✅ fk-hero-subtitle - Supporting text
- ✅ fk-hero-actions - Button container
- ✅ fk-hero-image - Hero image wrapper
**Utility Classes:**
- ✅ fk-flex, fk-flex-col, fk-flex-center
- ✅ fk-text-sm, fk-text-lg, fk-text-3xl
- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted
- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg
- ✅ fk-space-md, fk-rounded-lg
**Component Classes:**
- ✅ fk-button (with combo classes: is-primary, is-secondary)
---
📋 Usage Guide:
1. Create a Section element → Apply `fk-section`
2. Add Container inside → Apply `fk-container`
3. Add Div inside → Apply `fk-hero`
4. Build content structure following the hierarchy above
5. Use combo classes for button variants: `fk-button.is-primary`
🎉 Your FlowKit hero section structure is ready!使用FlowKit命名创建Hero区块🎨 FlowKit Hero区块结构
我将遵循FlowKit v2规范创建Hero区块。
结构：
fk-section（带内边距的区块容器）
└── fk-container（最大宽度容器）
└── fk-hero（组件容器）
├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center
│ ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm
│ ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md
│ ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg
│ └── fk-hero-actions + fk-flex + fk-space-md
│ ├── fk-button.is-primary
│ └── fk-button.is-secondary
└── fk-hero-image + fk-rounded-lg
需创建的类总数：12个基础类 + 2个组合类
是否要在Webflow Designer中创建这些类？（是/否）🔄 正在创建FlowKit Hero类...
进度：████████████████████ 100% (14/14个类)
✅ 已创建的类：
**布局类：**
- ✅ fk-section - 带内边距的区块容器
- ✅ fk-container - 最大宽度容器
- ✅ fk-hero - Hero组件容器
**元素类：**
- ✅ fk-hero-content - Hero内容容器
- ✅ fk-hero-eyebrow - 标题上方的小标签
- ✅ fk-hero-title - Hero主标题
- ✅ fk-hero-subtitle - 辅助文本
- ✅ fk-hero-actions - 按钮容器
- ✅ fk-hero-image - Hero图片容器
**工具类：**
- ✅ fk-flex, fk-flex-col, fk-flex-center
- ✅ fk-text-sm, fk-text-lg, fk-text-3xl
- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted
- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg
- ✅ fk-space-md, fk-rounded-lg
**组件类：**
- ✅ fk-button（带组合类：is-primary, is-secondary）
---
📋 使用指南：
1. 创建Section元素 → 应用`fk-section`
2. 在内部添加Container → 应用`fk-container`
3. 在内部添加Div → 应用`fk-hero`
4. 按照上述层级构建内容结构
5. 为按钮变体使用组合类：`fk-button.is-primary`
🎉 你的FlowKit Hero区块结构已准备就绪！Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle📋 FlowKit Audit Report
Checking 4 classes against FlowKit v2 conventions...
---检查这些类：feature-card, FK-Button, fk_hero_title, cardTitle📋 FlowKit 审核报告
正在对照FlowKit v2规范检查4个类...
---feature-cardfeature-cardfk-fk-feature-cardfk-card.is-featurefk-fk-fk-feature-cardfk-card.is-featurefk-FK-ButtonFK-Buttonfk-buttonfk-buttonfk-buttonfk-buttonfk_hero_titlefk_hero_titlefk-hero-titlefk-hero-titlecardTitlecardTitlefk-fk-fk-card-titlefk-fk-fk-card-titlefk-cardfk-card-titlefk-button.is-primaryfk-text-xlcardFK-Cardfk_cardcardTitleundefinedfk-cardfk-card-titlefk-button.is-primaryfk-text-xlcardFK-Cardfk_cardcardTitleundefinedCreate a product card component with FlowKit classes🎨 FlowKit Product Card Component
Structure:
fk-card (base component)
├── fk-card-image-wrapper
│ └── fk-card-image + fk-rounded-lg
├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent
├── fk-card-content + fk-space-md
│ ├── fk-card-category + fk-text-sm + fk-text-muted
│ ├── fk-card-title + fk-text-lg + fk-text-bold
│ ├── fk-card-description + fk-text-md
│ └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary
└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top
├── fk-card-rating + fk-flex + fk-space-xs
└── fk-button.is-primary + fk-text-sm
---使用FlowKit类创建产品卡片组件🎨 FlowKit 产品卡片组件
结构：
fk-card（基础组件）
├── fk-card-image-wrapper
│ └── fk-card-image + fk-rounded-lg
├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent
├── fk-card-content + fk-space-md
│ ├── fk-card-category + fk-text-sm + fk-text-muted
│ ├── fk-card-title + fk-text-lg + fk-text-bold
│ ├── fk-card-description + fk-text-md
│ └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary
└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top
├── fk-card-rating + fk-flex + fk-space-xs
└── fk-button.is-primary + fk-text-sm
---fk-card.is-featuredfk-card.is-featuredfk-card.is-horizontalfk-card.is-horizontalfk-card.is-compactfk-card.is-compactfk-grid-3fk-grid-3.tablet-2fk-grid-3.tablet-2.mobile-1undefinedfk-grid-3fk-grid-3.tablet-2fk-grid-3.tablet-2.mobile-1undefinedRefactor my navigation to use FlowKit naming🔍 Analyzing Current Navigation Classes...
Found 8 elements with non-FlowKit classes:
├── navbar → fk-nav
├── navbar-container → fk-nav-container
├── logo-wrapper → fk-nav-logo
├── menu → fk-nav-menu
├── menu-item → fk-nav-link
├── menu-item active → fk-nav-link.is-active
├── button-group → fk-nav-actions
└── btn-primary → fk-button.is-primary
---将我的导航重构为使用FlowKit命名🔍 正在分析当前导航类...
找到8个使用非FlowKit类的元素：
├── navbar → fk-nav
├── navbar-container → fk-nav-container
├── logo-wrapper → fk-nav-logo
├── menu → fk-nav-menu
├── menu-item → fk-nav-link
├── menu-item active → fk-nav-link.is-active
├── button-group → fk-nav-actions
└── btn-primary → fk-button.is-primary
---fk-nav-*fk-flexfk-flex-betweenfk-flex-centerfk-buttonis-primary
**Step 2: After Migration**fk-nav-*fk-flexfk-flex-betweenfk-flex-centeris-primaryfk-button
**步骤2：迁移完成后**| Old Class | New FlowKit Class |
|---|---|
| navbar | fk-nav ✅ |
| navbar-container | fk-nav-container ✅ |
| logo-wrapper | fk-nav-logo ✅ |
| menu | fk-nav-menu ✅ |
| menu-item | fk-nav-link ✅ |
| menu-item active | fk-nav-link.is-active ✅ |
| button-group | fk-nav-actions ✅ |
| btn-primary | fk-button.is-primary ✅ |
fk-nav.is-transparentfk-nav.is-stickyundefined| 旧类 | 新FlowKit类 |
|---|---|
| navbar | fk-nav ✅ |
| navbar-container | fk-nav-container ✅ |
| logo-wrapper | fk-nav-logo ✅ |
| menu | fk-nav-menu ✅ |
| menu-item | fk-nav-link ✅ |
| menu-item active | fk-nav-link.is-active ✅ |
| button-group | fk-nav-actions ✅ |
| btn-primary | fk-button.is-primary ✅ |
fk-nav.is-transparentfk-nav.is-stickyundefinedfk-is--_Component: fk-[component]
Element: fk-[component]-[element]
Sub-element: fk-[component]-[element]-[detail]
Utility: fk-[property]-[value]
State modifier: is-[state] (combo class only)
Responsive: .[breakpoint]-[value] (combo class)fk-is--_组件: fk-[component]
元素: fk-[component]-[element]
子元素: fk-[component]-[element]-[detail]
工具类: fk-[property]-[value]
状态修饰符: is-[state]（仅作为组合类）
响应式: .[breakpoint]-[value]（组合类）cardnavherofooterfk-cardfk-product-feature-cardfk-card.is-featuredfk-card-featuredfk-cardfk-card-[element]fk-card-titlefk-card-content-section-text-wrapperfk-card-contentfk-card-textfk-card
├── fk-card-image
├── fk-card-content
│ ├── fk-card-title
│ └── fk-card-text
└── fk-card-footerfk-nav
├── fk-nav-logo
├── fk-nav-menu
│ └── fk-nav-link
└── fk-nav-actionsfk-hero
├── fk-hero-content
│ ├── fk-hero-title
│ ├── fk-hero-subtitle
│ └── fk-hero-actions
└── fk-hero-mediafk-form
├── fk-form-group
│ ├── fk-form-label
│ └── fk-form-input
└── fk-form-actionscardnavherofooterfk-cardfk-product-feature-cardfk-card.is-featuredfk-card-featuredfk-cardfk-card-[element]fk-card-titlefk-card-content-section-text-wrapperfk-card-contentfk-card-textfk-card
├── fk-card-image
├── fk-card-content
│ ├── fk-card-title
│ └── fk-card-text
└── fk-card-footerfk-nav
├── fk-nav-logo
├── fk-nav-menu
│ └── fk-nav-link
└── fk-nav-actionsfk-hero
├── fk-hero-content
│ ├── fk-hero-title
│ ├── fk-hero-subtitle
│ └── fk-hero-actions
└── fk-hero-mediafk-form
├── fk-form-group
│ ├── fk-form-label
│ └── fk-form-input
└── fk-form-actionsfk-[property]-[value]fk-text-lgfk-space-mdfk-grid-3xssmmdlgxl2xl3xlpypxptprpbplmymxmtmrmbmlfk-text-[xs|sm|md|lg|xl|2xl|3xl]fk-text-[light|medium|semibold|bold]fk-text-[left|center|right]fk-text-[uppercase|lowercase|capitalize]fk-flexfk-flex-colfk-flex-centerfk-flex-betweenfk-gridfk-grid-2fk-grid-3fk-grid-4fk-grid-6fk-containerfk-sectionfk-[property]-[value]fk-text-lgfk-space-mdfk-grid-3xssmmdlgxl2xl3xlpypxptprpbplmymxmtmrmbmlfk-text-[xs|sm|md|lg|xl|2xl|3xl]fk-text-[light|medium|semibold|bold]fk-text-[left|center|right]fk-text-[uppercase|lowercase|capitalize]fk-flexfk-flex-colfk-flex-centerfk-flex-betweenfk-gridfk-grid-2fk-grid-3fk-grid-4fk-grid-6fk-containerfk-sectionis-<div class="fk-button is-primary">...</div>is-active Currently active/selected
is-disabled Disabled interaction
is-hidden Hidden visibility
is-visible Visible (override hidden)
is-loading Loading state
is-error Error state
is-success Success state
is-primary Primary variant
is-secondary Secondary variant
is-tertiary Tertiary variant
is-featured Featured/highlighted
is-horizontal Horizontal layout
is-vertical Vertical layout
is-expanded Expanded state (accordions, dropdowns)
is-collapsed Collapsed statefk-buttonis-primaryfk-button is-primary.fk-button.is-primary { ... }is-<div class="fk-button is-primary">...</div>is-active 当前激活/选中状态
is-disabled 禁用交互状态
is-hidden 隐藏状态
is-visible 显示状态（覆盖隐藏）
is-loading 加载状态
is-error 错误状态
is-success 成功状态
is-primary 主要变体
is-secondary 次要变体
is-tertiary 第三变体
is-featured 推荐/高亮状态
is-horizontal 水平布局变体
is-vertical 垂直布局变体
is-expanded 展开状态（手风琴、下拉菜单）
is-collapsed 折叠状态fk-buttonis-primaryfk-button is-primary.fk-button.is-primary { ... }.[breakpoint]-[value]fk-grid-4.tablet-2.mobile-1Desktop (default): No modifier needed
Tablet: .tablet-[value]
Mobile: .mobile-[value]Base: fk-grid-4 (4 columns on desktop)
+ Combo: .tablet-2 (2 columns on tablet)
+ Combo: .mobile-1 (1 column on mobile)
Result: <div class="fk-grid-4 tablet-2 mobile-1">Base: fk-text-3xl (48px on desktop)
+ Combo: .tablet-2xl (32px on tablet)
+ Combo: .mobile-xl (24px on mobile)
Result: <div class="fk-text-3xl tablet-2xl mobile-xl">.[breakpoint]-[value]fk-grid-4.tablet-2.mobile-1桌面端（默认）: 无需修饰符
平板端: .tablet-[value]
移动端: .mobile-[value]基础类: fk-grid-4（桌面端4列）
+ 组合类: .tablet-2（平板端2列）
+ 组合类: .mobile-1（移动端1列）
结果: <div class="fk-grid-4 tablet-2 mobile-1">基础类: fk-text-3xl（桌面端48px）
+ 组合类: .tablet-2xl（平板端32px）
+ 组合类: .mobile-xl（移动端24px）
结果: <div class="fk-text-3xl tablet-2xl mobile-xl">fk-fk-flex fk-flex-center fk-space-mdfk-fk-cardfk-navfk-herofk-text-lgfk-space-mdfk-flex-center<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
Content
</div><div class="fk-card fk-shadow-lg fk-rounded-lg">
<div class="fk-card-content fk-space-lg">
<h3 class="fk-card-title fk-text-xl fk-text-bold">Title</h3>
</div>
</div>fk-fk-flex fk-flex-center fk-space-mdfk-fk-cardfk-navfk-herofk-text-lgfk-space-mdfk-flex-center<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
内容
</div><div class="fk-card fk-shadow-lg fk-rounded-lg">
<div class="fk-card-content fk-space-lg">
<h3 class="fk-card-title fk-text-xl fk-text-bold">标题</h3>
</div>
</div>❌ card, button, nav
✅ fk-card, fk-button, fk-nav❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav❌ fk_card_title, fk.card.title
✅ fk-card-title❌ fkCardTitle, FkCardTitle
✅ fk-card-title❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title❌ fk-product-feature-card-with-image-and-price
✅ fk-card (use combo: is-product)❌ fk-grid-3-tablet-2 (single class)
✅ fk-grid-3 tablet-2 (two classes)❌ card, button, nav
✅ fk-card, fk-button, fk-nav❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav❌ fk_card_title, fk.card.title
✅ fk-card-title❌ fkCardTitle, FkCardTitle
✅ fk-card-title❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title❌ fk-product-feature-card-with-image-and-price
✅ fk-card（使用组合类: is-product）❌ fk-grid-3-tablet-2（单个类）
✅ fk-grid-3 tablet-2（两个类）fk-is-.tablet-.mobile-fk-is-fk-is-.tablet-.mobile-fk-is-style_toolstyle_tool❌ Error: Cannot create classes - Designer not connected
Solution:
1. Open Webflow Designer
2. Open the target site
3. Connect to Designer in Claude Code
4. Retry operation⚠️ Warning: Class 'fk-button' already exists
Options:
1. Skip creation (use existing)
2. Update existing class
3. Create with different name❌ Error: Class name 'fk-My Button' is invalid
Issues:
- Contains spaces
- Contains uppercase
Suggested: 'fk-my-button'⚠️ Warning: Property 'custom-property' not supported
This may be:
- Custom CSS property
- Webflow doesn't support via Designer API
- Typo in property name
Recommendation: Apply manually in Designer❌ 错误：无法创建类 - Designer未连接
解决方案：
1. 打开Webflow Designer
2. 打开目标站点
3. 在Claude Code中连接到Designer
4. 重试操作⚠️ 警告：类'fk-button'已存在
选项：
1. 跳过创建（使用现有类）
2. 更新现有类
3. 使用不同名称创建❌ 错误：类名'fk-My Button'无效
问题：
- 包含空格
- 包含大写字母
建议：'fk-my-button'⚠️ 警告：属性'custom-property'不支持
可能原因：
- 自定义CSS属性
- Webflow Designer API不支持
- 属性名称拼写错误
建议：在Designer中手动应用<div class="fk-slider"><div class="swiper">...</div></div>fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadowfk-panel<div class="fk-slider"><div class="swiper">...</div></div>fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadowfk-panelfk-is-fk-is-