flowkit-naming

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flowkit Naming System

Flowkit 命名体系

Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.

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

Important Note

重要说明

ALWAYS use Webflow MCP tools for all operations:

Use Webflow MCP's
```
webflow_guide_tool
```
to get best practices before starting
Use Webflow MCP's
```
data_sites_tool
```
with action
```
list_sites
```
to identify the target site
Use Webflow MCP's
```
de_page_tool
```
to get current page and switch pages
Use Webflow MCP's
```
element_tool
```
to select elements and inspect current classes
Use Webflow MCP's
```
style_tool
```
to create and update FlowKit-compliant styles
Use Webflow MCP's
```
de_learn_more_about_styles
```
to understand supported style properties
DO NOT use any other tools or methods for Webflow operations
All tool calls must include the required
```
context
```
parameter (15-25 words, third-person perspective)
Designer connection required: User must be connected to Webflow Designer for this skill to work

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

开始前使用Webflow MCP的
```
webflow_guide_tool
```
获取最佳实践
使用Webflow MCP的
```
data_sites_tool
```
并执行
```
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才能使用此功能

Instructions

操作步骤

Phase 1: Discovery & Setup

阶段1：发现与设置

Identify the task: Determine if user is:
- Creating new component classes
- Auditing existing class names
- Building complete page sections
- Refactoring non-FlowKit classes to FlowKit
Connect to Designer: Confirm user has Webflow Designer open and connected
Get current page: Use Webflow MCP's
```
de_page_tool
```
to identify current working page
Ask for scope: Clarify which elements or sections to work with

确定任务类型：判断用户需求：
- 创建新组件类
- 审核现有类名称
- 构建完整页面区块
- 将非FlowKit类重构为FlowKit规范
连接Designer：确认用户已打开并连接Webflow Designer
获取当前页面：使用Webflow MCP的
```
de_page_tool
```
确定当前工作页面
明确范围：确认需要处理的元素或区块

Phase 2: Analysis (if auditing existing)

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

Get all elements: Use Webflow MCP's
```
element_tool
```
to retrieve current page elements
Extract classes: Identify all class names currently applied
Categorize issues:
- Missing
```
fk-
```
  prefix
- Incorrect case (uppercase/mixed case)
- Wrong separators (underscores instead of hyphens)
- Non-semantic naming
- Inconsistent component structure
Generate audit report: Show current vs suggested FlowKit-compliant names

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

Phase 3: Suggestion Generation

阶段3：生成建议

Apply FlowKit patterns: Generate class names following FlowKit v2 conventions
Structure by type:
- Component wrappers:
```
fk-[component]
```
- Child elements:
```
fk-[component]-[element]
```
- State modifiers: combo classes with
```
is-[state]
```
- Layout utilities:
```
fk-flex
```
  ,
```
fk-grid
```
  ,
```
fk-stack
```
- Spacing utilities:
```
fk-space-[size]
```
  ,
```
fk-py-[size]
```
  ,
```
fk-px-[size]
```
- Typography utilities:
```
fk-text-[style]
```
Validate suggestions: Ensure all suggestions follow FlowKit conventions
Show preview: Display hierarchical structure with suggested classes

应用FlowKit模式：遵循FlowKit v2规范生成类名
按类型分类：
- 组件容器：
```
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]
```
验证建议：确保所有建议符合FlowKit规范
展示预览：显示带建议类名的层级结构

Phase 4: Application (if user confirms)

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

Create styles: Use Webflow MCP's
```
style_tool
```
to create new FlowKit-compliant class styles
Update elements: Use Webflow MCP's
```
element_tool
```
to apply classes to elements
Process in batches: If many elements, process in groups of 10-15
Show progress: Display which elements are being updated

创建样式：使用Webflow MCP的
```
style_tool
```
创建新的符合FlowKit规范的类样式
更新元素：使用Webflow MCP的
```
element_tool
```
为元素应用类
批量处理：如果元素数量较多，按10-15个一组进行处理
展示进度：显示正在更新的元素

Phase 5: Verification & Reporting

阶段5：验证与报告

Verify application: Check that classes were applied correctly
Generate report: Show what was created/updated
Provide documentation: Explain the FlowKit structure used
Suggest next steps: Recommend additional FlowKit patterns to implement

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

FlowKit Naming Reference

FlowKit 命名参考

Core Naming Patterns

核心命名模式

Pattern	Purpose	Example
`fk-[component]`	Component wrapper (base class)	`fk-card` , `fk-nav` , `fk-hero`
`fk-[component]-[element]`	Child element within component	`fk-card-title` , `fk-nav-link`
`fk-[component].[modifier]`	Combo class modifier (state/variant)	`fk-card.is-featured`
`fk-text-[style]`	Typography utility	`fk-text-xl` , `fk-text-bold`
`fk-flex` / `fk-grid`	Layout utilities	`fk-flex-center` , `fk-grid-3`
`fk-space-[size]`	Spacing utilities	`fk-space-md` , `fk-py-lg`
`is-[state]`	State modifiers (combo)	`is-active` , `is-hidden` , `is-disabled`

模式	用途	示例
`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`

Layout Utilities

布局工具类

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-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换行

Typography Utilities

排版工具类

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-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      文本首字母大写

Spacing Utilities

间距工具类

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-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]            右侧外边距

Color Utilities

颜色工具类

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-bg-primary           主背景色
fk-bg-secondary         次背景色
fk-bg-accent            强调背景色
fk-bg-light             浅色背景
fk-bg-dark              深色背景
fk-text-primary         主文本色
fk-text-secondary       次文本色
fk-text-muted           弱化文本色

Border & Visual Utilities

边框与视觉工具类

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

fk-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            大阴影

State Modifiers (Combo Classes)

状态修饰符（组合类）

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

is-active               激活状态（导航、标签页）
is-hidden               隐藏状态
is-visible              显示状态（覆盖隐藏）
is-disabled             禁用状态
is-loading              加载状态
is-error                错误状态
is-success              成功状态
is-primary              主要变体
is-secondary            次要变体
is-featured             推荐/高亮变体
is-horizontal           水平布局变体
is-vertical             垂直布局变体

Examples

示例

Example 1: Creating Hero Section

示例1：创建Hero区块

User prompt:

Build a hero section with FlowKit naming

Step 1: Analysis

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

Step 2: After user confirms

🔄 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区块

步骤1：分析

🎨 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中创建这些类？（是/否）

步骤2：用户确认后

🔄 正在创建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区块结构已准备就绪！

Example 2: Auditing Existing Classes

示例2：审核现有类

User prompt:

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

Response:

📋 FlowKit Audit Report

Checking 4 classes against FlowKit v2 conventions...

---

用户请求：

检查这些类：feature-card, FK-Button, fk_hero_title, cardTitle

响应：

📋 FlowKit 审核报告

正在对照FlowKit v2规范检查4个类...

---

Issues Found: 4

发现问题：4个

feature-card

⚠️

feature-card

⚠️

Issue: Missing FlowKit prefix Reason: All FlowKit classes must start with

fk-

Suggested:

fk-feature-card

fk-card.is-feature

Fix: Rename class to include

fk-

prefix

问题： 缺少FlowKit前缀 原因： 所有FlowKit类必须以

fk-

开头 建议：

fk-feature-card

或

fk-card.is-feature

修复： 重命名类以添加

fk-

前缀

FK-Button

❌

FK-Button

❌

Issue: Incorrect case (uppercase) Reason: FlowKit uses lowercase only Suggested:

fk-button

Fix: Convert to lowercase:

fk-button

问题： 大小写错误（大写） 原因： FlowKit仅使用小写 建议：

fk-button

修复： 转换为小写：

fk-button

fk_hero_title

❌

fk_hero_title

❌

Issue: Wrong separator (underscore) Reason: FlowKit uses hyphens, not underscores Suggested:

fk-hero-title

Fix: Replace underscores with hyphens

问题： 分隔符错误（使用下划线） 原因： FlowKit使用连字符，而非下划线 建议：

fk-hero-title

修复： 将下划线替换为连字符

cardTitle

❌

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

问题： 存在多处违规

缺少
```
fk-
```
前缀
使用驼峰式命名而非短横线式 原因： FlowKit要求
```
fk-
```
前缀和连字符分隔 建议：
```
fk-card-title
```
修复： 添加前缀并转换为短横线式命名

FlowKit Naming Rules:

FlowKit 命名规则：

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

undefined

✅ 正确模式：

```
fk-card
```
（组件）
```
fk-card-title
```
（元素）
```
fk-button.is-primary
```
（带修饰符）
```
fk-text-xl
```
（工具类）

❌ 错误模式：

```
card
```
（无前缀）
```
FK-Card
```
（大小写错误）
```
fk_card
```
（分隔符错误）
```
cardTitle
```
（驼峰式命名）

是否要我在Webflow Designer中重命名这些类？（是/否）

undefined

Example 3: Building Card Component

示例3：构建卡片组件

User prompt:

Create a product card component with FlowKit classes

Response:

🎨 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

---

Variants (Combo Classes):

变体（组合类）：

Featured Card

Horizontal Layout

水平布局

fk-card.is-horizontal

Side-by-side image/content
Better for list views
Image on left, content on right

fk-card.is-horizontal

图片与内容并排
更适合列表视图
图片在左，内容在右

Compact Size

紧凑尺寸

fk-card.is-compact

Reduced padding
Smaller text sizes
Use in tight layouts

fk-card.is-compact

减少内边距
更小的字号
用于紧凑布局

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)

undefined

桌面端（默认）：

```
fk-grid-3
```
（每行3张卡片）

平板端：

添加组合类：
```
fk-grid-3.tablet-2
```

移动端：

添加组合类：
```
fk-grid-3.tablet-2.mobile-1
```

是否要创建这些类？（是/否）

undefined

Example 4: Refactoring to FlowKit

示例4：重构为FlowKit规范

User prompt:

Refactor my navigation to use FlowKit naming

Step 1: Current Analysis

🔍 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命名

步骤1：当前分析

🔍 正在分析当前导航类...

找到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

---

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)


**Step 2: After Migration**

✅ Navigation Refactored to FlowKit

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

阶段1：创建FlowKit类（8个类）

创建所有
```
fk-nav-*
```
类
创建工具类：
```
fk-flex
```
,
```
fk-flex-between
```
,
```
fk-flex-center
```
创建带
```
is-primary
```
修饰符的
```
fk-button
```

阶段2：更新元素（8个元素）

用新的FlowKit类替换旧类
按需应用组合类
保留现有样式

阶段3：清理（可选）

验证后可删除旧类
暂时保留以维持向后兼容性

是否继续迁移？（是/否）


**步骤2：迁移完成后**

✅ 导航已重构为FlowKit规范

已创建类： 8个 已更新元素： 8个 耗时： ~3秒

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

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（共5个） │ │ └── fk-nav-link.is-active（当前页面） │ └── 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

undefined

旧类	新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 ✅

🎉 导航现已符合FlowKit规范！

后续建议：

在所有断点测试导航
验证激活状态是否正常工作
考虑添加
```
fk-nav.is-transparent
```
实现透明头部变体
考虑添加
```
fk-nav.is-sticky
```
实现粘性导航

undefined

Guidelines

指南

Phase 1: Critical Requirements

阶段1：关键要求

FlowKit Prefix Rule:

ALL component and element classes MUST start with
```
fk-
```
Exception: State modifiers use
```
is-
```
prefix (as combo classes)
Exception: Utility classes for third-party integrations may omit prefix

Case Sensitivity:

All class names are lowercase only
No uppercase letters anywhere
No camelCase or PascalCase

Separator Rule:

Use hyphens (
```
-
```
) to separate words
Never use underscores (
```
_
```
)
Never use spaces or special characters

Naming Structure:

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)

FlowKit前缀规则：

所有组件和元素类必须以
```
fk-
```
开头
例外：状态修饰符使用
```
is-
```
前缀（作为组合类）
例外：第三方集成的工具类可省略前缀

大小写规则：

所有类名仅使用小写
不得出现任何大写字母
不得使用驼峰式或帕斯卡式命名

分隔符规则：

使用连字符(
```
-
```
)分隔单词
绝不使用下划线(
```
_
```
)
绝不使用空格或特殊字符

命名结构：

组件:        fk-[component]
元素:          fk-[component]-[element]
子元素:      fk-[component]-[element]-[detail]
工具类:          fk-[property]-[value]
状态修饰符:   is-[state]（仅作为组合类）
响应式:       .[breakpoint]-[value]（组合类）

Phase 2: Component Naming Rules

阶段2：组件命名规则

Component Names:

Keep concise and semantic
Use common web component terms:
```
card
```
,
```
nav
```
,
```
hero
```
,
```
footer
```
Avoid overly specific names: prefer
```
fk-card
```
over
```
fk-product-feature-card
```
Use modifiers for variants:
```
fk-card.is-featured
```
not
```
fk-card-featured
```

Element Hierarchy:

Parent component:
```
fk-card
```
Direct children:
```
fk-card-[element]
```
(e.g.,
```
fk-card-title
```
)
Deep nesting: Avoid more than 3 levels
Bad:
```
fk-card-content-section-text-wrapper
```
Good:
```
fk-card-content
```
,
```
fk-card-text
```

Common Component Patterns:

Cards:

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

Navigation:

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

Forms:

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

组件名称：

保持简洁且有语义
使用通用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

Phase 3: Utility Classes

阶段3：工具类

Utility Naming:

Format:
```
fk-[property]-[value]
```
Examples:
```
fk-text-lg
```
,
```
fk-space-md
```
,
```
fk-grid-3
```

Spacing Utilities:

Use t-shirt sizing:
```
xs
```
,
```
sm
```
,
```
md
```
,
```
lg
```
,
```
xl
```
,
```
2xl
```
,
```
3xl
```
Directional:
```
py
```
(vertical),
```
px
```
(horizontal),
```
pt
```
(top),
```
pr
```
(right),
```
pb
```
(bottom),
```
pl
```
(left)
Same for margins:
```
my
```
,
```
mx
```
,
```
mt
```
,
```
mr
```
,
```
mb
```
,
```
ml
```

Typography Utilities:

Size:
```
fk-text-[xs|sm|md|lg|xl|2xl|3xl]
```
Weight:
```
fk-text-[light|medium|semibold|bold]
```
Alignment:
```
fk-text-[left|center|right]
```

Transform:

fk-text-[uppercase|lowercase|capitalize]

Layout Utilities:

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

Container:
```
fk-container
```
,
```
fk-section
```

工具类命名：

格式：
```
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
```

Phase 4: State Modifiers (Combo Classes)

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

State Modifier Rules:

Always use as combo classes with
```
is-
```
prefix
Applied in addition to base class

Example:

<div class="fk-button is-primary">...</div>

Common States:

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

Applying Combo Classes in Webflow:

Select element
Add base class:
```
fk-button
```
Add combo class:
```
is-primary
```
Element has both classes:
```
fk-button is-primary
```
Style the combo:
```
.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        折叠状态

