flowkit-naming

Flowkit 命名系统

在 Webflow 项目中使用 Webflow Designer 工具应用 FlowKit CSS 命名约定。

重要说明

所有操作都必须使用 Webflow MCP 工具：

• 开始前，使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
• 使用 Webflow MCP 的 data_sites_tool，并将 action 设为 list_sites，以确定目标站点
• 使用 Webflow MCP 的 de_page_tool 获取当前页面并切换页面
• 使用 Webflow MCP 的 element_tool 选择元素并检查当前类名
• 使用 Webflow MCP 的 style_tool 创建和更新符合 FlowKit 规范的样式
• 使用 Webflow MCP 的 de_learn_more_about_styles 了解支持的样式属性
• 不要使用任何其他工具或方法执行 Webflow 操作
• 所有工具调用都必须包含必需的 context 参数（15-25 个词，以第三人称视角表述）
• 需要连接 Designer：用户必须连接到 Webflow Designer，此技能才能正常工作

说明

阶段 1：发现与设置

1. 确定任务：判断用户是在：
   • 创建新的组件类
   • 审查现有类名
   • 构建完整的页面区块
   • 将非 FlowKit 类重构为 FlowKit 类
2. 连接到 Designer：确认用户已打开 Webflow Designer 并完成连接
3. 获取当前页面：使用 Webflow MCP 的 de_page_tool 确定当前工作页面
4. 询问范围：明确要处理的元素或区块

阶段 2：分析（审查现有类时）

5. 获取所有元素：使用 Webflow MCP 的 element_tool 获取当前页面的元素
6. 提取类名：识别当前应用的所有类名
7. 问题分类：
   • 缺少 fk- 前缀
   • 大小写不正确（大写或大小写混用）
   • 分隔符错误（使用下划线而非连字符）
   • 命名不具语义
   • 组件结构不一致
8. 生成审查报告：展示当前名称与建议的符合 FlowKit 规范的名称

阶段 3：生成建议

9. 应用 FlowKit 模式：按照 FlowKit v2 约定生成类名
10. 按类型构建：
    • 组件包装器：fk-[component]
    • 子元素：fk-[component]-[element]
    • 状态修饰符：使用 is-[state] 组合类
    • 布局工具类：fk-flex、fk-grid、fk-stack
    • 间距工具类：fk-space-[size]、fk-py-[size]、fk-px-[size]
    • 排版工具类：fk-text-[style]
11. 验证建议：确保所有建议都符合 FlowKit 约定
12. 显示预览：以层级结构展示建议使用的类

阶段 4：应用（用户确认后）

13. 创建样式：使用 Webflow MCP 的 style_tool 创建符合 FlowKit 规范的新类样式
14. 更新元素：使用 Webflow MCP 的 element_tool 将类应用到元素
15. 分批处理：如果元素较多，每批处理 10-15 个
16. 显示进度：展示正在更新的元素

阶段 5：验证与报告

17. 验证应用结果：检查类是否已正确应用
18. 生成报告：展示已创建或更新的内容
19. 提供文档：说明所使用的 FlowKit 结构
20. 建议后续步骤：推荐可实施的其他 FlowKit 模式

FlowKit 命名参考

核心命名模式

模式	用途	示例
fk-[component]	组件包装器（基础类）	fk-card、fk-nav、fk-hero
fk-[component]-[element]	组件中的子元素	fk-card-title、fk-nav-link
fk-[component].[modifier]	组合类修饰符（状态/变体）	fk-card.is-featured
fk-text-[style]	排版工具类	fk-text-xl、fk-text-bold
fk-flex / fk-grid	布局工具类	fk-flex-center、fk-grid-3
fk-space-[size]	间距工具类	fk-space-md、fk-py-lg
is-[state]	状态修饰符（组合类）	is-active、is-hidden、is-disabled

布局工具类

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 enabled

排版工具类

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 transform

间距工具类

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 right

颜色工具类

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 color

边框和视觉工具类

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 shadow

状态修饰符（组合类）

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 variant

示例

示例 1：创建 Hero 区块

用户提示词：

Build a hero section with FlowKit naming

步骤 1：分析

🎨 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)

步骤 2：用户确认后

🔄 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!

示例 2：审查现有类

用户提示词：

Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle

回复：

📋 FlowKit Audit Report

Checking 4 classes against FlowKit v2 conventions...

---

## Issues Found: 4

