代码、数据与二维码工具

设计间距阶梯计算器

设置基础间距、比例、起始步数和 token 数量,为界面生成清晰的间距阶梯。

优先本地处理无需注册隐私说明 ↗

设置数值以生成间距阶梯。

由 基础值 × 比例^步数 舍入得到。

使用步骤

如何使用

  1. 输入正数基础间距,选择 px 或 rem,并设置大于 1 的比例。
  2. 选择起始步数和 token 数量。
  3. 查看舍入后的数值,然后复制或下载 CSS 自定义属性。

几何 token 阶梯

每个原始 token = 基础值 × 比例^步数。起始步数为 0 时包含基础值,更高步数按比例增长。

透明的舍入规则

px 输出取最近整数,rem 输出保留最多四位小数。CSS 注释中会显示原始公式。

本地 CSS 输出

所有计算都在浏览器中完成,不上传设计数值,也不读取项目文件。

常见问题

你可能还想知道

为什么 px 会舍入?

整数像素更适合许多界面 token。预览和 CSS 注释会说明数值来自几何公式。

起始步数有什么作用?

步数 0 是基础值,从 1 开始会先得到基础值 × 比例,负数步数可以生成更小的值。

它会选择最佳设计系统吗?

不会。它只生成可预测的数学阶梯,比例、步数和命名仍由你决定。