在Webflow中应用组合类：

选择元素
添加基础类：
```
fk-button
```
添加组合类：
```
is-primary
```
元素将拥有两个类：
```
fk-button is-primary
```
为组合类设置样式：
```
.fk-button.is-primary { ... }
```

Phase 5: Responsive Design

阶段5：响应式设计

Responsive Modifiers:

FlowKit uses combo classes for responsive behavior
Format:
```
.[breakpoint]-[value]
```
Example:
```
fk-grid-4.tablet-2.mobile-1
```

Breakpoints:

Desktop (default):   No modifier needed
Tablet:              .tablet-[value]
Mobile:              .mobile-[value]

Responsive Grid Example:

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

Responsive Text Example:

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

响应式修饰符：

FlowKit使用组合类实现响应式行为
格式：
```
.[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">

Phase 6: Best Practices

阶段6：最佳实践

Always:

✅ Use
```
fk-
```
prefix for all components and elements
✅ Use hyphens to separate words
✅ Use lowercase only
✅ Keep component names semantic and concise
✅ Use combo classes for modifiers and states
✅ Combine utilities freely (
```
fk-flex fk-flex-center fk-space-md
```
)
✅ Follow component-element hierarchy
✅ Use responsive combo classes for breakpoints

Never:

❌ Omit
```
fk-
```
prefix from components
❌ Use underscores or spaces
❌ Use uppercase or camelCase
❌ Create overly specific class names
❌ Nest elements more than 3 levels deep
❌ Mix FlowKit with other naming systems
❌ Create standalone modifier classes (use combo classes)

Component vs Utility:

Use components when:

Building reusable UI patterns (cards, buttons, navigation)
Need semantic meaning
Multiple instances across site
Example:
```
fk-card
```
,
```
fk-nav
```
,
```
fk-hero
```

Use utilities when:

Applying single-purpose styling (spacing, typography, layout)
Quick adjustments without new classes
Consistent spacing/sizing across site
Example:
```
fk-text-lg
```
,
```
fk-space-md
```
,
```
fk-flex-center
```

Utility Stacking: Utilities can be freely combined:

html

<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
  Content
</div>

Component + Utility Combo:

html

<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-md
```
）
✅ 遵循组件-元素层级
✅ 使用响应式组合类适配断点

