我开发了一个 AI 组件开发助手：从想法到落地的完整实战

基于 Cursor + StepFun Skill 的 React 组件库自动化开发工具

开发组件库时，我厌倦了重复写需求→开发→文档→测试的流程。于是用 StepFun Skill 打造了一个 AI 助手，现在只需描述需求，AI 自动完成全流程：需求完善 → 代码生成 → 测试 → 文档。

实测开发一个 Timeline 组件只需 5 分钟，测试覆盖率 96%。

GitHub: https://github.com/xixloveixixi/creamdesign-component-dev-skill

背景：组件开发的痛点

在做 CreamDesign 组件库时，我的开发流程是这样的：

写组件需求 → 组件开发 → 写 Storybook → 写测试 → 反复调整

每个组件都要重复这套流程，而且经常发现：

• ❌ 需求考虑不周，开发时才发现缺状态
• ❌ Storybook 和代码不同步
• ❌ 测试覆盖率不够，要补用例
• ❌ 文档写起来很枯燥

想法：能不能把需求给 AI，让 AI 帮我完善并自动走完整个流程？

第一版 Skill：快速验证想法

初始设计

我基于 StepFun 的 Skill 系统，设计了第一版开发流程：

阶段 1: 需求分析 → 阶段 2: 代码生成 → 阶段 3: Storybook → 阶段 4: 测试

核心文件结构：

component-library-dev/
├── SKILL.md                    # 主文档
├── assets/
│   ├── component-template/     # 组件代码模板
│   ├── story-template/         # Storybook 模板
│   └── test-template/          # 测试模板
└── references/                 # 参考资料

第一版的问题

用 Card 组件测试后，发现了不少问题：

问题	影响
阶段 1 没有用户确认	AI 直接生成代码，可能不符合预期
文件命名不统一	有的是 index.tsx，有的是 Component.tsx
Storybook title 错误	用了 Components/Timeline，导致组件在错误的分类下
SCSS 引入路径错误	模板用的是 @use，但项目实际是 @import
没有文件验证	生成后不知道文件是否正确写入
缺少使用示例	其他人不知道怎么用

第二版 Skill：打磨细节

改进点 1：强制用户确认

在第一版中，AI 输出需求文档后直接生成代码。改进后：

阶段 1: 需求分析 → 输出结构化文档 → 【等待用户确认】→ 阶段 2: 代码生成

在 .cursorrules 中明确标注：

## 开发流程（必须严格遵守）

### 阶段 1：需求分析与完善（必须先完成并等待确认）

**重要：此阶段完成后必须等待用户确认，不能直接进入阶段 2**

4. **等待用户确认**
   - 输出结构化需求文档后，**必须停止并等待用户确认**
   - 用户确认后再进入阶段 2
   - 如用户提出修改意见，返回步骤 2 重新完善

**禁止：未获得用户确认前，不得进入阶段 2 生成代码**

改进点 2：统一文件命名规范

与项目现有组件保持一致：

# 之前（混乱）
index.tsx + style.scss

# 之后（统一）
ComponentName.tsx + ComponentName.scss + index.tsx

改进点 3：修正 Storybook title

// 之前（错误）
title: 'Components/Timeline',  // 会出现在 Components 子目录

// 之后（正确）
title: 'Timeline',  // 与 Button、Card 等组件一致，在根目录

改进点 4：修正 SCSS 引入方式

// 之前（错误）
@use '../styles/variables' as *;

// 之后（正确）
@import '../../style/_creamdesign.scss';

改进点 5：添加文件验证步骤

每个文件写入后，AI 会执行验证：

### 阶段 5：文件验证

**每个文件写入后必须执行验证：**

1. **使用 read_file 工具读取文件内容**
2. **验证内容非空**
3. **验证关键代码存在**

验证清单：
□ ComponentName.tsx - 包含 export interface 和 export const
□ ComponentName.scss - 包含 @import 和 .cream- 类名
□ ComponentName.stories.tsx - 包含 export default 和 stories
□ ComponentName.test.tsx - 包含 describe 和 it 测试用例
□ index.tsx - 包含 export default 和类型导出

改进点 6：添加使用示例

创建了 examples/ 目录，包含：

• card-example.md - Card 组件完整开发流程
• timeline-example.md - Timeline 组件完整开发流程
• README.md - 快速开始指南

实战测试：Timeline 组件开发

用第二版 Skill 开发 Timeline 组件，完整流程如下：

Step 1: 输入需求

帮我开发一个 Timeline 时间轴组件，垂直展示时间线，
每个节点有标题、内容和时间，支持不同状态（完成、进行中、待处理）

Step 2: AI 完善需求

AI 输出结构化需求文档：

## 组件名称：Timeline

### Props 接口
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|--------|------|--------|------|------|
| items | TimelineItemProps[] | - | 是 | 时间轴数据 |
| direction | 'vertical' \| 'horizontal' | 'vertical' | 否 | 排列方向 |
| mode | 'left' \| 'right' \| 'alternate' | 'left' | 否 | 内容展示模式 |
| pending | boolean \| ReactNode | false | 否 | 是否显示待处理节点 |

