用途 spacing 用于从单一基础单位出发,生成一整套间距刻度,适用于需要统一设计系统间距规范的前端开发与界面设计场景。
主要能力 根据基础单位生成完整的间距刻度,输出形式包括 CSS 自定义属性(CSS custom properties)以及 Tailwind 的间距配置(Tailwind spacing config),并为每一个刻度步骤标注推荐使用场景。
使用方式 通过命令 /spacing [base-unit] 调用,基础单位默认为 4px。
默认生成的刻度示例(基于 4px): --space-1: 4px(紧凑内联间距) --space-2: 8px(默认内联间距、图标间隔) --space-3: 12px(紧凑卡片内边距) --space-4: 16px(标准卡片内边距、表单间隔) --space-5: 20px(舒适的内边距) --space-6: 24px(区块内部的内边距) --space-8: 32px(较大间隔、卡片间距) --space-10: 40px(区块分隔) --space-12: 48px(主要区块的内边距) --space-16: 64px(区块垂直内边距) --space-20: 80px(大型区块内边距) --space-24: 96px(hero 级别的间距) --space-32: 128px(最大间距)
适用场景 适合需要建立或统一间距体系的前端项目、组件库与设计系统,尤其适用于使用 CSS 自定义属性或 Tailwind 的项目。
限制 当前资料仅说明其输出 CSS 自定义属性与 Tailwind 间距配置,并列出上述默认刻度与推荐用途;关于自定义基础单位后的具体换算规则、是否支持其他样式框架、价格、平台支持等信息暂未提供。