SuperAPI AI 工具集

spacing-system

设计与创作

查看项目

更新于 11-03 16:20

技能介绍

用途

Spacing System(间距系统)用于处理界面中的布局节奏、密度与间隙问题。当间距显得随意或不一致,或同一产品需要在不同阅读压力下保持统一间距体系而不拆分为互不相关的尺度时,可使用该技能。其核心主张是:每个间隙都使用同一套 --space-* 尺度,由关系构建构图,而非任意外边距。

主要能力

  • 决策顺序:从 4px 基准阶梯 4/8/12/16/24/32/48/64/96px 与 --space-section: clamp(48px, 32px + 4vw, 96px) 默认值开始;替代的有界尺度需要简报与可观察层级证据。
  • 关系映射:将 attachment、control、task、group、region、chapter 映射到明显不同的层级(层级间大致 ≥1.5×),或记录内容压力例外。
  • 节奏选择:根据内容压力选择节拍式(metronomic)或有意切分式(syncopated)区块节奏,并加以说明。
  • 间距实现:使用 gap 与单向逻辑外边距;对任何任意外边距例外进行说明。
  • 内容决定节奏:将操作性任务映射为紧凑可预测,将编辑/叙事内容映射为留白呼吸感;保留一套系统并说明不同角色。

使用方式

角色映射表(关系 / 共享 token / 紧凑操作节奏 / 长文编辑节奏):

  • attachment:--space-1 (4px);图标/状态到其标签;行内元数据对。
  • control:--space-2/3 (8/12px);标签到控件 / 控件内部;主张到引用 / 紧密证据对。
  • task:--space-4 (16px);重复队列项;相邻段落或证据组。
  • group:--space-5 (24px);任务组分隔;独立发现。
  • region:--space-6/7/8 (32/48/64px);控制台区域分隔;叙事子节或因果转折。
  • chapter:--space-section(流式);主要工作流视图;主要账户过渡。

控制台可以是节拍式的;账户可以在发现、子节与章节边界处放宽。一套词汇,不同关系——而非两套尺度。

不变量与默认值:审计 margin/padding/gap;让邻近关系真实、留白有意;保持一套可解释的词汇。阶梯、clamp、分隔与节奏是依赖简报的默认值;渲染覆盖需记录尺度、映射与权衡。

迁移与诚实审计边界:按关系对每个字面值分类。起始处置:13px→12px(--space-3),17px→16px(--space-4),裸 24px→var(--space-5);仅在可观察层级证据下覆盖。保留 19px 未解决;不要静默取整。唯一散文例外:有记录的后续段落 1em 间距。

使用 assets/spacing-starter.css 作为夹具/起点。没有目标 CSS 夹具时,将审计标记为 PENDING,命名它及下一步动作;绝不要声称残留的离尺度值已消失。阶梯、映射与迁移规则仍然必需。

证据:在描述之前审计来源;将每个值映射到角色。交付一份 Markdown 表格,包含状态、原因、修复、证据与来源,覆盖尺度、离尺度、邻近、节奏与交接。PENDING 命名缺失来源/下一步动作;它阻止该检查,而非占位证明。

节奏映射:命名 attachment、control、task、group、region 与 chapter;展示紧凑/编辑选择而不使用并行尺度。替换、作为可观察例外加以说明,或将每个任意值连同来源与下一步动作留为 PENDING。

权威自检:包含恰好一个带标签的 Authoritative self-check。它确认阶梯/clamp 或有证据支持的覆盖、全部六种关系、上下文选择、迁移与诚实夹具边界。评判推理/证据,而非字面起始值。

交付:交付基础、token 尺度、角色映射、上下文节奏、离尺度审计与一个权威自检。responsive-layout 负责断点重排,而非尺度/邻近/阅读压力;将 --space-* 与证据表交给它。将控件/表单关系发送给 component-states 或 form-ux,不要重新决定其行为。

适用场景

  • 界面需要间距尺度、内容派生节奏或间隙一致性。
  • 布局节奏、密度或间隙显得随意或不一致。
  • 同一产品需要在不同阅读压力下保持统一间距体系。

限制

  • 避免:请求仅为响应式重排或组件状态行为。
  • 排除:不要在不同内容上强加统一节奏。
  • 停止/交接:当内容层级缺失且间距将变得随意时暂停;接收 [design-system-interview, improve-existing-website, tasteroll, web-typography],发送 [responsive-layout, component-states, form-ux]。
  • 输出:与内容层级绑定的 token 化间距尺度与明确的区块节奏策略。
  • 证据:table_with_evidence,包含状态、原因、修复、证据、来源。

参考资料

  • references/decision-records.md — 新颖案例 ADR 规则。
  • assets/spacing-starter.css — 阶梯、布局原语、迁移辅助。
  • 契约(生成):规范细节见 contract.json。