场景描述

在前端开发中，一个常见需求是：根据设计稿快速生成符合规范的组件代码。

比如接入 Tailwind CSS 后，希望 AI 能够：

• 读取设计稿中的视觉信息
• 根据 Tailwind 配置生成组件
• 遵循项目的命名规范（如 cui- 前缀）

那么问题来了：这个场景应该用 Skill 还是 Rule？

结论：Rule 足够

判定依据：

为什么不是 Skill？

Skill 的本质

Skill 是 能力/工作流，用于告诉 Claude "如何做某事"。它适合：

• 有固定的多步骤流程
• 需要执行脚本或调用工具
• 需要生成多个配套文件

Rule 的本质

Rule 是 约束/限制，用于告诉 Claude "不能做什么"。它适合：

• 代码规范约束
• 命名规范约束
• 技术选型限制

视觉稿→组件的本质

这个场景的核心是：

输入：设计稿 + Tailwind 配置
输出：符合规范的组件代码
约束：使用 cui- 前缀、遵循 Tailwind 配置

这是一个 约束问题，不是 流程问题。

实践建议

1. 创建 Rule 文件

在 .cursor/rules/ 或 .codebuddy/rules/ 目录下创建规则文件：

---
alwaysApply: true
---

# Tailwind CSS 组件规范

## 类名规范
- 所有自定义组件类名必须使用 `cui-` 前缀
- 禁止使用行内样式

## 颜色使用
- 必须使用 Tailwind 配置中定义的颜色变量
- 禁止使用硬编码的颜色值

2. 什么时候才需要 Skill？

如果你的需求变成：

根据设计稿生成组件，同时自动生成：

- 组件文件 Component.tsx

- 样式文件 Component.module.css

- 测试文件 Component.test.tsx

- Storybook 文件 Component.stories.tsx

- 并执行脚本注册到组件库

这时候才需要 Skill，因为涉及到：

• 多文件生成的固定流程
• 脚本执行
• 模板复用

总结