### TimelineItem Props
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|--------|------|--------|------|------|
| title | ReactNode | - | 是 | 节点标题 |
| content | ReactNode | - | 否 | 节点内容 |
| time | string | - | 否 | 时间节点 |
| status | 'completed' \| 'processing' \| 'pending' | 'pending' | 否 | 节点状态 |

Step 3: 用户确认

用户回复：确认

Step 4: AI 自动生成代码

生成 5 个文件：

src/component/Timeline/
├── Timeline.tsx           # 组件实现（300+ 行）
├── Timeline.scss          # 样式文件（200+ 行）
├── Timeline.stories.tsx   # 8 个 Story
├── Timeline.test.tsx      # 50+ 测试用例
└── index.tsx              # 导出入口

Step 5: 运行测试

npm test -- --testPathPattern=Timeline --coverage --watchAll=false

结果：

Step 6: 查看 Storybook

npm run storybook

8 个 Story 全部正常显示：

• Default - 默认时间轴
• Horizontal - 水平方向
• Alternate - 交替模式
• WithCustomIcon - 自定义图标
• WithStatus - 不同状态
• WithPending - 待处理节点
• WithClick - 点击事件
• CompleteExample - 完整示例

成果对比

指标	传统开发	AI 辅助开发	提升
开发时间	2-3 小时	5 分钟	36x
测试用例	20-30 个	50+ 个	2x
测试覆盖率	60-70%	96%	+30%
Story 数量	3-4 个	8 个	2x
需求遗漏	经常	极少	显著改善

技术细节

Skill 架构

用户输入需求
    ↓
[阶段 1] 需求分析 → 输出结构化文档 → 等待用户确认
    ↓（用户确认后）
[阶段 2] 组件代码生成 → Timeline.tsx + index.tsx
    ↓
[阶段 3] Storybook 文档 → Timeline.stories.tsx
    ↓
[阶段 4] 测试用例生成 → Timeline.test.tsx
    ↓
[阶段 5] 文件验证 → 读取文件 + 验证内容
    ↓
[阶段 6] 全局导出配置 → 更新 src/index.tsx
    ↓
完成！

关键技术

1. StepFun Skill 系统
   • 使用 SKILL.md 定义开发流程
   • 模板文件使用 {{ComponentName}} 占位符
   • 支持多阶段工作流
2. Cursor IDE 集成
   • .cursorrules 文件定义开发规范
   • AI 自动读取并遵循规范
   • 支持文件操作和验证
3. 模板引擎
   • 组件模板：TypeScript + React 19
   • 样式模板：SCSS + BEM 命名
   • 测试模板：Jest + React Testing Library
   • 文档模板：Storybook

开源发布

已将 Skill 开源到 GitHub：

github.com/xixloveixix…

包含：

• ✅ 完整的 Skill 文件（.skill）
• ✅ Cursor 配置文件（.cursorrules）
• ✅ 使用示例（examples/）
• ✅ 详细文档（README.md）

使用方式

方式 1：Cursor + StepFun（推荐）

1. 下载 component-library-dev.skill
2. 在 StepFun 中导入使用
3. 将 .cursorrules 复制到项目根目录
4. 在 Cursor 中输入组件需求

方式 2：纯 Cursor

1. 将 .cursorrules 复制到项目根目录
2. 在 Cursor 中输入组件需求
3. AI 自动遵循规范开发

经验总结

什么有效

• ✅ 分阶段工作流 - 需求确认后再生成代码，避免返工
• ✅ 模板化 - 统一代码风格，减少决策成本
• ✅ 强制验证 - 每个文件写入后验证，确保质量
• ✅ 示例驱动 - 提供完整示例，降低使用门槛

什么无效

• ❌ 完全自动化 - 没有用户确认环节，容易偏离需求
• ❌ 过度抽象 - 模板太复杂，AI 填充时容易出错
• ❌ 忽视验证 - 不验证文件内容，可能出现空文件

关键洞察

AI 不是替代开发者，而是放大开发者的能力。 最好的流程是：AI 处理重复工作（代码生成、文档、测试），开发者专注创意和决策（需求确认、架构设计）。

未来规划

• 支持更多组件类型（表单、图表、布局）
• 集成设计 Token 自动同步
• 支持从 Figma 设计稿生成组件
• 添加可视化配置界面

结语

从第一版的粗糙到第二版的可用，我深刻体会到：AI 工具的开发也是迭代过程。关键是快速验证想法，然后根据实际使用反馈持续优化。

如果你也在做组件库开发，不妨试试这个 Skill，欢迎提 Issue 和 PR！

相关链接：

• GitHub: github.com/xixloveixix…
• CreamDesign 组件库: [你的组件库链接]
• StepFun: www.stepfun.com

---

感谢阅读！如果这篇文章对你有帮助，欢迎 Star ⭐️