Ant Design X

Ant Design X 是Ant Design团队推出的AI界面解决方案，基于RICH设计范式（角色、意图、会话、混合界面），延续成熟的Ant Design设计语言，面向AI产品开发者、界面设计师、前端工程师等群体，提供AGI混合界面（Hybrid-UI）搭建能力。平台内置通用图表库、AI意图识别组件、多场景界面模板三大核心功能，支持开发者快速构建Web独立式AI应用、Web助手式悬浮交互模块、Web嵌入式AI功能组件等不同形态的AI产品，帮助团队降低AI界面开发成本，统一交互设计规范，提升人机交互的效率与使用体验，目前已在蚂蚁集团内部多款AI产品中经过实践迭代。

主要功能

• 混合界面组件：平台提供适配AGI场景的混合界面组件库，包含会话输入框、流式内容输出容器、多模态结果展示模块等标准化组件，开发者可直接引入组件代码，根据业务需求调整配置参数，无需从零搭建基础交互结构，即可快速实现会话式AI界面的基础交互逻辑，同时组件默认遵循Ant Design设计规范，可保障不同产品界面风格的一致性。
• 通用图表库：内置适配AI数据展示需求的通用图表库，支持折线图、柱状图、热力图、关系图谱等多种图表类型，开发者调用对应组件时仅需传入AI生成的结构化数据，设置维度、指标等基础参数，即可自动生成可视化图表，图表支持交互筛选、数据下钻、自适应布局等能力，满足AI分析结果、数据报告等场景的展示需求。
• AI意图处理模块：提供AI意图识别与表达相关的处理模块，内置常用用户意图分类、指令解析规则、结果格式化逻辑，开发者可将模块接入现有AI服务链路，自动对用户输入的自然语言指令进行初步解析，匹配对应功能节点，同时支持自定义意图规则，适配不同垂直领域AI产品的业务逻辑需求。
• 多场景模板库：覆盖Web独立式AI应用、Web助手式交互模块、Web嵌入式AI功能三大场景的模板资源，每个模板包含完整的界面结构、交互逻辑示例代码，开发者可直接下载对应模板，替换品牌标识、对接自身AI服务接口，即可快速生成可上线的AI界面原型，缩短产品从需求到落地的周期。
• 设计规范指南：提供完整的AI界面设计规范文档，包含角色形象设计标准、会话交互流程规范、多模态内容排版规则、响应式适配要求等内容，设计师可参考规范开展AI产品界面设计工作，确保产品交互逻辑符合用户使用习惯，同时与Ant Design体系下的其他产品设计语言保持统一。
• 自定义配置能力：支持开发者对组件样式、交互逻辑、功能模块进行灵活配置，可通过修改配置项调整组件的颜色、尺寸、交互触发方式，也可基于现有组件进行二次开发，扩展符合自身业务需求的专属功能，适配不同行业、不同风格的AI产品定制化需求。

怎么使用

1. 第一步，访问Ant Design X官方网站，点击导航栏中的「文档」入口，先通读设计范式、核心概念相关介绍，了解平台的整体设计逻辑与适用场景，明确自身产品需求是否匹配平台能力。第二步，根据自身产品的形态，在「模板」板块筛选对应的场景模板，查看模板的演示效果、功能说明，确认符合需求后下载模板的源码文件到本地。第三步，查看「组件」板块的详细开发文档，找到需要用到的组件对应的参数说明、调用示例，按照文档指引在项目中引入对应组件，完成基础的依赖安装与环境配置。第四步，根据业务需求调整组件的配置参数，修改界面的品牌样式，将组件与自身的AI服务接口进行对接，调试意图识别、内容输出、数据展示等核心功能的运行效果。第五步，完成开发调试后，参考官方提供的适配规范，对界面进行多端响应式适配测试，确认无误后即可将开发完成的AI界面部署上线投入使用。

适合什么人群

• AI产品开发者（搭建AI应用界面）
• UI/UX设计师（制定AI产品设计规范）
• 前端工程师（开发AI交互组件）
• 产品经理（规划AI产品交互流程）
• 企业技术团队（统一内部AI产品设计体系）
• 独立开发者（快速开发个人AI工具）

用 Ant Design X 快速搭建AI对话混合界面原型

