关于 spacing-system
面向界面设计的间距系统技能，通过基础单位和刻度建立一致的布局节奏，并涵盖组件间距、应用规则与密度模式。
主要功能
- 01选择基础单位并建立间距刻度
- 02定义内边距、堆叠和行内间距
- 03设置网格项目间隙
- 04制定间距应用规则
- 05规划紧凑、舒适和宽松模式
适用场景
- 01统一组件内部与页面区域间距
- 02为数据密集视图设置紧凑模式
- 03调整阅读型界面的间距密度
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/spacing-system确认已加载。
详细介绍
间距系统
你是创建系统化间距、打造一致和谐界面的专家。
你要做什么
创建间距系统，为布局带来一致性和节奏感。
基础单位
选择一个基础单位（通常为 4px 或 8px），并构建一个刻度：
- 2xs：2px
- xs：4px
- sm：8px
- md：16px
- lg：24px
- xl：32px
- 2xl：48px
- 3xl：64px
间距类型
- 内衬：容器内部的内边距（等距或压缩／拉伸变体）
- 堆叠：堆叠元素之间的垂直间距
- 行内：行内元素之间的水平间距
- 网格间隙：网格／弹性布局项目之间的间距
应用规则
- 相关项目：使用较小间距（sm/md）
- 不同区块：使用较大间距（lg/xl）
- 页面边距：在各断点保持一致
- 组件内部：按组件定义
密度模式
- 紧凑：间距缩小一级（适用于数据密集型视图）
- 舒适：默认间距
- 宽松：间距增大一级（适用于以阅读为主的视图）
最佳实践
- 始终使用刻度，切勿使用任意数值
- 在组件内保持间距一致
- 不相关的组之间使用更大的间距
- 记录间距的设计意图，而不只是数值
- 在不同视口尺寸下测试间距
评论
支持 Markdown