1.3 ESTILO¶

El diseñador que aplica tu identidad visual a todo lo que el sistema produce

El problema que resuelve¶

Cuando una skill de ATLAS Pro genera una landing page, una presentación o cualquier pieza con elementos visuales, necesita saber qué colores usar, qué tipografías aplicar y qué estilo seguir. Sin esa información, el resultado sale con colores y fuentes por defecto: funcional, pero sin personalidad.

El problema no es solo estético. Si cada pieza visual que produces tiene colores distintos, tipografías diferentes y un estilo inconexo, tu marca no se reconoce. Un artículo con una paleta, una landing con otra y un ebook con una tercera: eso no es una marca, es un collage.

ESTILO resuelve esto leyendo tu documento de identidad visual (visual-identity.md, generado por ESENCIA) y entregando a cada skill las especificaciones exactas: paleta de colores con códigos HEX, tipografías con enlaces de Google Fonts, variables CSS listas para pegar, y reglas de aplicación. Todo automático, todo consistente.

Cuándo está activa¶

ESTILO es una skill de servicio. Se activa en segundo plano cada vez que una skill productiva genera contenido con componentes visuales:

PÓRTICO crea una landing page HTML y necesita colores, tipografías y estilos de botón.
PRESENTA genera slides para un webinar y necesita la paleta y jerarquía tipográfica.
Cualquier skill que produce artifacts HTML o React aplica tu identidad visual a través de ESTILO.
Skills que generan materiales gráficos (PDFs, ebooks, infografías) consultan ESTILO para mantener coherencia.

Qué necesitas antes¶

ESTILO necesita un único documento: visual-identity.md, generado por el Módulo 6 de ESENCIA.

Ese documento debe contener como mínimo:

Paleta de colores con códigos HEX (primarios, secundarios, acentos, neutros).
Tipografías con nombres de fuente para títulos y cuerpo de texto.

Información adicional que enriquece el output (pero no es obligatoria):

Personalidad visual (espectros: minimalista/elaborado, moderno/clásico).
Estilo de elementos gráficos (iconos, fotografía, formas).
DOs y DON'Ts de diseño específicos de tu marca.
Aplicaciones por plataforma (redes, web, materiales impresos).

Cómo funciona¶

Cuando una skill productiva necesita aplicar identidad visual, ESTILO ejecuta un proceso interno:

Valida que visual-identity.md existe en tu proyecto Claude.
Lee el documento completo y extrae colores, tipografías, personalidad visual y reglas.
Contextualiza según el tipo de output que necesita la skill: para HTML genera CSS variables, para React genera configuración Tailwind, para presentaciones prioriza la paleta visual.
Genera snippets de código listos para usar: variables CSS, imports de Google Fonts, estilos de componentes (botones, cards, headers).
Entrega todo a la skill que la invocó — sin que tú veas nada.

ESTILO también verifica accesibilidad: contraste de texto sobre fondo (mínimo 4.5:1 WCAG AA), tamaños de texto mínimos y áreas táctiles de botones. Si detecta problemas, incluye advertencias en su output.

Qué recibes al terminar¶

ESTILO no genera documentos para ti; genera especificaciones técnicas para otras skills. Lo que tú recibes es el resultado: landings de PÓRTICO con tus colores y tipografías, presentaciones de PRESENTA con tu paleta, artifacts HTML que se ven como tu marca.

La información que ESTILO entrega internamente incluye:

Paleta de colores completa con HEX, RGB, uso recomendado y significado de cada color.
Sistema tipográfico con fuentes para títulos y cuerpo, pesos disponibles y URLs de Google Fonts.
CSS variables listas para copiar (--brand-primary, --font-heading, etc.).
Estilos de componentes predefinidos (botones primarios, secundarios, cards, headers).
Guidelines de aplicación contextualizadas al tipo de output (HTML, React, presentación, PDF).

Cómo verificar que está funcionando¶

Señales de que ESTILO está activa:

