Design System con IA: cómo diseñar respetando la identidad de tu marca

Un design system con inteligencia artificial es tu identidad de marca convertida en instrucciones que la IA puede leer y aplicar. Reúne colores con su código exacto, tipografías, logotipos, voz y reglas de uso en un formato estructurado. Con él, herramientas como Claude o ChatGPT generan posts, reportes, presentaciones y landings alineados a tu marca.

¿La inteligencia artificial no sabe diseñar? Es el reclamo más común que escucho en los equipos de marketing. Y casi siempre el problema está en cómo se usan las herramientas. La IA no conoce tu logotipo, tu tipografía ni tu iconografía, y por eso te devuelve piezas genéricas.

La solución tiene nombre. Se llama design system. En esta guía verás qué es, qué debe incluir y cómo implementarlo con Claude paso a paso, con un ejercicio completo construido sobre la documentación pública de Iberdrola.

¿Qué es un design system y en qué se diferencia del manual de marca?

Un design system (sistema de diseño) reúne todos los componentes de tu identidad visual y verbal en un formato que la inteligencia artificial entiende. El concepto viene de los manuales de marca de siempre. La diferencia está en el destinatario.

Tu manual de marca es la guía con la que un diseñador humano sabe dónde componer el logo, cómo usar el isotipo y cómo aplicar la paleta de colores. Ese manual sigue vigente. Hoy toca llevarlo un paso más allá. A ese paso se le llama design system, es decir, un sistema de diseño con instrucciones para los robots.

¿Y cómo lee la IA esas instrucciones? A través de tokens. Tokenizar es traducir tu identidad a componentes que la IA procesa. Colores con códigos hex, tipografías con pesos y tamaños, reglas de uso, todo en un formato tipo Markdown o JSON. Suena técnico, pero descuida porque eso no lo escribes tú. La inteligencia artificial lo genera por ti, como te mostraré en el paso a paso.

¿Por qué la inteligencia artificial entrega diseños genéricos?

Para dar buenos resultados, la IA necesita una guía que reduzca la ambigüedad y elimine las suposiciones. Sin esa guía rellena los vacíos con lo más probable. Gradientes de moda, tipografías comunes, el mismo azul corporativo que le entrega a todo el mundo.

Piénsalo con un diseñador humano. Si le pides una presentación espectacular sin darle referencias, el resultado no te va a gustar. Y la culpa no será del diseñador, sino de las referencias que nunca recibió. Con la IA pasa exactamente igual.

Hay una consecuencia más. Si generas contenido en una plataforma o herramienta de IA que no conoce tu marca y lo llevas a tu pieza, ese contenido será genérico. El design system corrige el problema de raíz porque le da a la IA una única fuente de verdad sobre tu identidad visual.

¿Qué debe incluir un design system para la inteligencia artificial?

Esta es la lista completa, en orden. No necesitas tenerlo todo para empezar.

1. La estrategia (opcional). Propósito y valores de la marca. Le dan contexto a la IA.
2. Lo verbal. Tu identidad verbal, el tono de voz, claims, glosario y cómo habla tu marca.
3. Lo visual (el corazón). Logos en todas sus versiones, tipografías descargadas y colores. Si no están en hex, la IA los traduce.
4. Los assets oficiales. Kit de marca, iconografía y banco de fotos.
5. Ejemplos de do y donts. Piezas aprobadas como referencia y lo que jamás debería salir publicado.
6. Gobernanza (opcional). Modelo de estructura de la data, quién aprueba el contenido y cada cuánto se actualiza.

Cuando Claude convierte esto en un design system, el resultado incluye componentes que tu manual quizá nunca tuvo. Botonería, cards, espaciado, jerarquías tipográficas, cómo respira el texto dentro de una pieza. Ahí está la diferencia entre un PDF bonito y un sistema operativo de tu identidad visual.

Los 4 caminos para implementarlo y ponerlo en práctica

Camino 1. Tienes el manual de marca (Claude Code)

1. Reúne y ordena la información en carpetas. Logos, iconos, fotografía, el manual de identidad y piezas de referencia aprobadas.
2. Dale a Claude acceso a la carpeta. Evita arrastrar todo al chat porque la ventana de contexto, el límite de información por conversación, se satura.
3. Pídele la tokenización con un prompt como este.

Actúa como director de marca y arquitecto de sistemas de diseño con amplia
experiencia. Convierte la documentación de [tu marca] en un design system
estructurado. Entrégame un resumen, el archivo JSON del sistema, una tabla
de tokens y una lista de pendientes y preguntas. No des nada por supuesto.
Hazme todas las preguntas que necesites para orientarte.

Esa última línea importa. Pedirle que pregunte en vez de suponer separa un sistema riguroso de uno inventado.

4. Convierte el design system en una skill de marca. Una skill (habilidad) es un paquete de instrucciones que Claude activa cuando lo necesita. Pídele actuar como ingeniero de IA experto en skills y crear la de tu marca, con el design system como única fuente de verdad. Se sube en Personalizar → Habilidades.
5. Testea con una pieza real. Por ejemplo, la portada del reporte anual en A4 con las imágenes de tu carpeta de fotografías. La fórmula es el prompt más la carpeta de imágenes más el skill de marca.
6. Itera y actualiza. Las reglas nuevas se suman sin reemplazar las anteriores. Yo lo hago cada tres meses.

