SuperAPI AI 工具集

harmonize-whitespace

通用与其它

查看项目

更新于 10-15 22:19

技能介绍

用途:将界面所有空间值(padding、margin、gap、尺寸、定位偏移)统一到严格的 4pt/8pt 网格,所有间距为 4 的倍数,主要间距优先取 8 的倍数。适合间距显得不协调、不一致、拥挤或失衡时使用。

主要能力:在项目根定义一套间距 token(如 --space-1 至 --space-24,分别对应 4px 到 96px),并按组件类型给出推荐内边距与间距(按钮、输入框、卡片、弹窗、页面留白、图标与文字间距、表单堆叠、卡片网格、章节堆叠等);同时给出字号与行高的网格化建议、常见反模式修正、圆角 token、响应式缩放与交付前检查清单。

使用方式:按推荐 token 编写 CSS 变量;Tailwind 默认间距刻度已基于 4pt,可直接使用 p-1、m-2、gap-4 等类,禁止使用 p-[13px]、mt-[22px]、gap-[7px] 这类任意值。响应式缩放时保持整步跳变,例如移动端 16px、平板 32px、桌面 64px,不要在 16px 与 20px 间微调。

限制:圆角不强制在间距网格上,但应使用一致的圆角 token;行高需在其字号下可解析为 4 的倍数;审计现有界面时逐一检查 padding、margin、gap、偏移与宽高是否为 4 的倍数。与 frontend-design 技能兼容,可同时应用:本技能管间距,后者管布局构成、排版与动效。若资料未提供特定项目的具体实现细节,以所列 token 与规则为准。