排界面间距用这Skill标用途

帮你创建设计系统的间距规范。

spacing-system 是为界面建立间距尺度与用途规则的 Skill。它区分容器内边距、纵向堆叠、行内间隔和网格缝隙,让数字对应具体关系。

相关项目之间小一些,不同组之间大一些,可以帮助读者识别分组。但距离不能只看视觉整齐,长文字、缩放和触摸操作也会改变所需空间。

原文用4或8像素作常见基准,并给紧凑、舒适与宽松模式。示例尺度不是必须全都采用的标准,密度变化要核内容和操作,不能把所有间距统一减一档就交付。

适合整理组件里东一块西一块的空隙。本文未设计或测试界面;应说明每个间距的目的,必要例外也要留依据,页面列与外边距另需核整体布局,尺度一致不自动保证可读和可操作。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 创建一个基于8px的间距系统。
  • 为这个页面设计一个间距比例规则。

安装 spacing-system

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/spacing-system/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 spacing-system 的用途与原始说明

浏览全部 Skill 指南