Design system or headless & Ant Design X
如果无法正常显示，请先停止浏览器的去广告插件。
1. Design System or Headless
&
Ant Design X
蒋吉麟（豆酱）、李冰钰（梵鹿）
蚂蚁终端体验科技大会
2. 豆酱
Ant Design Owner
梵鹿
Ant Design X Owner
3. /01 Design System or Headless
“Design System 死透了！”
“未来属于 Headless！”
“让 AI 烧掉一切！”
/02 Ant Design 6.0
让我们看看 AI 时代下，
Ant Design 又做了些什么
没错，v6 来了
/03 Ant Design X 2.0
AI 资产当然也不能缺席
伴随 Ant Design 6.0，
Ant Design X 也进行了全面
升级
4. Design SystemHeadless
开箱即用的一致性体验通往自由之路
用就完了
好拼，爱拼
5. Design SystemHeadless
快，吗？灵活，且快
✅ 设计一致性
✅ 极致灵活随意组合 且 AI 友好
上手快、研发效率高 但 AI 有理解成本打包体积小 甚至内嵌源码
功能齐全无惧样式污染
🚨 定制成本高
🚨 额外的开发成本 但 AI 会帮你写
打包体积大视觉一致性麻烦
文档内容太多 但对 AI 文档越细越好选择困难 且 AI 会推荐一些莫名其妙的库
在 AI 浪潮下，很多问题都有些变化
6. 为何 Design System 不能和 headless 一样?
功能与正确优先，其他次之
我们拿 antd 举个例子
7. 不一定需要的功能
例：响应式多选
响应式多选展示允许 Select 在超出
限定宽度时变成省略形式，以满足
不折行的美观效果。
Over ow - Gzip: 2.33kB
8. 复杂的交互细节
例：提示框入屏
提示框在部分内容超出屏幕时，通
过计算将提示框移至可见屏幕范围
内。
Align - Gzip: 6.82kB
9. 过度“正确”
例：数字输入范围
数字输入组件设置 max 值后，如果
受控设置超出 max 的值，仍然会显
示受控值。
使用同一套设计系统的任何应用都
使用相同的处理逻辑。
使用样式表示范围错误
更多的运行时检查
10. antd and headless?
antd
rc-tree-select
rc-select
rc-cascader
rc-image
rc-dialog
rc-trigger
rc-util
早期底层 rc component 更偏向于 headless
Other Deps
11. Ant Design 6.0
（但是 Design System 似乎在 AI 时代不占优）
/02
12. 🧊 Zero Runtime CSS-in-JS
Noti
🎨 Default CSS Variables
⚛ React 19 support
Image cover support position
Copy-able using native realization
a11y enhancement
useToken can get css variables
Style support auto pre
Ant Design 6.0
🌐 Deprecated IE support
More logical position
Deprecated more legacy API
Refactor Button Style for bundle size
🧩 New Components
Color related props support semantic naming
🧅 Semantic Structure
Form.useForm support dynamic naming
13. Ant Design 6.0
🧅 Semantic Structure
14. 一千个人眼中有一千个哈姆雷特
div(padding)
inline- ex
div(padding)div
spandiv(padding)
inline-blockinline-block
15. 🤖：“好的，现在我为你覆盖 padding”
div(padding)
div
div(padding)
span
div(padding)
padding + padding
AI 难以感知 DOM 结构与样式所在的位置
（人也一样）
16. root
header
Semantic Structure
使用一套规则来约定组件构成
icon
title
body
语义化结构定义了一套通用的结构
范式，任何一个组件都由这套抽象
结构组成。从而使得开发者与 AI 能
content
更容易的覆盖样式。
Collapse
17. 一套不带实现逻辑的结构组合可以适用于各类组件
root
root
icon
content
Button
root
section
icon
title
header
icon
title
body
content
content
Alert
Collapse
18. root
icon
content
理解“规则怪谈”就能灵活定制
与任意样式库有机融合
Button
- root 总是最外层，它可以带样式
root
- body 总是伴随 padding 出现
section
icon
title
content
Alert
- content 不会有间距样式
- classNames 里有你要的所有 props
- 虽然长相功能不同，但是它们是相似的
- ……
19.
20. if typeif typeif type
primarydefaultdashed
changechangechange
backgroundcolorborder
代码太长不看：“我要根据按钮属性定制不同的样式”
21. 配合 Design Token 与 Semantic Structure
AI 也能理解 Design System
22. Ant Design X
🎉 Ant Design X 2.0 已正式发布 🎉
/03
23. Ant Design X
🧱
⛏
🏢
和大家一起使用Ant Design X 2.0 搭建 一个 完整的AI应用
24.
25. Ant Design X
/01/02/03
@ant-design/x@ant-design/x-markdown@ant-design/x-sdk
26. 那么现在，🧱 可以开工了
27. Ant Design X
X
X-SDK
Bubble.List
如何快速的搭建一个与模型对话页面？
useXChat
Sender
28. Ant Design X
X
X-SDK
Messages
X-Markdown
Latex
确实可以和模型交互了，希望页面能更丰富！
model
LLM
useXChat
Bubble.ListMermaid
XMarkdownAntv
Hightlightcode
onRequest
Card
Sender
29. X
X-Markdown
X-SDK
多个模型进行对话，可切换同时保持会话状态！
Think
Content
Latex
Messages
LLM
LLM
model
useXChat
onReload
onRequest
Bubble.List
Actions
Sender
LLM
Status
Mermaid
XMarkdown
Antv
Hightlightcode
Card
30. X
conversations
X-SDK
Conversations
X-Markdown
搭建了几个agent，可以接入吗？
useXConversations
Agent
LLM
Agent
LLM
Agent
LLM
model
model
Messages
Key
useXChat
onReload
onRequest
Think
Bubble.List
Actions
Sender
Status
Content
Latex
Mermaid
XMarkdown
Antv
Hightlightcode
Card
31. X
conversations
X-SDK
useXConversations
Agent
Agent
Agent
model
Messages
Key
useXChat
provider
onReload
onRequest
Conversations
Think
Bubble.List
Actions
Sender
ChatProvider
Status
X-Markdown
Latex
Content
Mermaid
XMarkdown
Antv
Hightlightcode
Card
32. Ant Design X 2.0还有什么🤔？
33. @ant-design/x · React AG UI 库
通用
唤醒
表达
确认
反馈
Bubble 对话气泡Welcome 欢迎Attachments 输入附件 ThoughtChain 思维链Actions 操作列
ConversationsPrompts 提示集Sender 输入框Think 思维链FileCard 文件卡片
Suggestion 快捷指令Sources 来源引用
管理对话
配置
主题定制
无障碍访问
34. @ant-desgin/x-markdown · 流式友好的AI生成内容的富媒体渲染工具
/01 渲染性能
• 每秒钟解析markdown的次数：46107
• 平均吞吐量（单位为每秒兆字节）：10MB/S
• 解析时长：4.3us~10.3ms
/02 扩展能力
• 内置插件：Latex、HighlightCode、Mermaid
• 自定义插件/组件
/03 可控制渲染
字符串->解析标记 -> HTML->渲染
/04 流式友好
• 渲染一致性
• 格式识别渲染
• 可监控的渲染状态 • 可配置的动画
35. @ant-desgin/x-sdk · 运行时引擎
会话管理（多会话并存）请求处理
会话数据管理流数据处理
模型/Agent支持
localloading
successerror
updating
abort
状态监控与控制
36. 欢迎 👷 和 🤖 使用Ant Design & Ant Design X 搭建应用