绝不做：

❌ 组件省略
```
fk-
```
前缀
❌ 使用下划线或空格
❌ 使用大写或驼峰式命名
❌ 创建过于具体的类名
❌ 元素嵌套超过3级
❌ 混合FlowKit与其他命名体系
❌ 创建独立的修饰符类（使用组合类）

组件 vs 工具类：

使用组件类的场景：

构建可复用UI模式（卡片、按钮、导航）
需要语义化含义
站点中存在多个实例
示例：
```
fk-card
```
,
```
fk-nav
```
,
```
fk-hero
```

使用工具类的场景：

应用单一用途的样式（间距、排版、布局）
无需新类即可快速调整
站点内保持一致的间距/尺寸
示例：
```
fk-text-lg
```
,
```
fk-space-md
```
,
```
fk-flex-center
```

工具类组合： 工具类可自由组合：

html

<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
  内容
</div>

组件 + 工具类组合：

html

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

Phase 7: Common Mistakes & Fixes

阶段7：常见错误与修复

Mistake 1: Missing Prefix

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

Mistake 2: Wrong Case

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

Mistake 3: Wrong Separator

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

Mistake 4: camelCase/PascalCase

❌ fkCardTitle, FkCardTitle
✅ fk-card-title

Mistake 5: Modifier as Standalone Class

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

