关于 spatial-rhythm
用于布局设计的空间设计 Skill，围绕间距、密度、节奏和留白提供一致的设计原则，帮助团队使视觉结构贴合内容与使用场景。
主要功能
- 01采用一致的间距尺度
- 02用距离表达元素关系
- 03按场景调整信息密度
- 04让节奏匹配内容
- 05将留白作为设计材料
适用场景
- 01为产品制定间距规则
- 02调整数据密集界面的密度
- 03设计更舒展的内容布局
- 04改善列表和表格的分组
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/spatial-rhythm确认已加载。
详细介绍
空间节奏
空间不是剩下的空白，而是主动的设计素材。
使用方法
/spatial-rhythm将空间设计约束应用于此对话。
约束
间距系统
- MUST 使用一致的间距比例（4、8、16、24、32、48、64 或类似数值）
- MUST 利用邻近关系表示关联：相关内容靠近，无关内容远离
- MUST 确保外边距根据内容比例留出呼吸空间
- NEVER 使用随意的间距值。不在比例中的值就不应该存在。
密度规则
- MUST 根据使用场景匹配密度：数据工具可以紧凑，消费类产品应留有呼吸空间
- 适合高密度的场景：用户需要比较数据、速度很重要、用户经验丰富、使用时间较长
- 适合低密度的场景：内容供人阅读（而非扫描）、用户是新手、专注很重要
- NEVER 对所有场景都采用同一种密度理念。设置页面和营销页面应有不同的观感。
节奏
- 规则的节奏（间距均匀、尺寸一致）让人感觉井然有序。适用于数据、表格和列表。
- 切分的节奏（大体规则，间或有意打破）让人感觉富有动感。适用于编辑内容和营销内容。
- MUST 确保节奏与内容的活力相匹配。节奏不规则的待办应用会令人困惑。
留白
- 宽裕的边距传递出自信（“我们相信内容本身就能表达清楚”）
- MUST 确保在大多数设计精良的产品中，留白占整体布局面积的 40-60%
- NEVER 将留白视为浪费空间。留白能分隔、分组、强调，并留出呼吸空间。
反模式
- 间距值看似相近却不一致（15px 旁边是 16px）
- 为了“填满空间”而塞满内容，不给内容留出呼吸空间
- 不考虑元素间的关系，在所有元素之间使用相同的间距
评论
支持 Markdown