用途:spacing 处理界面中的间距与密度问题,把“距离”当作分组信号而非装饰。它适用于区域划分已经确定、需要决定间隙与内边距数值的阶段;若问题是什么放在哪里,属于布局,不在此技能范围。单个字形在其框内的微调属于 ui-polish,本技能负责组周围的留白平衡。
主要能力:建立并复用项目统一的间距尺度,所有间隙都取尺度上的步进值;规定容器内边距比其内部间隙高一档;组间间隙至少为组内间隙的 2 倍;在父级使用 gap 而非给每个子元素加 margin;段落间距与行高挂钩;每页只用一个区块间距;把密度做成 token 倍率切换,只影响内边距、行高和控件高度,不改字号与区块间距;对带尾部图标或徽标的控件做 2px 光学修正。
使用方式:先查找项目已有的尺度,如 theme.spacing、Tailwind 的 --spacing、--space-* token、SCSS $space map,或从现有组件中读出隐式尺度,并原样沿用。若项目没有尺度,可引入资料给出的 token 集并只转换当前正在修改的文件。资料给出的默认尺度为 4、8、12、16、24、32、48、64、96 px。输出时先给出 token 再给出用法。
适用场景:组件与列表的间隙、卡片内边距、区块节奏、紧凑模式、带尾部图标控件的对齐等。
限制:资料未提供该技能的具体安装命令、平台支持、收费方式或效果数据;其规则中的例外情况(如严格 8px 网格、全出血子元素、数据表格列对齐、触摸目标下限)需按原文条件处理。