Mistake 6: Too Much Nesting

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

Mistake 7: Overly Specific Names

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

Mistake 8: Wrong Responsive Pattern

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

错误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：驼峰式/帕斯卡式命名

❌ 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（使用组合类: is-product）

错误8：响应式模式错误

❌ fk-grid-3-tablet-2（单个类）
✅ fk-grid-3 tablet-2（两个类）

Phase 8: FlowKit Version Notes

阶段8：FlowKit版本说明

FlowKit v2 (Current):

New naming conventions (documented here)
Enhanced grid system with responsive combos
Expanded utility collection
Improved component library
Better variable system

Key v2 Changes:

Standardized
```
fk-
```
prefix across all components
Introduced
```
is-
```
prefix for state modifiers (combo classes)
Added responsive combo classes (
```
.tablet-
```
,
```
.mobile-
```
)
Expanded spacing scale (xs to 3xl)
More semantic utility names

Migration from v1: If user has v1 FlowKit classes:

Add
```
fk-
```
prefix where missing
Convert modifiers to
```
is-
```
combo classes
Update responsive classes to combo format
Check spacing utilities for new scale

FlowKit v2（当前版本）：

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

v2关键变化：

所有组件统一使用
```
fk-
```
前缀
引入
```
is-
```
前缀作为状态修饰符（组合类）
添加响应式组合类（
```
.tablet-
```
,
```
.mobile-
```
）
扩展间距范围（xs到3xl）
更具语义化的工具类名称

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

