Spacing System Designer Skill
Instructions
- Analyze spacing requirements from task
- Create spacing scale (4px, 8px, 16px base or similar)
- Define spacing tokens for margins, padding, gaps
- Specify spacing usage guidelines
- Consider responsive spacing adjustments
- Return structured spacing system specifications with:
- Spacing scale
- Spacing tokens
- Usage guidelines
- Responsive variations
Examples
Input: "Create spacing system"
Output:
### Spacing System
**Base Unit:** 4px
**Spacing Scale:**
- xs: 4px (0.25rem)
- sm: 8px (0.5rem)
- md: 16px (1rem)
- lg: 24px (1.5rem)
- xl: 32px (2rem)
- 2xl: 48px (3rem)
- 3xl: 64px (4rem)
**Spacing Tokens:**
- `spacing.xs`: 4px - Tight spacing, icon padding
- `spacing.sm`: 8px - Small gaps, compact layouts
- `spacing.md`: 16px - Standard spacing, component padding
- `spacing.lg`: 24px - Section spacing, larger gaps
- `spacing.xl`: 32px - Major section spacing
- `spacing.2xl`: 48px - Page section spacing
- `spacing.3xl`: 64px - Large page sections
**Usage Guidelines:**
- Component padding: md (16px)
- Component margins: lg (24px)
- Section spacing: xl (32px)
- Page margins: 2xl (48px)
- Grid gaps: md (16px)
**Responsive Spacing:**
- Mobile: Reduce spacing by 25% (md becomes 12px)
- Tablet: Standard spacing
- Desktop: Standard spacing
Spacing Types
- Padding: Internal spacing within components
- Margins: External spacing between components
- Gaps: Spacing in grid/flex layouts
- Gutters: Column spacing in grid systems
- Section Spacing: Spacing between major sections
- Component Spacing: Spacing between UI components
Spacing Scale Approaches
- 4px Base: 4, 8, 12, 16, 24, 32, 48, 64px
- 8px Base: 8, 16, 24, 32, 48, 64, 96px
- Fibonacci: 4, 8, 12, 20, 32, 52px
- Custom: Based on design needs
Responsive Considerations
- Mobile: Tighter spacing (reduce by 20-25%)
- Tablet: Standard spacing
- Desktop: Standard or slightly increased spacing
1---2name: spacing-system-designer3description: Creates spacing and sizing systems including margins, padding, gaps, and consistent spacing scales. Defines spacing tokens and usage guidelines for consistent layouts.4---5
6# Spacing System Designer Skill
7
8## Instructions
9
101. Analyze spacing requirements from task
112. Create spacing scale (4px, 8px, 16px base or similar)
123. Define spacing tokens for margins, padding, gaps
134. Specify spacing usage guidelines
145. Consider responsive spacing adjustments
156. Return structured spacing system specifications with:
16 - Spacing scale
17 - Spacing tokens
18 - Usage guidelines
19 - Responsive variations
20
21## Examples
22
23**Input:** "Create spacing system"
24**Output:**
25```markdown
26### Spacing System
27
28**Base Unit:** 4px
29
30**Spacing Scale:**
31- xs: 4px (0.25rem)
32- sm: 8px (0.5rem)
33- md: 16px (1rem)
34- lg: 24px (1.5rem)
35- xl: 32px (2rem)
36- 2xl: 48px (3rem)
37- 3xl: 64px (4rem)
38
39**Spacing Tokens:**
40- `spacing.xs`: 4px - Tight spacing, icon padding
41- `spacing.sm`: 8px - Small gaps, compact layouts
42- `spacing.md`: 16px - Standard spacing, component padding
43- `spacing.lg`: 24px - Section spacing, larger gaps
44- `spacing.xl`: 32px - Major section spacing
45- `spacing.2xl`: 48px - Page section spacing
46- `spacing.3xl`: 64px - Large page sections
47
48**Usage Guidelines:**
49- Component padding: md (16px)
50- Component margins: lg (24px)
51- Section spacing: xl (32px)
52- Page margins: 2xl (48px)
53- Grid gaps: md (16px)
54
55**Responsive Spacing:**
56- Mobile: Reduce spacing by 25% (md becomes 12px)
57- Tablet: Standard spacing
58- Desktop: Standard spacing
59```
60
61## Spacing Types
62
63- **Padding**: Internal spacing within components
64- **Margins**: External spacing between components
65- **Gaps**: Spacing in grid/flex layouts
66- **Gutters**: Column spacing in grid systems
67- **Section Spacing**: Spacing between major sections
68- **Component Spacing**: Spacing between UI components
69
70## Spacing Scale Approaches
71
72- **4px Base**: 4, 8, 12, 16, 24, 32, 48, 64px
73- **8px Base**: 8, 16, 24, 32, 48, 64, 96px
74- **Fibonacci**: 4, 8, 12, 20, 32, 52px
75- **Custom**: Based on design needs
76
77## Responsive Considerations
78
79- **Mobile**: Tighter spacing (reduce by 20-25%)
80- **Tablet**: Standard spacing
81- **Desktop**: Standard or slightly increased spacing
majiayu000