# 提示 (/zh/components/prompt)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 734 · updated: 2026-07-30 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

使用 Prompt 组件来显示预构建的 AI 提示，用户可以将其复制到剪贴板，或直接在 [Cursor](https://www.cursor.com) 中打开。

<div id="examples">
  ## 示例 [#示例]
</div>

<Prompt description="生成清晰、简洁的说明。">
  你是一名**技术写作 AI 助手**。撰写清晰、准确且简洁的文档。

  * 使用第二人称（"you"）和主动语态动词。
  * 以目标导向的标题开始操作步骤。
  * 在写作前，先就文档的最终用户、他们的目标和需求提出澄清性问题。
</Prompt>

```mdx title="Basic prompt example"
<Prompt description="生成清晰、简洁的文档。">
你是一个**技术写作助手**。编写清晰、准确且简洁的文档。
- 使用第二人称("你")和主动动词。
- 以面向目标的标题开始操作步骤。
- 在编写之前,询问有关文档最终用户、他们的目标和需求的明确问题。
</Prompt>
```

<Prompt description="生成**清晰**、*简洁*的文档。" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M19.5 12.0001V13.5001C19.5 17.6422 16.1421 21.0001 12 21.0001C7.85786 21.0001 4.5 17.6422 4.5 13.5001V8C4.5 5.23858 6.73858 3 9.5 3C12.2614 3 14.5 5.23858 14.5 8V13.5C14.5 14.8807 13.3807 16 12 16C10.6193 16 9.5 14.8807 9.5 13.5V9.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" actions="[&#x22;copy&#x22;, &#x22;cursor&#x22;]">
  你是一名**技术写作助手**。请撰写清晰、准确且简洁的文档。

  * 使用第二人称（"you"）和主动语态。
  * 以目标导向的标题开始编写步骤。
  * 在动笔之前，先询问并澄清文档终端用户是谁、他们的目标是什么以及他们有哪些需求。
</Prompt>

```mdx title="Prompt with multiple properties example"
<Prompt
  description="Generate **clear**, *concise* documentation."
  icon="paperclip"
  iconType="solid"
  actions={["copy", "cursor"]}
>
你是一位**技术写作助手**。编写清晰、准确且简洁的文档。
- 使用第二人称（"你"）和主动语态动词。
- 以目标导向的标题开始操作步骤。
- 在编写之前,询问有关文档最终用户、他们的目标和需求的澄清性问题。
</Prompt>
```

<div id="properties">
  ## 属性 [#属性]
</div>

<ResponseField name="description" type="string">
  显示在提示卡片上的文本。支持 Markdown 格式。
</ResponseField>

<ResponseField name="children" type="string">
  提示的文本内容。此文本会被复制到剪贴板，或在 Cursor 中打开。
</ResponseField>

<ResponseField name="actions" type="array" default="[&#x22;copy&#x22;]">
  可用操作的数组。有效取值为 `"copy"`（复制到剪贴板）和 `"cursor"`（在 Cursor 中打开）。
</ResponseField>

<ResponseField name="icon" type="string">
  要显示的图标。

  可选值：

  * [Font Awesome](https://fontawesome.com/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`)
  * [Lucide](https://lucide.dev/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`)
  * [Tabler](https://tabler.io/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`)
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径
  * 用花括号包裹的 SVG 代码

  对于自定义 SVG 图标：

  1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 `<svg>...</svg>` 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：`icon={<svg ...> ... </svg>}`。
  5. 根据需要调整 `height` 和 `width`。
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时生效。

  可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>