为缺少的类添加
```
fk-
```
前缀
将修饰符转换为
```
is-
```
组合类
将响应式类更新为组合类格式
检查间距工具类是否适配新范围

Phase 9: Performance Optimization

阶段9：性能优化

Class Creation:

Create base component classes first
Then create element classes
Finally create utility classes
Use
```
style_tool
```
in batches of 10-15 classes

Element Updates:

Process elements in groups of 10-15
Show progress for large batches
If >50 elements, ask user to confirm batch size

Designer Connection:

Always verify Designer connection before starting
If connection lost, pause and ask user to reconnect
Save progress between batches

类创建：

先创建基础组件类
再创建元素类
最后创建工具类
使用
```
style_tool
```
批量创建10-15个类

元素更新：

按10-15个一组处理元素
大规模批量处理时展示进度
如果元素超过50个，询问用户确认批量大小

Designer连接：

开始前始终验证Designer连接状态
如果连接断开，暂停操作并请用户重新连接
批量处理间保存进度

Phase 10: Error Handling

阶段10：错误处理

Common Errors:

1. Designer Not Connected:

❌ 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. Class Already Exists:

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

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

3. Invalid Class Name:

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

Issues:
- Contains spaces
- Contains uppercase

Suggested: 'fk-my-button'

4. Style Property Not Supported:

