关于 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