SuperAPI AI 工具集

ux-spacing-layout

通用与其它

查看项目

更新于 10-16 00:21

技能介绍

用途:这是一套流式间距与布局规范技能,基于 Utopia 空间尺度并使用容器查询内联(cqi)单位,覆盖间距令牌、布局模式与视觉节奏,适合在应用 margin、padding、gap 或搭建布局时使用。

主要能力:提供从 --space-3xs 到 --space-3xl 的空间令牌(320px 最小约 4px 至 1240px 最大约 133px),以及用于非对称间距的 one-up 配对令牌(如 --space-s-m、--space-m-l)。提供 u-stack(垂直)与 u-row(水平)布局工具、容器宽度类 .u-container 及 .narrow/.medium/.wide,并给出表单、导航、弹窗等常见布局模式。

使用方式:通过 CSS 变量引用令牌,例如 padding: var(--space-m)、gap: var(--space-s)、margin-block-start: var(--space-xl)。重要限制:cqi 单位要求祖先元素设置 container-type: inline-size,缺少则无法生效。可结合 @container 容器查询在窄容器或宽容器下切换间距。

适用场景:卡片、按钮、表单、导航、模态框等界面组件的间距与布局,以及页面级分区节奏控制。

限制:资料仅说明该技能基于 Utopia 尺度与 cqi 单位,未提供安装命令、价格、平台支持等信息,暂未提供。规范建议避免固定像素值与“魔法数字”,保持间距关系一致。