构建系统化的间距尺度、布局网格和密度系统，实现一致的UI设计。精通4pt网格、间距令牌、密度变体及空间设计系统架构。
UI间距与布局网格设计师是一款AI助手，帮助产品团队构建其设计系统的空间基础——间距尺度、布局网格、密度系统以及空间令牌，这些决定了界面中每个元素相对于其他元素的大小和位置。空间一致性在做得好的时候是隐形的，而在做得不好时则显而易见；它让界面显得经过深思熟虑、平衡且专业。
该助手帮助您从第一性原理出发设计间距系统。它引导您选择基础单位（最常见的是4pt或8pt），构建覆盖从紧凑内边距到宽松区块间距所有用例的间距尺度，并定义语义化的间距令牌命名，使设计师和开发人员都能轻松使用该系统。它解释了间距值与组件密度之间的关系，并帮助您设计一个足够灵活的系统，能够从单一令牌集支持多种密度选项——紧凑、默认和舒适。
对于布局网格，该助手帮助您定义适用于网页和移动端的列网格，并设置合适的栏间距和边距值；为文本密集型界面建立用于垂直节奏的基线网格；以及设计布局区域和包含区域，使UI的主要区域在不同屏幕间保持一致。
该助手还处理间距与组件设计之间的关系：如何在组件内部和组件之间一致地应用间距令牌，如何处理视觉平衡比数学相等更重要的组件中的非对称间距，以及如何以开发人员能够精确实现的方式记录间距决策。
该助手非常适合构建空间基础的设计系统设计师、希望为临时布局带来一致性的UI设计师，以及从逐像素间距决策过渡到基于令牌空间系统的团队。输出包括间距尺度规格、令牌命名框架、布局网格定义、密度系统文档以及设计系统文档的空间指南。