> For the complete documentation index, see [llms.txt](https://docs.airops.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airops.com/docs/es/contexto/brand-kit/visual-guidelines.md). # Pautas visuales Define reglas visuales y plantillas de casos de uso en tu Brand Kit Las Pautas visuales estructuran los colores, la tipografía, los logotipos y las reglas visuales de tu marca para que los recursos generados por IA se mantengan coherentes con la marca. Usando el Brand Kit MCP, puedes configurar tu identidad visual (rellenándola mediante Claude, por ejemplo) y recuperarla con la misma facilidad, de modo que cada resultado se base no solo en qué decir, sino también en cómo presentarlo. La pestaña de Pautas visuales está organizada en **Logotipos**, **Colores**, **Tipografía**, y **plantillas de casos de uso visuales**. Las plantillas mantienen juntas las instrucciones y los ejemplos para un tipo concreto de recurso, en lugar de almacenar todas las imágenes de referencia en una única colección plana. *** ## Casos de uso Las Pautas visuales se pueden leer y escribir mediante MCP, por lo que cualquier herramienta de IA conectada puede producir resultados visuales coherentes con la marca. Aquí tienes algunos ejemplos. **Genera informes y documentos de una página coherentes con la marca.** Una herramienta de IA conectada mediante MCP recupera tus colores exactos, tipografías, escala tipográfica y reglas del logotipo, y luego los aplica al generar un informe, un documento de una página o un resumen de datos. Los informes de rendimiento AEO, por ejemplo, pueden venir totalmente adaptados a la marca desde el primer momento. **Produce visualizaciones de datos con la paleta de tu marca.** Cuando la paleta de colores de tus gráficos, las reglas de uso del color y la plantilla de Visualización de datos se almacenan en Pautas visuales, un agente de IA puede recuperarlas para generar gráficos, diagramas y paneles que coincidan con tu marca. Rellenos planos, colores de acento específicos, tipografías correctas para las etiquetas de los ejes. **Crea presentaciones que parezcan de tu marca.** Claude u otra herramienta conectada a MCP puede recuperar tu escala tipográfica completa, variantes del logotipo y paletas de colores para generar diapositivas de presentación que sigan tu identidad visual. **Aplica la dirección creativa adecuada a cada recurso.** Una Imagen principal puede requerir un arte editorial expresivo, mientras que una Tarjeta de cita puede especificar una composición sobria y la ubicación exacta del logotipo. Cada caso de uso incorpora sus propias instrucciones y ejemplos, de modo que la guía de un tipo de recurso no se aplique indiscriminadamente a otro. *** ## Cómo configurar las Pautas visuales En lugar de introducir manualmente cada color, tipografía y regla, **puedes usar Claude mediante MCP para leer tus pautas de marca existentes**, ya sea un PDF, una presentación o cualquier otro documento, y escribir los campos estructurados directamente en tu Brand Kit. Esta es la forma más rápida de rellenar las Pautas visuales. También puedes añadir campos manualmente a través de la pestaña Pautas visuales: 1. Ve a la pestaña **Pautas visuales** de tu Brand Kit 2. En **Logotipos**, añade variantes con archivos de logotipo, colores de fondo e instrucciones de uso. Define tamaños y reglas de uso del logotipo. 3. En **Colores**, crea paletas con grupos con nombre y colores individuales. Añade reglas de uso del color. 4. En **Tipografía**, registra tipografías con contexto de uso y cargas de archivos de fuente. Define tu escala tipográfica. Añade reglas de uso de la tipografía. 5. Crea plantillas de casos de uso como **Imagen principal**, **Visualización de datos**, y **Tarjeta de cita**. Añade instrucciones y ejemplos de referencia a cada plantilla. 6. Guarda los cambios > **Consejo**: Puedes rellenar las Pautas visuales mediante MCP a partir de tus pautas de marca o tus recursos visuales. [Más información sobre Brand Kit MCP →](https://docs.airops.com/mcp/tools) *** ## Ejemplo Una empresa podría configurar sus Pautas visuales así: **Logotipos:** Cuatro variantes para distintos fondos (claro, oscuro, verde bosque, verde neón). Varios niveles de tamaño, desde grande (secciones principales) hasta mínimo (pies de página y favicons). Reglas que cubren espacio libre, no estirar y combinación con el fondo. **Colores:** Cinco paletas que cubren la marca principal, la jerarquía del texto, los trazos, el modo oscuro y una paleta dedicada a gráficos. Reglas que imponen esquinas marcadas en todas partes y rellenos planos para los gráficos. **Tipografía:** Tres tipografías con archivos de fuente alojados. Una con serif para titulares, una sans-serif para el cuerpo y una monoespaciada para etiquetas. Una escala tipográfica completa desde Display hasta Caption. Reglas que restringen la serif a los titulares y exigen monoespaciada en mayúsculas para las etiquetas. **Plantillas de casos de uso:** Una plantilla de Imagen principal con orientación sobre ilustración editorial y referencias de páginas de destino; una plantilla de Visualización de datos con ejemplos de gráficos y reglas de composición; y una plantilla de Tarjeta de cita con orientación sobre tipografía, atribución y ubicación del logotipo. *** ## Detalles de la sección ### Logotipos **Variantes del logotipo** Define distintas versiones de tu logotipo para diferentes contextos de fondo. | Campo | Descripción | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | **Nombre** | Un nombre descriptivo para esta variante (p. ej., "Color completo sobre blanco", "Blanco invertido sobre casi negro"). | | **Color de fondo** | El color hexadecimal para el que está diseñada esta variante (p. ej., `#ffffff`, `#002910`). | | **Instrucciones de uso** | Cuándo y cómo usar esta variante. Incluye reglas de espacio libre, restricciones y lógica de combinación con el fondo. | | **Archivo del logotipo** | Sube la imagen de tu logotipo (SVG, PNG, JPG, GIF o WebP). | **Tamaños del logotipo** Define tamaños de renderizado permitidos para que las herramientas de IA nunca muestren tu logotipo demasiado pequeño o demasiado grande. | Campo | Descripción | | ------------------------ | ---------------------------------------------------------------------------------- | | **Nombre** | Una etiqueta para este nivel de tamaño (p. ej., "Grande", "Mínimo"). | | **Ancho** | Ancho en píxeles (opcional si la altura está definida). | | **Altura** | Altura en píxeles (opcional si el ancho está definido). | | **Instrucciones de uso** | Dónde debe usarse este tamaño (p. ej., "secciones principales", "pies de página"). | **Reglas de uso del logotipo** Reglas de formato libre que rigen el tratamiento del logotipo. | Campo | Descripción | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regla** | El texto de la regla (p. ej., "El espacio libre mínimo equivale a la altura de la A por todos los lados", "Nunca estires, gires ni cambies el color del logotipo"). | *** ### Colores **Paletas de colores** Agrupa los colores de tu marca en paletas con nombre. Cada paleta contiene colores individuales con valores hexadecimales e instrucciones de uso. Puedes crear varias paletas para separar aspectos, por ejemplo: Principal, Texto, Trazos, Modo oscuro y Gráficos. | Campo | Descripción | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | | **Nombre de la paleta** | Un nombre para este grupo de colores (p. ej., "Principal", "Gráficos"). | | **Nombre del color** | Un nombre descriptivo para cada color (p. ej., "Verde de interacción", "Texto secundario"). | | **Valor del color** | El valor hexadecimal (p. ej., `#00ff64`). | | **Instrucciones de uso** | Cuándo y dónde usar este color (p. ej., "estados hover y acentos interactivos", "pies de foto y metadatos"). | **Reglas de uso del color** Reglas de formato libre que rigen el uso del color. | Campo | Descripción | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regla** | El texto de la regla (p. ej., "Todas las superficies grandes deben usar verde oscuro #002910", "Solo esquinas marcadas, border-radius: 0", "Visualización de datos: solo rellenos planos, sin degradados"). | *** ### Tipografía **Fuentes** Registra las tipografías que usa tu marca. | Campo | Descripción | | -------------------------- | ---------------------------------------------------------------------------------------------------------- | | **Nombre** | El nombre de la fuente exactamente como debe referenciarse (p. ej., "Saans", "Serrif VF"). | | **Instrucciones de uso** | En qué contextos se aplica esta fuente, fuentes de reserva y sustitutos específicos de la plataforma. | | **Enlace de Google Fonts** | Una URL de Google Fonts, si la fuente está alojada allí. | | **Archivo de fuente** | Sube un archivo de fuente personalizado (p. ej., .woff2). Los agentes pueden cargarlo mediante @font-face. | **Escala tipográfica** Define toda tu escala tipográfica vinculando configuraciones específicas de tamaño, peso e interlineado a una fuente. | Campo | Descripción | | ------------------------ | ---------------------------------------------------------------------------------------- | | **Fuente** | A qué fuente registrada pertenece este tamaño de texto. | | **Nombre** | Una etiqueta para este paso de la escala (p. ej., "Display", "H1", "Cuerpo", "Caption"). | | **Peso** | Peso de la fuente (p. ej., "400", "600"). | | **Tamaño** | Tamaño de fuente en píxeles. | | **Interlineado** | Interlineado en píxeles. | | **Instrucciones de uso** | Dónde debe aplicarse este tamaño tipográfico. | **Reglas de uso de la tipografía** Reglas de formato libre que rigen el tratamiento tipográfico. | Campo | Descripción | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regla** | El texto de la regla (p. ej., "Serrif VF es solo para titulares editoriales grandes", "Las etiquetas monoespaciadas deben ir siempre en mayúsculas, 11-12 px, peso 500"). | *** ### Plantillas de casos de uso Crea una plantilla separada para cada tipo de recurso visual que produzca tu equipo. Cada caso de uso incorpora sus propias instrucciones y ejemplos, de modo que una herramienta de IA pueda recuperar una guía que coincida con la salida solicitada en lugar de interpretar un volcado plano de imágenes no relacionadas. Las plantillas comunes incluyen: * **Imagen principal:** Composición, relación de aspecto, tratamiento del sujeto, estilo de ilustración o fotografía, y ejemplos de arte principal exitoso. * **Visualización de datos:** Paleta de gráficos, etiquetado, tratamiento de cuadrícula y ejes, estilo de anotaciones y ejemplos de gráficos coherentes con la marca. * **Tarjeta de cita:** Jerarquía tipográfica, ubicación de la atribución, tratamiento del fondo, ubicación del logotipo y ejemplos de tarjetas para redes aprobadas. Añade otros casos de uso para los recursos que crea tu equipo, como capturas de pantalla de producto, portadas de informes o diapositivas de título de presentaciones. Para cada uno, proporciona: * **Instrucciones** que describan la composición prevista, el estilo, los elementos necesarios y los patrones que se deben evitar. * **Ejemplos** que muestren el caso de uso aplicado con éxito y ofrezcan a una herramienta de IA una referencia visual concreta. Usa las secciones estructuradas de Logotipos, Colores y Tipografía para las reglas que se aplican a todos los recursos. Mantén las instrucciones de las plantillas centradas en lo que es único de ese caso de uso visual. *** ## Preguntas frecuentes **¿Cómo accedo a las Pautas visuales en mis herramientas de IA?** Las Pautas visuales están disponibles a través del Brand Kit MCP. Conéctalo a Claude, Cursor o cualquier herramienta compatible con MCP para leer y escribir tu identidad visual de forma programática. Las variables Liquid de Workflow aún no están disponibles para los campos de Pautas visuales. **¿Puedo rellenar las Pautas visuales usando IA?** Sí. Usando el Brand Kit MCP, puedes hacer que Claude lea el PDF de tus pautas de marca existentes y escriba los campos estructurados directamente en tu Brand Kit. **¿Qué casos de uso habilita esto?** Cualquier herramienta de IA conectada mediante MCP puede recuperar tu identidad visual para producir informes, presentaciones, documentos de una página y visualizaciones de datos coherentes con la marca, con tus colores, tipografías y reglas exactas. **¿Cuál es la diferencia entre las instrucciones de los casos de uso y las demás orientaciones estructuradas?** Las instrucciones de una plantilla describen cómo producir un tipo de recurso, como una Imagen principal o una Tarjeta de cita. Las instrucciones a nivel de campo explican cuándo usar un logotipo, color o tipografía concretos, mientras que las reglas de uso de la categoría establecen límites más amplios que se aplican a todos los recursos. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.airops.com/docs/es/contexto/brand-kit/visual-guidelines.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.