UI Primitives / 15

组件与布局图鉴

从 Divider、Flex、Grid 到 App Shell。每一个原语都给出可视化 Demo、使用边界和可直接编辑的代码。

Divider

分割线

用最轻的视觉信号区分内容组和列表项，避免把每块内容都包进卡片。

响应式

01Design review2h

02New comment3h

03Components published4h

使用原则

TSX / HTML

可直接编辑，切换示例会恢复默认代码

<div className="divide-y divide-slate-200">
  {items.map(item => <article className="py-4" />)}
</div>

AI UI Atlas

Mapping interface systems