mcpField
G
group-related-elements

group-related-elements

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

关于 group-related-elements

用于通过间距组织界面元素的设计技能，面向布局设计与评估。它依据接近原则判断分组是否清晰，并给出间距调整建议。

主要功能

  1. 01评估元素分组
  2. 02建议组内与组间间距
  3. 03按接近原则建立视觉层级

适用场景

  1. 01调整表单标签与输入框间距
  2. 02区分卡片、列表项和按钮组
  3. 03改善页面各区段的分隔

安装

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

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill group-related-elements

安装后在 Claude Code 中输入/group-related-elements确认已加载。

详细介绍

技能：对相关元素进行分组

目的

利用邻近关系和间距，在视觉上将相关元素归为一组，并将不相关的元素分开。

类型

生成 + 评估

输入

  • 元素清单
  • 关系映射（哪些元素属于一组）
  • 元素之间当前的间距

输出

  • 用于体现关系的间距建议
  • 对当前分组方式的通过/不通过评估

执行的转换

调整间距，使同一组内的元素比不同组之间的元素更靠近，以运用格式塔邻近原则。

判定标准

通过（分组良好）
  • 相关元素之间的间距较小（8-16px）
  • 不相关的组之间间距较大（24-48px）
  • 表单标签靠近对应的输入框（4-8px）
  • 各个部分之间有清晰的分隔
  • 空间层级：组件内部最紧凑，组件之间更宽松，各部分之间最宽松
不通过（分组不佳）
  • 所有位置的间距都相同
  • 标签离输入框太远
  • 相关元素在视觉上彼此分离
  • 不相关的元素距离太近
  • 用边框代替间距来分组

邻近原则

距离较近的元素会被认为比距离较远的元素关系更密切。

间距层级
Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px

常见分组模式

模式结构间距
表单字段标签 → 输入框间隔 4-8px，之后留 16-24px
卡片标题 → 内容 → 页脚内边距 16-24px
列表项项目 1 / 项目 2 / 项目 3项目之间 8-12px
按钮组主要按钮 + 次要按钮间隔 8-12px
各部分部分 A（间距）部分 B之间留 48-64px

常见失败模式

问题描述修正方法
大分隔所有位置的间距都相同缩小组内间距，增大组间间距
标签漂移标签距离输入框 20px 以上缩小到 4-8px
部分挤在一起各部分之间几乎没有间隔在主要部分之间增加至少 48px 的间距
依赖边框所有元素都加上边框用间距代替边框
卡片挤堆卡片彼此相贴在卡片之间增加 16-24px 的间距

前置条件

  • 已定义间距系统
  • 内容已按逻辑分组

依赖项

  • apply-consistent-spacing（使用间距刻度）

Refactoring UI 参考

  • “将相关信息归为一组”
  • “使用留白建立关系”
  • “邻近性胜过相似性”

示例评估

**输入：**包含以下元素的表单：标题（24px 外边距）、标签（8px 外边距）、输入框、标签（8px）、输入框、部分标题（16px 外边距）、标签（8px）、输入框

**评估：**部分通过

  • 未指定标签与输入框之间的间距
  • 部分标题距离上一部分太近
  • 统一使用 8px 间距，但未形成层级

建议：

  • 标签与输入框之间：4px（紧密关联）
  • 输入框组之后：24px
  • 部分标题的上外边距：48px（明确分隔）
  • 部分内部：字段之间留 16px

评论

支持 Markdown