跳转到使用指南
Streamdown作者 vercel

Streamdown Skill.

渲染包含图表与代码的流式 Markdown,并明确控制内容的呈现与交互。

  • 流式 Markdown
  • React
源文件解读 · streamdownSKILL.md
任务 渲染包含图表与代码的流式 Markdown,并明确控制内容的呈现与交互。 产出 连接到应用 Markdown 内容的 Streamdown 渲染器。 开始前的准备 先明确 React 应用的消息格式、Tailwind 版本和所需 Markdown 功能。在接入当前回答的流式状态前,选定插件与内容控制方式。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

渲染包含图表与代码的流式 Markdown,并明确控制内容的呈现与交互

为 AI 回答配置 Streamdown,支持语法高亮、Mermaid、数学公式和中日韩文本,并设置 Tailwind 与内容安全控制。

基于来源的工作流并非执行基准测试

工作方法

Streamdown 帮助智能体接入一款面向渐进式内容的 React Markdown 渲染器。它涵盖流式与静态模式、代码高亮、图表、数学符号及中日韩文本。这个 Skill 也说明了渲染内容的控制方式,包括复制操作、链接和自定义元素处理。

它的实际价值在于容易忽略的接入细节。源文档特别说明了 Tailwind 对包文件的扫描、数学公式所需的 KaTeX 样式,以及流式光标与 isAnimating 标志的关系。可选插件应根据界面真正需要呈现的内容添加。

预期交付物

  • 连接到应用 Markdown 内容的 Streamdown 渲染器。
  • 与已安装包匹配的插件及 Tailwind 配置。
  • 对链接确认、允许的元素和交互控件作出的明确设置。
查看示例简报

从简报到审查

  1. 01
    选择所需内容能力

    确定回答是否需要代码、Mermaid、数学公式或中日韩文本支持。逐步输出的回答使用流式模式,完整文档使用静态模式。

  2. 02
    配置渲染与样式

    安装所选包,并将其分发文件纳入 Tailwind 扫描。Tailwind v4 使用 @source 指令;v3 在配置中使用 content 条目。只添加已安装插件的路径。使用数学公式时导入 KaTeX CSS,再根据当前消息结构接入渲染器。

  3. 03
    检查流式表现与安全控制

    为当前回答设置动画状态,检查自定义 HTML、URL 处理与链接确认。同时检查未完成回答和最终完整内容。

02 适用场景

适合什么场景

先明确 React 应用的消息格式、Tailwind 版本和所需 Markdown 功能。在接入当前回答的流式状态前,选定插件与内容控制方式。

适合的场景

  • 逐步输出的回答AI 聊天界面在 token 陆续到达时渲染格式化回答。
  • 格式化文档React 文档界面需要 Markdown,并按需支持图表或数学公式。

需要检查的限制

  • 后端由应用负责应用仍需负责自身的 AI 接口与消息生命周期。
  • 版本兼容性文档示例需根据应用实际安装的 SDK 版本调整。
  • 接入验证插件样式与内容控制需要在目标应用中验证。

请提供这些输入

  • Markdown 内容需要渲染的数据流或完整 Markdown 字符串。
  • 选定的依赖所选插件及已安装的 Tailwind 版本。
  • 内容控制要求项目对于链接、HTML 和下载控件的要求。

03 关键决策

影响结果的关键选择

  1. 两种渲染模式

    静态与流式模式共用同一套渲染器接入。

  2. 按需选择插件

    可以选择所需内容能力,无需启用每一个可选插件。

  3. 具体的配置检查

    文档中的配置检查针对样式缺失、数学公式和流式光标问题。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

需要渲染的数据流或完整 Markdown 字符串。

上游源文件
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求;这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
在我们的 React 应用中,使用 streamdown 实现助手回答区域。调整任何示例前,先检查已安装的 AI SDK 和 Tailwind 版本。我们需要代码高亮与 Mermaid 图表,本轮不需要数学公式插件。配置包文件扫描,保留现有主题,并让流式指示器只作用于正在输出的回答。保持链接确认功能开启。预览未完成的 Markdown、完整图表和长代码块,然后报告配置改动及尚未测试的控件。

检查结果

根据以下可观察标准检查实际输出。

  • 已包含所选插件的样式,且没有未安装插件的路径。
  • 光标只在预期动画状态下出现。
  • 对于完整与部分输出的内容,链接、代码控件及图表均表现正确。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
vercel
技能文件
SKILL.md
许可证
Apache-2.0
已审查的快照
2026-11-02 · 7dcabc64df94
编辑来源摘要
渲染包含图表与代码的流式 Markdown,并明确控制内容的呈现与交互。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

能渲染普通文档吗?

可以。源文档包含静态模式,用于文档或博客等完整 Markdown 内容。

为什么没有显示光标?

文档中的配置同时要求设置光标样式,并将 isAnimating 设为 true。

安装数学公式支持后,配置就完成了吗?

源文档还要求引入 KaTeX 样式表。默认公式处理使用双美元符号写法,以避免与货币符号冲突。

为什么回答还在输出时复制按钮不可用?

文档中的控件会在 isAnimating 为 true 时禁用复制。只为当前正在流式输出的回答设置此标志,并在回答结束时清除;否则已完成的消息可能仍保留流式状态。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md