### 1. `feature-card` ⚠️
**Issue:** Missing FlowKit prefix
**Reason:** All FlowKit classes must start with `fk-`
**Suggested:** `fk-feature-card` or `fk-card.is-feature`
**Fix:** Rename class to include `fk-` prefix

### 2. `FK-Button` ❌
**Issue:** Incorrect case (uppercase)
**Reason:** FlowKit uses lowercase only
**Suggested:** `fk-button`
**Fix:** Convert to lowercase: `fk-button`

### 3. `fk_hero_title` ❌
**Issue:** Wrong separator (underscore)
**Reason:** FlowKit uses hyphens, not underscores
**Suggested:** `fk-hero-title`
**Fix:** Replace underscores with hyphens

### 4. `cardTitle` ❌
**Issue:** Multiple violations
  - Missing `fk-` prefix
  - CamelCase instead of kebab-case
**Reason:** FlowKit requires `fk-` prefix and hyphen separation
**Suggested:** `fk-card-title`
**Fix:** Add prefix and convert to kebab-case

---

## FlowKit Naming Rules:

✅ **Correct patterns:**
- `fk-card` (component)
- `fk-card-title` (element)
- `fk-button.is-primary` (with modifier)
- `fk-text-xl` (utility)

❌ **Incorrect patterns:**
- `card` (no prefix)
- `FK-Card` (wrong case)
- `fk_card` (wrong separator)
- `cardTitle` (camelCase)

Would you like me to rename these classes in Webflow Designer? (yes/no)

示例 3：构建卡片组件

用户提示词：

Create 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

---

## Variants (Combo Classes):

### Featured Card
`fk-card.is-featured`
- Highlighted border/shadow
- Accent background
- Use for promoted products

### Horizontal Layout
`fk-card.is-horizontal`
- Side-by-side image/content
- Better for list views
- Image on left, content on right

### Compact Size
`fk-card.is-compact`
- Reduced padding
- Smaller text sizes
- Use in tight layouts

---

## Responsive Modifiers:

Desktop (default):
- `fk-grid-3` (3 cards per row)

Tablet:
- Add combo: `fk-grid-3.tablet-2`

Mobile:
- Add combo: `fk-grid-3.tablet-2.mobile-1`

---

Ready to create these classes? (yes/no)

示例 4：重构为 FlowKit

用户提示词：

Refactor my navigation to use FlowKit naming

步骤 1：当前分析

🔍 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

---

## Migration Plan:

**Phase 1: Create FlowKit Classes** (8 classes)
- Create all `fk-nav-*` classes
- Create utility classes: `fk-flex`, `fk-flex-between`, `fk-flex-center`
- Create `fk-button` with `is-primary` modifier

**Phase 2: Update Elements** (8 elements)
- Replace old classes with new FlowKit classes
- Apply combo classes where needed
- Preserve existing styles

**Phase 3: Cleanup** (optional)
- Old classes can be removed after verification
- Keep for now to maintain backwards compatibility

---

Proceed with migration? (yes/no)

步骤 2：迁移后

✅ Navigation Refactored to FlowKit

**Classes Created:** 8
**Elements Updated:** 8
**Time elapsed:** ~3 seconds

---

## Updated Structure:

fk-nav
├── fk-nav-container + fk-flex + fk-flex-between
│   ├── fk-nav-logo
│   ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md
│   │   ├── fk-nav-link (x5)
│   │   └── fk-nav-link.is-active (current page)
│   └── fk-nav-actions + fk-flex + fk-space-sm
│       ├── fk-button.is-secondary
│       └── fk-button.is-primary

---

## Before → After:

| 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 ✅ |

---

🎉 Navigation is now FlowKit compliant!

**Next steps:**
- Test navigation on all breakpoints
- Verify active states work correctly
- Consider adding `fk-nav.is-transparent` for transparent header variant
- Consider adding `fk-nav.is-sticky` for sticky navigation

指南

阶段 1：关键要求

FlowKit 前缀规则：

• 所有组件类和元素类都必须以 fk- 开头
• 例外：状态修饰符使用 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)

阶段 2：组件命名规则

组件名称：

• 简洁且具有语义
• 使用常见的 Web 组件术语：card、nav、hero、footer
• 避免过于具体的名称：优先使用 fk-card，而不是 fk-product-feature-card
• 使用修饰符表示变体：使用 fk-card.is-featured，而不是 fk-card-featured

元素层级：

