# Prompt (/es/components/prompt)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1174 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

Usa el componente Prompt para mostrar prompts de IA predefinidos que los usuarios pueden copiar al portapapeles o abrir directamente en [Cursor](https://www.cursor.com).

<div id="examples">
  ## Ejemplos [#ejemplos]
</div>

<Prompt description="Genera documentación clara y concisa.">
  Eres un **assistant de redacción técnica**. Escribe documentación clara, precisa y concisa.

  * Utiliza la segunda persona («you») y verbos en voz activa.
  * Comienza los procedimientos con un título orientado a un objetivo.
  * Antes de escribir, haz preguntas aclaratorias sobre los usuarios finales de la documentación, sus objetivos y sus necesidades.
</Prompt>

```mdx title="Basic prompt example"
<Prompt description="Genera documentación clara y concisa.">
Eres un **asistente de redacción técnica**. Escribe documentación clara, precisa y concisa.
- Usa la segunda persona ("tú") y verbos en voz activa.
- Inicia los procedimientos con un encabezado orientado a objetivos.
- Antes de escribir, haz preguntas aclaratorias sobre los usuarios finales de la documentación, sus objetivos y sus necesidades.
</Prompt>
```

<Prompt description="Genera documentación **clara** y *concisa*." 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;]">
  Eres un **asistente de redacción técnica**. Escribe documentación que sea clara, precisa y concisa.

  * Usa la segunda persona ("you") y verbos en voz activa.
  * Comienza los procedimientos con un encabezado orientado al objetivo.
  * Antes de escribir, haz preguntas aclaratorias sobre los usuarios finales de la documentación, sus objetivos y sus necesidades.
</Prompt>

```mdx title="Prompt with multiple properties example"
<Prompt
  description="Generate **clear**, *concise* documentation."
  icon="paperclip"
  iconType="solid"
  actions={["copy", "cursor"]}
>
Eres un **asistente de redacción técnica**. Escribe documentación clara, precisa y concisa.
- Usa la segunda persona ("tú") y verbos activos.
- Inicia los procedimientos con un encabezado orientado a objetivos.
- Antes de escribir, haz preguntas aclaratorias sobre los usuarios finales de la documentación, sus objetivos y sus necesidades.
</Prompt>
```

<div id="properties">
  ## Propiedades [#propiedades]
</div>

<ResponseField name="description" type="string">
  El texto que se muestra en la tarjeta del prompt. Admite formato Markdown.
</ResponseField>

<ResponseField name="children" type="string">
  El contenido de texto del prompt. Es el texto que se copia al portapapeles o se abre en Cursor.
</ResponseField>

<ResponseField name="actions" type="array" default="[&#x22;copy&#x22;]">
  Array de acciones disponibles. Los valores válidos son `"copy"` (copiar al portapapeles) y `"cursor"` (abrir en Cursor).
</ResponseField>

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `tabler` en tu `docs.json`
  * URL de un ícono alojado externamente
  * Ruta a un archivo de ícono en tu proyecto
  * Código SVG envuelto entre llaves

  Para íconos SVG personalizados:

  1. Convierte tu SVG con el [convertidor de SVGR](https://react-svgr.com/playground/).
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo `<svg>...</svg>` del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: `icon={<svg ...> ... </svg>}`.
  5. Ajusta `height` y `width` según sea necesario.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>