---
name: system-prompts
title: System Pattern LLM Prompts
description: Ready-to-use prompts for system patterns with wiki patterns.
---

# System Pattern Prompts

## 1. Design Tokens

```
Create complete design tokens:
- Color palette: bg, surface, border, text (primary, secondary, muted), accent
- Spacing: 4,8,12,16,20,24,32,40,48,64,80,96,128
- Typography: xs(12), sm(14), base(16), lg(18), xl(20), 2xl(24), 3xl(30), 4xl(36)
- Motion: ease-out, duration-normal(300ms), duration-slow(500ms)
- Border-radius: sm(4), md(8), lg(16), xl(24), full(9999)
- All as CSS custom properties
```

## 2. Component Patterns

```
Create reusable component patterns:
- Buttons: primary, secondary, ghost (3 variants)
- Inputs: default, focus, error (3 states)
- Cards: default, featured (2 variants)
- Badges: default, accent (2 variants)
- All with consistent padding, border-radius, transitions
```

## 3. CSS Architecture

```
Create CSS architecture:
- File structure: tokens/, base/, components/, layouts/, pages/
- Naming: BEM methodology
- No !important
- No hardcoded values
- Mobile-first media queries
- Custom properties for theming
```

## Anti-Patterns

1. Never use inline styles
2. Never use !important
3. Never hardcode values
4. Never mix design systems
5. Never skip accessibility