Vibe Coding & Design Systems

Design system practices in the AI era

Vibe Coding is a new development paradigm using AI tools like Cursor and Antigravity. Design systems provide clear rules and constraints for AI, making generated code more consistent and predictable.

Key Points

Rule Files — Write design tokens and specifications into .cursorrules or skills files
Semantic Naming — Use meaningful variable names to help AI understand purpose
Example-Driven — Provide code examples in rules to guide AI output style
Constraint Boundaries — Clearly tell AI what can and cannot be done

AI-Friendly Rule Example

# 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="...">
```

The clearer and more specific the rules you provide to AI, the higher the quality of generated code. Regularly update rule files based on practical experience.

Previous Start Creating Design System