⚠️ 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. Designer未连接：

❌ 错误：无法创建类 - Designer未连接

解决方案：
1. 打开Webflow Designer
2. 打开目标站点
3. 在Claude Code中连接到Designer
4. 重试操作

2. 类已存在：

⚠️ 警告：类'fk-button'已存在

选项：
1. 跳过创建（使用现有类）
2. 更新现有类
3. 使用不同名称创建

3. 无效类名：

❌ 错误：类名'fk-My Button'无效

问题：
- 包含空格
- 包含大写字母

建议：'fk-my-button'

4. 样式属性不支持：

⚠️ 警告：属性'custom-property'不支持

可能原因：
- 自定义CSS属性
- Webflow Designer API不支持
- 属性名称拼写错误

建议：在Designer中手动应用

Edge Cases

边缘情况

Case 1: Third-Party Integration Classes If integrating with third-party libraries (e.g., animations, sliders):

Keep third-party classes separate

Add FlowKit wrapper:

<div class="fk-slider"><div class="swiper">...</div></div>

Don't force FlowKit naming on third-party classes

Case 2: Legacy Code Migration When migrating large existing site:

Create FlowKit classes first
Apply to new sections
Gradually refactor old sections
Keep both systems temporarily for backwards compatibility

Case 3: Custom Naming Requirements If client has existing naming system:

Discuss FlowKit benefits
Show side-by-side comparison
Offer hybrid approach: FlowKit for new components, keep old for existing
Or fully refactor (more time, better long-term)

Case 4: Component Library Conflicts If site uses another framework (Bootstrap, Tailwind):

FlowKit can coexist but not recommended
Choose one primary system
Use FlowKit for custom components
Use other framework for pre-built components

Case 5: Utility Class Explosion If too many utility classes on single element:

Consider creating component class instead

Example: Instead of

fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow

Create:
```
fk-panel
```
with those properties built-in

