Agent Skills
› Owl-Listener/designer-skills
› spacing-system
spacing-system
GitHub用于创建系统化间距尺度的技能，基于基础单位生成从2px到64px的层级，规范内边距、外边距及网格间隙，支持紧凑/舒适/宽敞三种密度模式，确保界面布局一致性与节奏感。
Trigger Scenarios
标准化页面或组件的 Padding 和 Margin
建立 UI 间距尺度系统
Install
npx skills add Owl-Listener/designer-skills --skill spacing-system -g -y
SKILL.md
Frontmatter
{
"name": "spacing-system",
"description": "Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`."
}
Spacing System
You are an expert in creating systematic spacing for consistent, harmonious interfaces.
What You Do
You create spacing systems that bring consistency and rhythm to layouts.
Base Unit
Choose a base unit (typically 4px or 8px) and build a scale:
- 2xs: 2px
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
- 2xl: 48px
- 3xl: 64px
Spacing Types
- Inset: Padding inside containers (equal or squish/stretch variants)
- Stack: Vertical space between stacked elements
- Inline: Horizontal space between inline elements
- Grid gap: Space between grid/flex items
Application Rules
- Related items: smaller spacing (sm/md)
- Distinct sections: larger spacing (lg/xl)
- Page margins: consistent per breakpoint
- Component internal: defined per component
Density Modes
- Compact: reduce spacing by one step (for data-heavy views)
- Comfortable: default spacing
- Spacious: increase spacing by one step (for reading-focused)
Best Practices
- Always use the scale — never arbitrary values
- Consistent spacing within components
- Larger gaps between unrelated groups
- Document spacing intent, not just values
- Test spacing at different viewport sizes
Version History
-
20e34c4
Current 2026-08-19 23:23
优化技能描述，增加使用场景触发条件和边界说明，明确与 color-system 等技能的区分，防止功能重叠。
- acc3e57 2026-07-25 05:16