• 父组件：fk-card
• 直接子元素：fk-card-[element]（例如，fk-card-title）
• 深层嵌套：避免超过 3 层
• 不推荐：fk-card-content-section-text-wrapper
• 推荐：fk-card-content、fk-card-text

常见组件模式：

卡片：

fk-card
├── fk-card-image
├── fk-card-content
│   ├── fk-card-title
│   └── fk-card-text
└── fk-card-footer

导航：

fk-nav
├── fk-nav-logo
├── fk-nav-menu
│   └── fk-nav-link
└── fk-nav-actions

Hero：

fk-hero
├── fk-hero-content
│   ├── fk-hero-title
│   ├── fk-hero-subtitle
│   └── fk-hero-actions
└── fk-hero-media

表单：

fk-form
├── fk-form-group
│   ├── fk-form-label
│   └── fk-form-input
└── fk-form-actions

阶段 3：工具类

工具类命名：

• 格式：fk-[property]-[value]
• 示例：fk-text-lg、fk-space-md、fk-grid-3

间距工具类：

• 使用 T 恤尺码命名：xs、sm、md、lg、xl、2xl、3xl
• 方向：py（垂直）、px（水平）、pt（顶部）、pr（右侧）、pb（底部）、pl（左侧）
• 外边距也使用相同的方向缩写：my、mx、mt、mr、mb、ml

排版工具类：

• 尺寸：fk-text-[xs|sm|md|lg|xl|2xl|3xl]
• 字重：fk-text-[light|medium|semibold|bold]
• 对齐：fk-text-[left|center|right]
• 转换：fk-text-[uppercase|lowercase|capitalize]

布局工具类：

• Flexbox：fk-flex、fk-flex-col、fk-flex-center、fk-flex-between
• Grid：fk-grid、fk-grid-2、fk-grid-3、fk-grid-4、fk-grid-6
• 容器：fk-container、fk-section

阶段 4：状态修饰符（组合类）

状态修饰符规则：

• 始终使用带 is- 前缀的组合类
• 与基础类一起应用
• 示例：<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 state

在 Webflow 中应用组合类：

1. 选择元素
2. 添加基础类：fk-button
3. 添加组合类：is-primary
4. 元素包含两个类：fk-button is-primary
5. 设置组合类样式：.fk-button.is-primary { ... }

阶段 5：响应式设计

响应式修饰符：

• FlowKit 使用组合类实现响应式行为
• 格式：.[breakpoint]-[value]
• 示例：fk-grid-4.tablet-2.mobile-1

断点：