Las landings que genera PÓRTICO usan tu paleta de colores exacta — no colores genéricos.
Las tipografías en los artifacts HTML son las que definiste en ESENCIA, no fuentes por defecto.
Los botones, headers y componentes visuales mantienen un estilo consistente entre diferentes skills.
Los imports de Google Fonts aparecen correctamente en el código generado.

Señales de que ESTILO no está activa:

Los artifacts HTML usan colores azul/gris genéricos y fuentes como Arial o Inter por defecto.
Cada pieza visual tiene un estilo diferente: una landing con bordes redondeados, otra con esquinas rectas.
No hay coherencia de color entre lo que produce una skill y otra.

Cómo resolver: Verifica que visual-identity.md existe en la raíz de tu proyecto Claude y que contiene tu paleta de colores con códigos HEX y tus tipografías. Si completaste el Módulo 6 de ESENCIA pero no ves el documento, vuelve a generarlo.

Integración con ATLAS Pro¶

Skills que alimentan a ESTILO¶

Skill	Qué aporta
ESENCIA (Módulo 6)	El documento `visual-identity.md` con toda la identidad visual

Skills que ESTILO alimenta¶

Skill	Para qué la usa
PÓRTICO	Colores, tipografías y estilos de componentes para landing pages HTML
PRESENTA	Paleta visual y jerarquía tipográfica para presentaciones y slides
PLUMA	Elementos visuales cuando el contenido incluye componentes gráficos
Cualquier skill que genere HTML/React	CSS variables y estilos de marca para artifacts

Lo que ESTILO nunca hace¶

❌ Interactuar directamente contigo — trabaja en segundo plano.
❌ Diseñar tu identidad visual — eso lo hace ESENCIA (Módulo 6).
❌ Modificar visual-identity.md — solo lo lee.
❌ Inventar colores o tipografías si el documento está vacío — avisa y usa defaults temporales.
❌ Generar imágenes ni fotografías — provee especificaciones de estilo, no contenido gráfico.
❌ Ignorar problemas de accesibilidad — advierte si detecta contrastes insuficientes.

Errores comunes y cómo evitarlos¶

❌ Error: Completar ESENCIA pero saltar el Módulo 6 (Identidad Visual) pensando que "los colores no importan ahora".
✅ Solución: Sin visual-identity.md, toda pieza visual que genere el sistema usará colores y fuentes por defecto. Dedicar 40-50 minutos al Módulo 6 marca la diferencia entre output genérico y output con marca.

❌ Error: Definir colores en ESENCIA solo por nombre ("turquesa", "dorado") sin códigos HEX.
✅ Solución: ESTILO necesita códigos exactos para generar CSS. Asegúrate de que visual-identity.md incluye códigos HEX (#40E0D0, no "turquesa"). ESENCIA te los pide durante el módulo.

❌ Error: Elegir tipografías que no están en Google Fonts.
✅ Solución: ESTILO genera links de importación de Google Fonts. Si tu tipografía no está allí, ESTILO sugerirá alternativas similares, pero el resultado no será exacto. Elige fuentes de Google Fonts durante el Módulo 6 de ESENCIA.

Preguntas frecuentes¶

¿Puedo cambiar mis colores después de completar ESENCIA?¶

Sí. Actualiza visual-identity.md en tu proyecto con los nuevos códigos HEX. La próxima skill que genere contenido visual ya usará la paleta actualizada.

¿ESTILO aplica mi identidad visual a documentos .docx o PDFs?**¶

ESTILO está optimizada para artifacts HTML/React y presentaciones. Para documentos Word o PDF, las skills correspondientes aplican estilos de forma independiente según sus propias reglas de formato.

¿Qué pasa si mi documento de identidad visual está incompleto?**¶

ESTILO extrae lo que esté disponible y usa defaults para lo que falte (colores neutros, fuente Inter). Incluye una advertencia interna para que la skill que la invocó sepa que la información está limitada.

¿ESTILO verifica que mis colores son accesibles?**¶

Sí. Comprueba el contraste texto/fondo contra el estándar WCAG AA (mínimo 4.5:1) y advierte si detecta combinaciones con contraste insuficiente.