用途：基于 Utopia.fyi 理念建立系统性流体排版与间距，用 CSS clamp() 在两个设计极值（@min 与 @max 视口）之间自动插值，替代大量断点媒体查询。
主要能力：模块化字号比例（如 1.2、1.25、1.333、1.5、1.618）；在最小视口（如 320px）与最大视口（如 1500px）分别定义基础字号与比例，生成 --step--2 至 --step-5 等流体字号令牌；间距调色板采用 T 恤尺码（--space-3xs 至 --space-3xl）与空间对（如 --space-s-m、--space-m-l、--space-2xl-3xl）实现更明显的缩放假；clamp() 形式为 clamp(MIN, PREFERRED, MAX)，PREFERRED 由 base + slope × vi 计算。可与 Tailwind CSS 配置集成，将 step 与 space 映射为 fontSize 和 spacing。
使用方式：访问 https://utopia.fyi/type/calculator/ 配置视口、基础字号、比例与步数，复制生成的 CSS 到 :root；再访问 https://utopia.fyi/space/calculator/ 沿用相同视口宽度，并让基础尺寸与 --step-0 一致，选择空间对后复制到 :root。组件中按语义使用，如 h1 { font-size: var(--step-5); }、.hero { padding-block: var(--space-xl-2xl); }。
适用场景：流体标题与正文、文章排版、卡片、Hero 区块、节间距，以及需要设计-开发共享词汇和比例和谐的响应式系统。
限制：具体兼容性、浏览器支持细节、框架适配完整步骤及收费信息，资料未提供；数值仅为示例，实际需按项目参数生成，不应照搬。