mcpField
A
apply-consistent-spacing

apply-consistent-spacing

github.com/gnurio设计与 UI453175 次安装26 周前更新
代码仓库

关于 apply-consistent-spacing

为 UI 设计提供一致间距评估与规范的设计技能，适用于设计师和界面构建者。它依据元素关系应用间距尺度，并检查分组与留白是否清晰。

主要功能

  1. 01生成系统化间距尺度
  2. 02为元素指定内外边距
  3. 03评估现有间距并判定通过与否
  4. 04依据元素关系调整间距

适用场景

  1. 01统一卡片、按钮和输入框的内边距
  2. 02区分表单字段与不同内容组
  3. 03检查页面是否留有足够空白

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill apply-consistent-spacing

安装后在 Claude Code 中输入/apply-consistent-spacing确认已加载。

详细介绍

技能：应用一致的间距

目的

使用系统化的间距比例营造节奏、归组相关元素并分隔不同区块，同时先留出充足的留白，再按需缩减。

类型

生成式 + 评估式

输入

  • UI 布局或组件结构
  • 内容分组（哪些内容属于一组）
  • 期望的密度（紧凑或宽松）
  • 基准单位（默认：16px）

输出

  • 间距比例规范
  • 各元素的外边距／内边距值
  • 对现有间距的通过／不通过评估

执行的转换

将空间关系映射到系统化的间距比例，各数值之间至少相差 25%，确保分组清晰且留有呼吸空间。

判定标准

通过（间距良好）
  • 使用系统化比例，各数值之间至少相差 25%（12px → 16px → 24px → 32px）
  • 相关元素之间的间距较小（组内为 4-16px）
  • 不相关区块之间的间距较大（组间为 24-64px）
  • 组周围的留白多于组内留白（避免间距含糊不清）
  • 内部内边距一致（卡片、按钮、输入框）
  • 留白营造呼吸感（不铺满整个屏幕宽度）
  • 使用留白而非边框来分隔内容
不通过（间距不佳）
  • 数值随意，没有统一规范（13px、27px、41px）
  • 数值过于接近（差异 <25%，难以区分）
  • 相关元素相距过远（削弱分组效果）
  • 不相关元素相距过近（关系含糊不清）
  • 所有地方的间距都相同（组内间距 = 组间间距）
  • 内容被不必要地拉伸，以填满宽阔画布
  • 留白足以胜任时仍使用边框

间距比例

系统化比例（最小增幅为 25%）

基准：16px（浏览器默认值）

4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px

这些数值的选择依据：

  • 4px → 8px = 增幅 100%（较小间距需要更大的增幅）
  • 8px → 12px = 增幅 50%
  • 12px → 16px = 增幅 33%
  • 16px → 24px = 增幅 50%
  • 24px → 32px = 增幅 33%
  • 32px → 48px = 增幅 50%
  • 48px → 64px = 增幅 33%
  • 64px → 96px = 增幅 50%
常见用法模式
间距用法
4px图标间距、紧凑的内部内边距
8px组件间的小间距、紧凑的按钮内边距
12px输入框内边距、组件内部间距
16px标准间距、卡片内边距
24px区块内部内边距、较大的间距
32px主要区块间隔
48-64px页面区块之间的分隔
96px首屏主视觉区、页面主要分区

接近性原则

  • 距离较近的元素看起来彼此相关
  • 距离较远的元素看起来彼此无关
  • 组周围的留白多于组内留白
  • 用间距体现关系，无需边框

核心原则

1. 先留出过多留白

不要不断增加间距，直到效果看起来还行；应先留出远超需要的间距，再逐步缩减到合适为止。

原因： 元素只获得最低限度的呼吸空间时，虽然看起来「没什么明显问题」，但效果并不好。从充足的留白开始，才能确保最终设计拥有足够的留白。

2. 避免间距含糊不清

确保整个分组周围的留白多于组内留白。

示例 — 表单标签：

  • ❌ 标签 margin-bottom：12px，输入框 margin-bottom：12px（相同 = 含糊不清）
  • ✅ 标签 margin-bottom：4px，输入框 margin-bottom：24px（组内 < 组周围 = 清晰）
3. 不要铺满整个屏幕

即使画布宽达 1200-1400px，也不代表内容就应该铺满整个画布。

  • 只为元素留出恰好所需的空间
  • 如果还有多余空间，就留作空白
  • 即使导航栏宽达 1200px，段落的最大宽度设为 600px 也完全合适
  • 设计小型界面时，缩小画布
4. 留白 > 边框

要分隔元素时，不要使用边框，而应：

  • 增加分组之间的间距
  • 使用不同的背景颜色
  • 使用柔和的投影（比边框更不显眼）

使用的视觉/UX 信号

  1. 邻近性：元素越近，关系越密切
  2. 模糊间距：组内间距小于组间间距
  3. 留白空间：充足的空间让界面更简洁、更精致
  4. 画布利用率：不要拉伸内容来填满画布；按需使用空间

常见错误模式

错误描述修正方法
随意取值这里用 15px，那里用 17px始终使用系统化的比例
分组不清组内间距与组间间距相同显著增大组间间距
间距含糊标签与输入框的间距相同减小组内间距，增大组间间距
依赖边框用边框代替间距增大间隔并移除边框
填满画布将内容不必要地拉伸到 1200px只使用所需空间；让其余部分留白
留白不足只添加刚好不显得难看的空间先留出充足空间，再逐步减少至合适程度
内边距不一致有些按钮用 8px，另一些用 12px选择一个比例值，并在所有地方统一使用

前提条件

  • 按关联关系对内容进行分组
  • 建立视觉层级

依赖项

  • establish-visual-hierarchy（间距强化层级）
  • group-related-elements（邻近性体现关联关系）

Refactoring UI 参考

  • “先留出过多的空白”
  • “建立间距和尺寸系统”（至少按 25% 的幅度递增）
  • “避免间距含糊”
  • “不要填满整个屏幕”
  • “减少边框的使用”
  • “应该通过移除空白来调整，而不是一开始就不留空白”

示例评估

**输入：**表单包含：标题（margin-bottom: 16px）、标签（margin-bottom: 12px）、输入框（margin-bottom: 12px）、下一个标签（margin-top: 12px）

**评估：**失败——间距含糊

  • 标签到输入框：12px
  • 输入框到下一个标签：12px
  • 分组不清——用户无法判断哪个标签对应哪个输入框

建议：

  • 标题 margin-bottom: 24px（分隔不同区块）
  • 标签 margin-bottom: 4px（与输入框紧密相连）
  • 输入框 margin-bottom: 24px（与下一组明确分隔）
  • 结果：组内间距（4px）<< 组间间距（24px）= 关联关系清晰

之前：

Label A
[Input A]
Label B    <- Ambiguous: belongs to A or B?
[Input B]

之后：

Label A
[Input A]

Label B    <- Clearly belongs to B
[Input B]

评论

支持 Markdown