# Plantillas de contenido de documentación (/es/guides/content-templates)

<!-- agent-signals: reading_time_min: 7 · est_tokens: 2830 · updated: 2026-07-30 -->

Utiliza estas plantillas como punto de partida para crear documentación. Personaliza las plantillas para tu documentación y tu audiencia.

1. Copia la plantilla que se corresponda con tu tipo de contenido.
2. Reemplaza los marcadores de posición y el contenido de ejemplo con tu contenido real.
3. Ajusta las secciones según sea necesario.
4. Elimina las secciones que no sean relevantes.

<Tip>
  ¿No estás seguro de qué plantilla usar? Lee sobre [tipos de contenido](/es/guides/content-types) para comprender cuándo utilizar cada uno.
</Tip>

<div id="how-to-guide-template">
  ## Plantilla de guía práctica [#plantilla-de-guía-práctica]
</div>

Usa guías prácticas cuando los usuarios necesiten llevar a cabo una tarea específica y ya tengan cierta familiaridad con tu producto. Las guías prácticas están orientadas al objetivo y van directamente a la solución.

````mdx title="How-to guide template"
---
title: "[Titles should start with a verb]"
description: "[Do specific task] to [achieve outcome]."
---

Start with a brief statement of what this guide helps users accomplish.

## Prerequisites (optional)

List only what's necessary:

- Required setup or configuration
- Permissions needed
- Related features that should be configured first

## [Encabezado orientado a la acción que describe la tarea]

Proporcione instrucciones directas enfocadas en lograr el objetivo.

1. Abra [ubicación] y navegue a [lugar específico]
2. Haga clic en [botón u opción]
3. Ingrese [información requerida]
4. Haga clic en [botón de confirmación]

```language
// Include code examples that users can copy and modify
```

<Tip>
  Include practical tips that help users avoid common mistakes or work more efficiently.
</Tip>

## Verify the result (optional)

If success is ambiguous, explain how users can confirm they completed the task successfully.

## Troubleshooting (optional)

Address common issues users might encounter:

- **Problem description**: Solution or workaround
- **Another common issue**: How to resolve it

## Related tasks

Link to related how-to guides or next steps.
````

<div id="tutorial-template">
  ## Plantilla de tutorial [#plantilla-de-tutorial]
</div>

Usa tutoriales cuando quieras ayudar a usuarios nuevos a aprender mediante práctica directa. Los tutoriales guían a los usuarios paso a paso a través de una experiencia de aprendizaje completa con un resultado claro.

````mdx title="Tutorial template"
---
title: "[Action verb] [specific outcome]"
description: "Aprende cómo [specific outcome] mediante [method or approach]."
---

Usa un párrafo de introducción para explicar qué pueden esperar aprender los usuarios y qué pueden hacer después de completar este tutorial.

## Requisitos previos

Lista lo que los usuarios necesitan antes de comenzar:

- Conocimientos o habilidades requeridos
- Herramientas, cuentas o permisos
- Compromiso de tiempo (opcional)

## Step 1: [First action]

Proporciona instrucciones claras y específicas para el primer paso.

```language
// Include code examples where helpful
```

Explica qué logra este paso y por qué es importante.

## Step 2: [Second action]

Continúa con pasos secuenciales que se basan en el trabajo anterior.

Señala hitos y marcadores de progreso para que los usuarios sepan que van por buen camino.

## Step 3: [Third action]

Mantén los pasos enfocados en acciones concretas en lugar de teoría.

Minimiza las elecciones que los usuarios necesitan tomar.

## Próximos pasos

Resume lo que los usuarios aprendieron y sugiere próximos pasos lógicos:

- Tutoriales relacionados para probar
- Guías prácticas para tareas comunes
- Recursos adicionales para profundizar en el aprendizaje
````

<div id="explanation-template">
  ## Plantilla de explicación [#plantilla-de-explicación]
</div>

Usa explicaciones cuando los usuarios necesiten comprender conceptos, decisiones de diseño o cómo funcionan las funciones complejas. Las explicaciones proporcionan contexto y profundizan la comprensión en lugar de dar instrucciones paso a paso.

```mdx title="Explanation template"
---
title: "About [concept or feature]"
description: "Understand [concept] and how it works within [product or context]."
---

Start with a clear statement of what this explanation covers and why understanding it matters.

Define the concept in plain language. Explain what it is, what it does, and why it exists.

Use analogies or comparisons to familiar concepts when helpful.

## How [concept] works

Explain the underlying mechanics, architecture, or process.

<Frame>
  <img src="/path/to/diagram.png" alt="Diagram showing how [concept] works" />
</Frame>

Break down complex ideas into digestible sections.

## Why [design decision or approach]

Provide context about why things work the way they do.

Discuss trade-offs, alternatives that were considered, or constraints that influenced the design.

## Cuándo usar [concepto]

Ayuda a los usuarios a entender cuándo este concepto o enfoque es más apropiado.

- **Caso de uso 1**: Cuándo tiene sentido este enfoque
- **Caso de uso 2**: Otro escenario donde esta es la opción correcta
- **No recomendado para**: Situaciones donde las alternativas son mejores

## Relationship to other features

Draw connections to related concepts or features in your product.

Explain how this concept fits into the broader system or workflow.

## Common misconceptions

Address misunderstandings or clarify subtle distinctions.

## Further reading

Link to related explanations, tutorials, or reference documentation.
```

<div id="reference-template">
  ## Plantilla de referencia [#plantilla-de-referencia]
</div>

Utiliza documentación de referencia cuando los usuarios necesiten consultar detalles específicos sobre las características de tu producto. La documentación de referencia prioriza la precisión, la consistencia y la facilidad para revisarla rápidamente.

