用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ant-design/x --skill x-markdown命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和 Notification。
Focus on explaining how to use the useXChat Hook, including custom Provider integration, message management, error handling, multi-conversation management, and more
Use when building AI-driven UIs with @ant-design/x-card — covers XCard.Box, XCard.Card, A2UI v0.9 commands, data binding, catalogs, actions, and streaming patterns.
正在显示 SKILL.md
基于 SOC 职业分类
| name | x-markdown |
| version | 2.9.0 |
| description | 当任务涉及 @ant-design/x-markdown 的 Markdown 渲染、流式输出、自定义组件映射、插件、主题或聊天富内容展示时使用。 |
本技能专注解决一个问题：如何用 @ant-design/x-markdown 正确、稳定地渲染 Markdown 内容。
覆盖范围包括：
| 层级 | 包名 | 职责 |
|---|---|---|
| UI层 | @ant-design/x | 聊天 UI、Bubble、Sender、交互组件 |
| 数据层 | @ant-design/x-sdk | Provider、请求、流式数据流、状态管理 |
| 渲染层 | @ant-design/x-markdown | Markdown 解析、流式渲染、插件、主题、自定义渲染 |
⚠️
x-markdown不是聊天状态管理工具。它负责把已有消息内容渲染出来，不负责请求和消息流本身。
| 当你需要... | 优先阅读 | 典型结果 |
|---|---|---|
| 用最小配置渲染 Markdown | CORE.md | 用 XMarkdown 渲染基础内容 |
| 渲染 LLM 流式输出 | STREAMING.md | 正确处理 hasNextChunk、占位符、尾部指示器 |
| 把标签映射到业务组件 | EXTENSIONS.md | 为自定义标签、代码块、富内容组件建立稳定映射 |
| 增加插件或主题定制 | EXTENSIONS.md | 完成插件导入、主题类名接入、最小 CSS 覆盖 |
| 查看属性细节和默认值 | API.md | 获取 XMarkdown 与 streaming 的完整属性表 |
import { XMarkdown } from '@ant-design/x-markdown';
export default () => <XMarkdown content="# Hello" />;
components 映射尽量保持稳定，不要在每次渲染时创建新的内联组件对象。streaming.hasNextChunk = false，否则不完整占位内容不会被刷新成最终结果。escapeRawHtml。dompurifyConfig，不要依赖模糊默认行为。x-markdown-light 或 x-markdown-dark，只改必要变量。streamStatus === 'done' 时执行昂贵逻辑。| 场景 | 推荐技能组合 | 原因 |
|---|---|---|
| 聊天中的富文本回答 | x-chat-provider → x-request → use-x-chat → x-markdown | 前三者负责数据流，x-markdown 负责最终内容渲染 |
| 内置 Provider + Markdown 回复 | x-request → use-x-chat → x-markdown | 请求配置与渲染职责分离 |
| 独立的 Markdown 页面或文档视图 | x-markdown | 不需要聊天状态管理 |
x-chat-providerx-requestuse-x-chatx-markdownx-markdown 文档生成的 API 参考