El beneficio de fondo es simple. Ya no repites qué colores usas ni cómo va tu logotipo. Eso vive dentro del skill.

Camino 2. Prefieres una interfaz visual (Claude Design)

En Claude Design entras a Design System → Create Design System y subes tus activos. Manual, logos y capturas de tu web (para hacerlo existe una extensión de Chrome llamada Awesome Screenshot, que te permite tomar una captura de todo el home de tu web). En 10 a 15 minutos tienes el sistema generado y lo afinas por el chat. Por ejemplo, le dices que los botones de llamada a la acción nunca van en coral y aplica la regla.

Una vez que me generó el sistema de diseño, siempre le hago esta pregunta: "¿Qué información te falta para completar un design system 100% riguroso e impecable?" Te devuelve la lista de pendientes.

Camino 3. Solo tienes página web (ingeniería inversa)

Existe la opción de extraer el design system de cualquier página web usando un skill de extracción en Claude Code. El skill tokeniza todo y entrega archivos Markdown y JSON.

Comprimes esa carpeta y la subes a Claude Design o la trabajas directo en Code (que recomiendo por ser más agéntico en tareas complejas). Y sí, puedes darle dos o tres URL de competidores y pedirle un benchmark visual comparativo.

Camino 4. No tienes manual de marca (Pomelli)

Pomelli, de Google Labs, te arma un manual de marca básico de siete páginas desde el link de tu web. Logo, tagline, colores, tipografías y estilo. ¿Está al nivel de un design system trabajado? No. Es un punto de partida y no el punto de llegada.

Para una organización sin manual de marca o identidad desarrollada te permite iniciar y definir lineamientos visuales que después lo vas a poder convertir en un design system con los caminos 1 o 2. Si ni siquiera hay web, junta 10 diseños ya publicados más el logotipo y pídele un manual de marca básico en base a esas piezas.

El ejercicio completo con Iberdrola

Para probar el método end to end, reconstruí de forma educativa y con información pública, el sistema de marca de Iberdrola, una empresa multinacional de origen español dedicada a la producción, distribución y comercialización de energía. Este fue el flujo.

1. La carpeta. Subcarpetas numeradas con logos, iconografía, tipografía, manual y fotografías oficiales, más piezas de referencia ya publicadas.
2. El acceso. Claude Code lee la carpeta completa sin saturar la conversación.
3. La tokenización. Claude tokeniza toda la información y crea un archivo JSON, la tabla detallada de tokens y una lista de pendientes y preguntas. Respóndela y el sistema se afina solo.
4. La skill de marca. Creas el skill del design system (skill de marca) con el archivo JSON más un prompt usando el skill creator. Toda pieza sale 100% en la identidad, con el design system como única fuente de verdad.
5. El test. La portada del reporte anual 2025 en A4 con las fotografías oficiales de paneles solares y eólica marina.
6. La iteración. El isotipo salía separado del nombre y el manual lo prohíbe. Una instrucción que suma la regla sin reemplazar las anteriores y quedó corregido para siempre.

¿Funciona más allá de un ejercicio? Mi página web, juliotalledo.ai, salió de mi propio design system con Claude Design y Claude Code. Mis piezas del día a día ya no pasan por un diseñador. Salen del sistema.

Errores comunes al diseñar con la inteligencia artificial

• Culpar a la IA. "Claude no sabe diseñar" casi siempre significa que no recibió tu logo en buena calidad, tu tipografía ni tus colores.
• Adjuntar todo al chat. Satura la ventana de contexto. Dale acceso a la carpeta.
• Tipografías sin instalar. Los archivos descargables heredan mal la fuente. Si tu tipografía es de pago, define dentro del sistema una alternativa gratuita parecida.
• Traer contenido de otra IA sin contexto. Lo genérico entra y lo genérico sale.
• Trabajar todo en un solo chat eterno. La conversación saturada olvida cambios. Le pides cinco y hace tres. Usa una conversación por proyecto y compacta el historial.
• Dejar que la IA decida por ti. Tres reglas que siempre le doy. Sé rigurosa, usa cadena de pensamiento para razonar paso a paso y haz un QA test para pedirle un control de calidad de su propio trabajo antes de entregarlo.

¿Por qué el design system es importante para tu negocio?

Si lideras un equipo de marketing o diriges una empresa, el design system marca la diferencia entre usar IA y usarla con criterio. Las piezas del día a día salen alineadas a tu marca, sin depender de la agenda del área de diseño.

Y hay un efecto menos obvio. Una identidad consistente en todas tus piezas es la materia prima para que los motores de IA te reconozcan como marca.

¿Quieres implementarlo en tu organización? En mis conferencias y consultorías armamos el design system de tu marca con tu equipo. Y si quieres más guías como esta, suscríbete a mi newsletter y sígueme en mis redes sociales.