````mdx title="Reference template"
---
title: "Referencia de [nombre de característica o API]"
description: "Referencia completa de propiedades, parámetros y opciones de [característica o API]."
---

Provide a one-sentence description of what this feature or API does.

## Properties

<ParamField body="property1" type="string" required>
  Brief description of the property.
</ParamField>

<ParamField body="property2" type="number">
  Brief description with default value if applicable.
</ParamField>

<ParamField body="property3" type="boolean" default="false">
  Brief description.
</ParamField>

## Parameters

<ParamField body="parameterName" type="string">
  Description of what this parameter does and when to use it.

```language
// Example showing typical usage
```
</ParamField>

<ParamField body="anotherParameter" type="object">
  Description of the parameter.

  Available options:

  - `option1`: Description of this option.
  - `option2`: Description of this option.
</ParamField>

## Examples

### Basic example

```language title="Basic usage"
// Minimal example showing common use case
```

### Advanced example

```language title="Advanced configuration"
// Example with multiple options configured
```

## Response

If documenting an API, describe the response structure.

<ResponseField name="field1" type="string" required>
  Description of the response field.
</ResponseField>

<ResponseField name="field2" type="number">
  Description of another response field.
</ResponseField>

Example response:

```json
{
  "field1": "value",
  "field2": 123
}
```

## Related references

Link to related reference documentation.
````

<div id="related-pages">
  ## Páginas relacionadas [#páginas-relacionadas]
</div>

<CardGroup cols="2">
  <Card title="Tipos de contenido" 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;M4 8C6.20914 8 8 6.20914 8 4C8 3.2722 8 2.90829 8.02385 2.80107C8.13266 2.31172 8.28121 2.16103 8.76894 2.0452C8.87582 2.01982 9.08666 2.01679 9.50835 2.01074C10.2571 2 11.084 2 12 2C13.3714 2 14.5433 2 15.5518 2.03606C15.9598 2.05065 16.1639 2.05794 16.2867 2.09469C16.7096 2.22123 16.8563 2.37333 16.9677 2.80046C17 2.92452 17 3.28301 17 4C17 6.20914 18.7909 8 21 8C21.4931 8 21.963 8.34313 21.9759 8.83609C22 9.75428 22 10.8009 22 12C22 12.916 22 13.7429 21.9893 14.4916C21.9832 14.9133 21.9802 15.1242 21.9548 15.2311C21.839 15.7188 21.6883 15.8673 21.1989 15.9762C21.0917 16 20.7278 16 20 16C17.7909 16 16 17.7909 16 20C16 20.7278 16 21.0917 15.9762 21.1989C15.8673 21.6883 15.7188 21.839 15.2311 21.9548C15.1242 21.9802 14.9133 21.9832 14.4917 21.9893C13.7429 22 12.916 22 12 22C11.084 22 10.2571 22 9.50835 21.9893C9.08666 21.9832 8.87582 21.9802 8.76894 21.9548C8.28121 21.839 8.13266 21.6883 8.02385 21.1989C8 21.0917 8 20.7278 8 20C8 17.7909 6.20914 16 4 16C3.27219 16 2.90829 16 2.80106 15.9762C2.31172 15.8673 2.16103 15.7188 2.0452 15.2311C2.01982 15.1242 2.01679 14.9133 2.01074 14.4916C2 13.7429 2 12.916 2 12C2 11.084 2 10.2571 2.01074 9.50835C2.01679 9.08666 2.01982 8.87582 2.0452 8.76894C2.16103 8.28121 2.31172 8.13266 2.80107 8.02385C2.90829 8 3.2722 8 4 8Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/es/guides/content-types">
    Elige el tipo de contenido adecuado para los objetivos de tu documentación.
  </Card>

  <Card title="Estilo y tono" 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;M3.49977 18.9853V20.5H5.01449C6.24074 20.5 6.85387 20.5 7.40518 20.2716C7.9565 20.0433 8.39004 19.6097 9.25713 18.7426L19.1211 8.87868C20.0037 7.99612 20.4449 7.55483 20.4937 7.01325C20.5018 6.92372 20.5018 6.83364 20.4937 6.74411C20.4449 6.20253 20.0037 5.76124 19.1211 4.87868C18.2385 3.99612 17.7972 3.55483 17.2557 3.50605C17.1661 3.49798 17.0761 3.49798 16.9865 3.50605C16.4449 3.55483 16.0037 3.99612 15.1211 4.87868L5.25713 14.7426C4.39004 15.6097 3.9565 16.0433 3.72813 16.5946C3.49977 17.1459 3.49977 17.759 3.49977 18.9853Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13.5 6.5L17.5 10.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/es/guides/style-and-tone">
    Escribe documentación eficaz con un estilo coherente.
  </Card>

  <Card title="Dar formato al texto" 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;M15 21.001H9&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 3.00001V21.0008M12 3.00001C13.3874 3.00001 15.1695 3.03055 16.5884 3.17649C17.1885 3.2382 17.4886 3.26906 17.7541 3.37791C18.3066 3.60429 18.7518 4.10063 18.9194 4.67681C19 4.95382 19 5.26992 19 5.90215M12 3.00001C10.6126 3.00001 8.83047 3.03055 7.41161 3.17649C6.8115 3.2382 6.51144 3.26906 6.24586 3.37791C5.69344 3.60429 5.24816 4.10063 5.08057 4.67681C5 4.95382 5 5.26992 5 5.90215&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/es/create/text">
    Aprende a dar formato al texto y a dar estilo al contenido.
  </Card>
</CardGroup>
