6.Design system or headless & Ant Design X-豆酱+梵鹿.pdf

1、Design System or Headless&Ant Design X蚂蚁终端体验科技大会蒋吉麟（豆酱）、李冰钰（梵鹿）豆酱Ant Design Owner梵鹿Ant Design X Owner/01/02/03Design System or Headless Ant Design 6.0 Ant Design X 2.0“Design System 死透了！”“未来属于 Headless！”“让 AI 烧掉一切！”让我们看看 AI 时代下，Ant Design 又做了些什么没错，v6 来了AI 资产当然也不能缺席伴随 Ant Design 6.0，Ant Design X 也进行了

2、全面升级Design System开箱即用的一致性体验Headless通往自由之路好拼，爱拼用就完了Design System快，吗？设计一致性上手快、研发效率高 但 AI 有理解成本功能齐全定制成本高打包体积大文档内容太多 但对 AI 文档越细越好Headless灵活，且快极致灵活随意组合 且 AI 友好打包体积小 甚至内嵌源码无惧样式污染额外的开发成本 但 AI 会帮你写视觉一致性麻烦选择困难 且 AI 会推荐一些莫名其妙的库在 AI 浪潮下，很多问题都有些变化为何 Design System 不能和 headless 一样?功能与正确优先，其他次之我们拿 antd 举个例子不一定需要的功

3、能例：响应式多选响应式多选展示允许 Select 在超出限定宽度时变成省略形式，以满足不折行的美观效果。Overflow-Gzip:2.33kB复杂的交互细节例：提示框入屏提示框在部分内容超出屏幕时，通过计算将提示框移至可见屏幕范围内。Align-Gzip:6.82kB过度“正确”例：数字输入范围数字输入组件设置 max 值后，如果受控设置超出 max 的值，仍然会显示受控值。使用同一套设计系统的任何应用都使用相同的处理逻辑。使用样式表示范围错误更多的运行时检查antd and headless?antdrc-selectrc-tree-selectrc-cascaderrc-imagerc-

4、dialogrc-triggerrc-utilOther Deps早期底层 rc component 更偏向于 headless/02（但是 Design System 似乎在 AI 时代不占优）Ant Design 6.0Ant Design 6.0 Semantic Structure Zero Runtime CSS-in-JS Deprecated IE support React 19 support Default CSS Variables New ComponentsAnt Design 6.0 Semantic Structure一千个人眼中有一千个哈姆雷特div(paddi

5、ng)div(padding)spandiv(padding)divinline-flexinline-blockinline-blockdiv(padding)div(padding)spandiv(padding)divpadding+padding：“好的，现在我为你覆盖 padding”AI 难以感知 DOM 结构与样式所在的位置（人也一样）Semantic Structure使用一套规则来约定组件构成语义化结构定义了一套通用的结构范式，任何一个组件都由这套抽象结构组成。从而使得开发者与 AI 能更容易的覆盖样式。rooticontitlecontentbodyheaderCollap

6、serooticontitlecontentbodyheaderCollapseButtonrooticoncontentrootAlerticonsectiontitlecontent一套不带实现逻辑的结构组合可以适用于各类组件ButtonrooticoncontentrootAlerticonsectiontitlecontent理解“规则怪谈”就能灵活定制与任意样式库有机融合-root 总是最外层，它可以带样式-body 总是伴随 padding 出现-content 不会有间距样式-classNames 里有你要的所有 props-虽然长相功能不