Desktop (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">

Phase 6：最佳实践

始终：

• ✅ 所有组件和元素都使用 fk- 前缀
• ✅ 使用连字符分隔单词
• ✅ 只使用小写字母
• ✅ 组件名称应具有语义且简洁
• ✅ 使用组合类表示修饰符和状态
• ✅ 自由组合工具类（fk-flex fk-flex-center fk-space-md）
• ✅ 遵循组件与元素的层级结构
• ✅ 使用响应式组合类设置断点

绝不：

• ❌ 组件不使用 fk- 前缀
• ❌ 使用下划线或空格
• ❌ 使用大写字母或 camelCase
• ❌ 创建过于具体的类名
• ❌ 元素嵌套超过 3 层
• ❌ 混用 FlowKit 和其他命名系统
• ❌ 创建独立的修饰符类（使用组合类）

组件类与工具类：

在以下情况下使用组件类：

• 构建可复用的 UI 模式（卡片、按钮、导航）
• 需要表达语义
• 在网站的多个位置使用
• 示例：fk-card、fk-nav、fk-hero

在以下情况下使用工具类：

• 应用单一用途的样式（间距、排版、布局）
• 无需创建新类即可快速调整
• 在网站范围内保持间距和尺寸一致
• 示例：fk-text-lg、fk-space-md、fk-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>

Phase 7：常见错误与修正

错误 1：缺少前缀

❌ card, button, nav
✅ fk-card, fk-button, fk-nav

错误 2：大小写错误

❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav

错误 3：分隔符错误

❌ fk_card_title, fk.card.title
✅ fk-card-title

错误 4：camelCase/PascalCase

❌ fkCardTitle, FkCardTitle
✅ fk-card-title

错误 5：将修饰符用作独立类

❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">

错误 6：嵌套过多

❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title

错误 7：名称过于具体

❌ fk-product-feature-card-with-image-and-price
✅ fk-card (use combo: is-product)

错误 8：响应式模式错误

❌ fk-grid-3-tablet-2 (single class)
✅ fk-grid-3 tablet-2 (two classes)

Phase 8：FlowKit 版本说明

FlowKit v2（当前版本）：

• 新的命名约定（本文档所述）
• 增强的网格系统，支持响应式组合类
• 扩展的工具类集合
• 改进的组件库
• 更完善的变量系统

v2 的主要变更：

• 将 fk- 前缀标准化并应用于所有组件
• 引入 is- 前缀表示状态修饰符（组合类）
• 添加响应式组合类（.tablet-、.mobile-）
• 扩展间距刻度（xs 到 3xl）
• 工具类名称更具语义

从 v1 迁移： 如果用户使用的是 v1 FlowKit 类：

1. 在缺少 fk- 前缀的地方添加此前缀
2. 将修饰符转换为 is- 组合类
3. 将响应式类更新为组合类格式
4. 检查间距工具类是否需要适配新刻度

Phase 9：性能优化

创建类：

• 首先创建基础组件类
• 然后创建元素类
• 最后创建工具类
• 每批使用 style_tool 创建 10-15 个类

更新元素：

• 每批处理 10-15 个元素
• 大批量处理时显示进度
• 如果元素超过 50 个，请用户确认批次大小

设计器连接：

• 开始前始终验证设计器连接
• 如果连接断开，请暂停并让用户重新连接
• 在批次之间保存进度

Phase 10：错误处理

常见错误：

1. 设计器未连接：

❌ 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

2. 类已存在：

⚠️ Warning: Class 'fk-button' already exists

Options:
1. Skip creation (use existing)
2. Update existing class
3. Create with different name

3. 类名无效：

❌ Error: Class name 'fk-My Button' is invalid

Issues:
- Contains spaces
- Contains uppercase

Suggested: 'fk-my-button'

4. 不支持样式属性：

⚠️ 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

边缘情况

情况 1：第三方集成类 如果要集成第三方库（例如动画、滑块）：

• 将第三方类分开保留
• 添加 FlowKit 包装元素：<div class="fk-slider"><div class="swiper">...</div></div>
• 不要强制第三方类使用 FlowKit 命名

情况 2：旧代码迁移 迁移大型现有网站时：

• 先创建 FlowKit 类
• 应用于新建区域
• 逐步重构旧区域
• 暂时保留两套系统，以确保向后兼容

情况 3：自定义命名要求 如果客户端已有命名系统：

• 讨论 FlowKit 的优势
• 展示并排对比
• 提供混合方案：新组件使用 FlowKit，现有组件保留旧命名
• 或彻底重构（耗时更长，但长期效果更好）

情况 4：组件库冲突 如果网站使用了其他框架（Bootstrap、Tailwind）：

• FlowKit 可以共存，但不建议这样做
• 选择一个主要系统
• 自定义组件使用 FlowKit
• 预构建组件使用其他框架

情况 5：工具类过多 如果单个元素上有太多工具类：

• 考虑改为创建组件类
• 示例：不要使用 fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow
• 而是创建一个内置这些属性的 fk-panel

生产环境检查清单

在认为 FlowKit 实施完成之前：

设置：

• 已连接 Webflow Designer
• 已确定目标网站
• 已确认当前页面
• 已与用户明确范围

组件结构：

• 所有组件均使用 fk- 前缀
• 组件层级合理（最多 3 层）
• 元素名称具有语义
• 修饰符使用带 is- 前缀的组合类

工具类：

• 间距工具类使用 T 恤尺码（xs-3xl）
• 排版工具类涵盖所有文本样式
• 布局工具类满足 flex/grid 需求
• 颜色工具类与品牌保持一致

响应式：

• 已为关键组件定义响应式组合类
• 已测试断点修饰符（平板、移动设备）
• 网格系统可正确适配

状态：

• 已定义状态修饰符（is-active、is-disabled 等）
• 悬停/焦点状态正常工作
• 活跃状态样式设置正确

文档：

• 已记录组件结构
• 已列出工具类
• 已说明响应式行为
• 已记录状态修饰符

验证：

• 所有类均遵循命名约定
• 不含大写字母
• 不含下划线
• 所有类都有正确的前缀

性能：

• 分批创建类
• 大型操作会显示进度
• 未创建重复类

用户体验：

• 提供清晰的反馈
• 显示进度指示器
• 提供成功确认
• 推荐后续步骤