En abril de 2026, Anthropic lanzó Claude Design: un sistema de identidad visual completo para la era de la IA. Si usas Claude para crear contenido, necesitas entender este sistema — no solo para respetar la marca, sino para usarla a tu favor.
"El diseño de Claude no es solo estética. Es el lenguaje visual de una nueva forma de trabajar con inteligencia artificial."
Si alguna vez viste los diseños de Anthropic y pensaste 'esto se ve increíble, pero no sé cómo aplicarlo a lo que hago', esta guía es para ti. Claude Design gira en torno a una paleta cuidadosamente construida que mezcla calidez humana con precisión técnica. No es el azul frío de las IA de los 2010s — es un sistema que comunica confianza sin frialdad.
Los colores primarios del sistema son el Copper (cobre, el color terracota característico), un Cream cálido para fondos de luz, y un Ink profundo casi negro para contraste. Los tonos secundarios incluyen grises cálidos y acentos en naranja arena.
Claude Design usa una combinación serif/sans que ya habrás visto en esta misma guía. El sistema combina una serif elegante para titulares con una sans-serif limpia para cuerpo de texto. La clave está en el contraste: títulos grandes, cuerpo moderado, mucho espacio.
El uso de itálica en color cobre para palabras clave en los títulos es una de las señas de identidad más reconocibles del sistema. No es decorativo — marca semánticamente la idea principal de cada titular.
💡 En Expertos AI Builder usamos esto para diseñar todas las guías de este sitio. Playfair Display + Inter + la paleta Claude Design es el sistema que ves ahora mismo. Lo elegimos porque combina autoridad editorial con legibilidad en pantalla.
Una de las decisiones más inteligentes de Claude Design es el layout en secciones alternadas. No es tendencia — es una solución a un problema real: las páginas de contenido largo se vuelven monótonas. La alternancia crea ritmo sin necesitar animaciones.
La regla es simple: las secciones de luz (#F5F0E8) van para contenido orientado al lector (explicaciones, pasos, texto). Las secciones oscuras (#0D0D0D) van para impacto emocional, código, prompts y CTAs.
El tratamiento de código en Claude Design es una de las partes más cuidadas del sistema. No es un bloque genérico — tiene una estructura que comunica precisión y cuidado. Los tres puntos de colores (rojo, amarillo, verde) son una referencia consciente a macOS que genera familiaridad inmediata.
# Prompt para generar contenido en estilo Claude Design Actuá como diseñador de contenido especializado en el sistema visual de Claude (Anthropic). Tarea: Crear una página de guía usando: - Fondo crema (#F5F0E8) para secciones de lectura - Fondo oscuro (#0D0D0D) para secciones de impacto - Acento terracota (#C1440E) para highlights clave - Serif para títulos, sans-serif para cuerpo Estructura requerida: Hero → Intro oscura → Pasos alternados → Prompt copiable → CTA degradado terracota
Claude Design no es solo visual — incluye lineamientos de voz y tono que son igual de importantes. El sistema habla con directness (sin rodeos), con calidez (sin frialdad corporativa), y con precisión (sin jerga vacía).
Directness: Oraciones cortas. Verbo activo. Sin relleno.
Calidez: Segunda persona informal ("vos", "tu"). El lector es un par, no un cliente.
Precisión: Nombres técnicos correctos. Sin eufemismos. Sin "poderoso", "robusto", "innovador".
Curiosidad: El tono asume que el lector quiere aprender, no que necesita ser convencido.
Este prompt convierte a Claude en tu diseñador de marca personal.
# Generador de HTML en estilo Claude Design Quiero que generes el HTML completo de [TIPO DE PÁGINA]. Sistema de diseño a usar — Claude Design: - Fondo luz: #F5F0E8 (crema cálido) - Fondo oscuro: #0D0D0D (casi negro) - Acento principal: #C1440E (terracota/cobre) - Fuente títulos: Playfair Display (serif, con itálica para keywords) - Fuente cuerpo: Inter (sans-serif) - Secciones alternadas: claro → oscuro → claro Contenido a incluir: [DESCRIBÍ AQUÍ TU CONTENIDO] Tipo de página: [guía / landing / portfolio / recursos] Importante: HTML semántico puro, sin frameworks, con Google Fonts importadas en el head.
Copia y pega esto en cualquier conversación con Claude. Reemplaza las variables entre corchetes.
Actuá como un experto en Claude Design, el sistema de identidad visual de Anthropic lanzado en 2026. Tu tarea es [OBJETIVO: crear una página / generar un componente / revisar mi diseño]. Aplicá estos principios de Claude Design: PALETA: - Fondo luz: #F5F0E8 (Cream) - Fondo oscuro: #0D0D0D (Ink) - Acento: #C1440E (Copper/terracota) - Secundarios: #E8A882 (Sand), #8B6E5C (Mocha) TIPOGRAFÍA: - Títulos: Playfair Display, serif, bold - Destacados en títulos: itálica en color #C1440E - Cuerpo: Inter, sans-serif, regular/medium VOZ Y TONO: - Directo, sin relleno ni corporativese - Segunda persona informal - Preciso: nombres técnicos correctos - Curioso: asumí que el lector quiere aprender ESTRUCTURA: - Secciones alternadas claro/oscuro - Labels en caps pequeñas antes de cada sección - CTA final con degradado terracota → rojo Contexto específico: [DESCRIBÍ TU CASO] Empezá directamente con el output, sin explicaciones previas.
Ejemplo de resultado
Aquí tienes una propuesta de sistema visual usando Claude Design: Fondo principal en #F5F0E8 (Cream), titulares en Playfair Display 700 color #0D0D0D (Ink), y el acento en #C1440E (Copper) para botones y destacados. La combinación transmite autoridad editorial sin caer en el minimalismo genérico.
🏢 Si tienes una agencia
Adopta Claude Design como punto de partida para clientes sin identidad visual definida. Cream + Copper + Ink es una combinación que funciona en B2B y B2C. Personaliza el color acento y tienes una base sólida en horas.
🛍️ Si vendes productos o servicios
Si tienes una tienda, landing page o newsletter, reemplaza tus fondos blancos por #F5F0E8 y tus acentos por #C1440E. El resultado inmediato es más calidez y menos aspecto de plantilla genérica.
🎬 Si eres creador de contenido
Usa la paleta para unificar todos tus canales: miniatura de YouTube, portadas de newsletter, stories de Instagram. Coherencia visual = más reconocimiento de marca con menos esfuerzo.
En la comunidad tienes el workshop completo, plantillas y soporte directo.
VER LA COMUNIDAD →Todas las guías son gratis. Construidas con Claude Code, publicadas para la comunidad.
Ver todas las guías