neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
---
|
|
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
|