情况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
```
并内置这些属性

Production Checklist

生产环境检查清单

Before considering FlowKit implementation complete:

Setup:

Webflow Designer connected
Target site identified
Current page confirmed
Scope defined with user

Component Structure:

All components use
```
fk-
```
prefix
Component hierarchy is logical (max 3 levels)
Element names are semantic
Modifiers use combo classes with
```
is-
```
prefix

Utilities:

Spacing utilities use t-shirt sizing (xs-3xl)
Typography utilities cover all text styles
Layout utilities handle flex/grid needs
Color utilities align with brand

Responsive:

Responsive combo classes defined for key components
Breakpoint modifiers tested (tablet, mobile)
Grid systems adapt properly

States:

State modifiers defined (is-active, is-disabled, etc.)
Hover/focus states work correctly
Active states styled properly

Documentation:

Component structure documented
Utility classes listed
Responsive behavior explained
State modifiers documented

Validation:

All classes follow naming conventions
No uppercase letters
No underscores
All have proper prefixes

Performance:

Classes created in batches
Progress shown for large operations
No duplicate classes created

User Experience:

Clear feedback provided
Progress indicators shown
Success confirmation given
Next steps recommended

在确认FlowKit实施完成前，请检查以下内容：

设置：

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

组件结构：

所有组件使用
```
fk-
```
前缀
组件层级逻辑清晰（最多3级）
元素名称语义化
修饰符使用带
```
is-
```
前缀的组合类

工具类：

间距工具类使用T恤尺寸命名（xs-3xl）
排版工具类覆盖所有文本样式
布局工具类满足Flex/Grid需求
颜色工具类与品牌对齐

响应式：

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

状态：

已定义状态修饰符（is-active, is-disabled等）
悬停/聚焦状态正常工作
激活状态样式正确

文档：

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

验证：

所有类遵循命名规范
无大写字母
无下划线
所有类都有正确的前缀

性能：

类批量创建
大规模操作时展示进度
未创建重复类

用户体验：

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

flowkit-naming

Original

Translation

Flowkit Naming System

Flowkit 命名体系

Important Note

重要说明

Instructions

操作步骤

Phase 1: Discovery & Setup

阶段1：发现与设置

Phase 2: Analysis (if auditing existing)

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

Phase 3: Suggestion Generation

阶段3：生成建议

Phase 4: Application (if user confirms)

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

Phase 5: Verification & Reporting

阶段5：验证与报告

FlowKit Naming Reference

FlowKit 命名参考

Core Naming Patterns

核心命名模式

Layout Utilities

布局工具类

Typography Utilities

排版工具类

Spacing Utilities

间距工具类

Color Utilities

颜色工具类

Border & Visual Utilities

边框与视觉工具类

State Modifiers (Combo Classes)

状态修饰符（组合类）

Examples

示例

Example 1: Creating Hero Section

示例1：创建Hero区块

Example 2: Auditing Existing Classes

示例2：审核现有类

Issues Found: 4

发现问题：4个

1. feature-card ⚠️

1. feature-card ⚠️

2. FK-Button ❌

2. FK-Button ❌

3. fk_hero_title ❌

3. fk_hero_title ❌

4. cardTitle ❌

4. cardTitle ❌

FlowKit Naming Rules:

FlowKit 命名规则：

Example 3: Building Card Component

示例3：构建卡片组件

Variants (Combo Classes):

变体（组合类）：

Featured Card

推荐卡片

Horizontal Layout

水平布局

Compact Size

紧凑尺寸

Responsive Modifiers:

响应式修饰符：

Example 4: Refactoring to FlowKit

示例4：重构为FlowKit规范

Migration Plan:

迁移计划：

Updated Structure:

更新后的结构：

Before → After:

前后对比：

Guidelines

指南

Phase 1: Critical Requirements

阶段1：关键要求

Phase 2: Component Naming Rules

阶段2：组件命名规则

Phase 3: Utility Classes

1.
`feature-card`
⚠️

1.
`feature-card`
⚠️

2.
`FK-Button`
❌

2.
`FK-Button`
❌

3.
`fk_hero_title`
❌

3.
`fk_hero_title`
❌

4.
`cardTitle`
❌

4.
`cardTitle`
❌