你可以直接打开 Ant Design X 中文官网的「组件预览」板块，无需提前下载资源就能在线体验所有组件的实际效果，也能跳转对应GitHub仓库下载完整资源包。先在左侧组件栏找到会话气泡、AI输入框、流式输出卡片等AI专属组件，按需拖拽或复制对应代码片段到你的前端项目里，再搭配Ant Design原有组件拼接侧边栏、功能表单模块，就能快速生成带多轮对话、内容联动的混合界面原型，不用从零开始写基础UI逻辑。

整个过程不需要额外适配设计规范，所有组件的配色、交互都和Ant Design成熟体系保持统一，做完的原型可以直接导出给开发团队复用，也能直接导入Figma等设计工具调整细节，最终产出的界面完全符合AI产品的交互习惯，不会出现普通UI库适配AI场景的违和感。

套用官方模板生成AI产品落地页面

进入官网的「模板中心」板块，就能看到官方预设的智能客服、AI写作工作台、多模态分析面板等现成模板，覆盖绝大多数常见AI产品的界面场景。你只需要根据自己的项目需求选择对应模板，下载模板的设计源文件或前端工程代码，替换掉模板里的示例文案、品牌色和业务模块，就能快速生成可直接上线使用的AI产品落地页面，省去了从零梳理AI界面交互逻辑、对齐设计规范的时间。

所有模板都经过官方团队的可用性测试，自带流式输出、会话记忆、角色状态切换等AI场景专属的交互逻辑，不需要额外调试基础交互问题，你只需要补充自己的业务接口对接逻辑，就能快速完成项目的前端部分开发。

开始使用 Ant Design X

你不需要注册登录任何账号，直接访问官方中文站点就能浏览所有文档、下载组件和模板资源，所有核心功能、组件、模板、设计文档目前全部免费开放，没有功能使用限制，也无需支付商用授权费用，个人和企业都可以直接将资源用于商业或非商业项目，后续如果推出增值服务相关内容，官方会第一时间在官网公示，具体规则始终以官网最新说明为准。

新手入门建议先从官方提供的快速上手教程开始，先跑通基础的AI对话Demo，再根据自己的身份选择对应方向的内容学习：设计师可以优先看设计规范板块对齐RICH设计范式，前端工程师可以直接参考组件的代码示例快速接入现有项目，遇到问题也可以通过官网公示的官方反馈渠道提交需求获取支持。

编辑点评

这是头部设计体系团队推出的AI界面专属解决方案，核心优势在于依托成熟的设计语言体系，解决了当前AI产品界面交互不统一、开发成本高、体验参差不齐的行业普遍问题。不同于普通的组件库，它从设计范式层面定义了AI界面的核心逻辑，围绕角色、意图、会话、混合界面四个维度搭建了完整的框架，既保留了原有设计体系的一致性，又针对性适配了AGI产品的交互特性。平台提供的组件和模板都经过了大型互联网企业内部海量AI产品的实践验证，实用性较强，开发者不需要再从零摸索AI界面的交互逻辑和开发方案，可直接复用经过验证的成熟资源。对于已经在使用对应设计体系的团队来说，接入这个解决方案的成本更低，能够快速实现现有产品的AI功能升级，同时保持整体产品体验的统一，适合需要搭建AI界面、又希望控制开发成本、保障交互体验的团队使用。

价格与免费额度

Ant Design X当前所有核心功能、组件、模板、设计文档均对所有用户免费开放，无功能使用限制、无商用授权费用，企业和个人开发者均可直接下载使用相关资源，用于商业或非商业项目。平台暂未推出付费版本，后续若推出增值服务会在官网公示相关信息，建议有AI界面开发需求的团队可先使用现有免费资源开展开发工作，若有定制化需求可通过官方反馈渠道提交建议。

优点与不足

能帮你做的 8 件事

1. 01混合界面组件
2. 02通用图表库
3. 03AI意图处理模块
4. 04多场景模板库
5. 05AI界面设计场景的常用方案
6. 06组件库场景的常用方案
7. 07AI产品开发者（搭建AI应用界面）的日常效率工具
8. 08零成本体验完整核心功能

更新历史

• 2026.06.14Ant Design X 收录进 Toolifai 目录
• 页面资料核验与信息更新

常见问题