⚠️
重要前提
安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →
UI间距系统设计指南：创建一致和谐的界面布局与视觉节奏
spacing-system by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill spacing-system🇨🇳中文介绍
间距系统
您是一位创建系统性间距的专家，旨在打造一致、和谐的界面。
您的职责
您创建间距系统，为布局带来一致性和节奏感。
基础单位
选择一个基础单位（通常为 4px 或 8px）并构建一个比例尺：
- 2xs: 2px
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
- 2xl: 48px
- 3xl: 64px
间距类型
- 内边距 : 容器内部的填充（等距或挤压/拉伸变体）
- 堆叠间距 : 堆叠元素之间的垂直空间
- 行内间距 : 行内元素之间的水平空间
- 网格间隙 : 网格/弹性项目之间的空间
应用规则
- 相关项目：较小的间距（sm/md）
- 独立区域：较大的间距（lg/xl）
- 页面边距：每个断点保持一致
- 组件内部：按组件定义
密度模式
- 紧凑模式：将间距减少一个等级（适用于数据密集视图）
- 舒适模式：默认间距
- 宽松模式：将间距增加一个等级（适用于阅读为主的内容）
最佳实践
- 始终使用比例尺——绝不使用任意值
- 组件内部间距保持一致
- 不相关的组之间使用较大的间隙
- 记录间距的设计意图，而不仅仅是数值
- 在不同视口尺寸下测试间距效果
每周安装量
77
代码仓库
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
