Vibe Coding 与设计系统

AI 时代的设计系统实践

Vibe Coding 是一种借助 AI（如 Cursor、Antigravity）进行开发的新范式。设计系统为 AI 提供了清晰的规则和约束，让 AI 生成的代码更加一致和可预测。

核心要点

规则文件 — 将设计令牌和规范写入 .cursorrules 或 skills 文件
语义化命名 — 使用有意义的变量名，帮助 AI 理解用途
示例驱动 — 在规则中提供代码示例，引导 AI 的输出风格
约束边界 — 明确告诉 AI 什么可以做，什么不能做

AI 友好的规则示例

# Design System Rules

## Color Usage
- Primary buttons use `bg-primary`
- Text color uses `text-foreground`
- Never use hardcoded values like #xxx

## Spacing Rules
- Component internal: space-2 to space-4
- Between components: space-4 to space-8
- Always use Tailwind spacing classes

## Component Rules
When creating buttons, always use:
```tsx
<Button variant="..." size="...">
```

为 AI 提供的规则越清晰、越具体，生成的代码质量就越高。定期根据实践经验更新规则文件。

上一课开始创建设计系统