BLOQUE 1 Principiante 8 min

Claude Design: el sistema visual de Anthropic

Paleta de 5 colores, 2 fuentes con roles definidos, 5 prompts listos para usar y los 4 errores visuales que Claude Design vino a eliminar.

"El diseño de Claude no es estética. Es el lenguaje visual de una nueva forma de trabajar con inteligencia artificial."

5
colores base
5
prompts listos
4
errores a evitar
1

Qué es Claude Design y por qué cambia todo

Si alguna vez le pediste a Claude que te diseñara algo y el resultado parecía sacado de una presentación corporativa de 2015, esta guía es para ti. El problema no era Claude — era que no tenías el lenguaje correcto para pedirle lo que realmente querías. Claude Design te da ese lenguaje.

En abril de 2026, Anthropic lanzó Claude Design: la identidad visual oficial de Claude. No es solo un rebrand. Es el primer sistema de diseño completo construido específicamente para una IA de uso general, con una filosofía clara: calidez humana + precisión técnica. Sin azules fríos. Sin degradados de ciencia ficción. Sin estética de startup genérica.

El sistema incluye paleta de 5 colores, dos fuentes con roles definidos, principios de movimiento, y directrices de voz y tono. Todo cohesionado. Cuando citas estos elementos en tus prompts, Claude los reconoce y los aplica directamente.

🎨
Paleta de color
5 colores base que rechazan el azul frío estereotípico de la IA a favor de tonos terrosos y cálidos.
🔤
Tipografía dual
Playfair Display para emoción + Inter para claridad. Contraste que refleja la dualidad de Claude.
Principios de movimiento
Animaciones que se sienten deliberadas, no mecánicas. Transiciones que respiran.
✍️
Voz y tono
Directrices de escritura que evitan el tono corporativo y el exceso de entusiasmo artificial.

Por qué importa esto para ti como usuario de Claude: cuando pides a Claude que genere contenido visual, presentaciones o interfaces, el modelo reconoce su propio sistema de diseño y puede aplicarlo directamente si se lo indicas.

💡
Dato clave: Claude Design nació como reacción al "look de IA" — esos degradados azul-morado, fuentes geométricas frías y estética de ciencia ficción que se convirtió en el cliché visual de toda herramienta de IA entre 2022 y 2025.
2

La paleta completa: 5 colores con rol

Cinco colores, cada uno con un trabajo específico. No son intercambiables ni decorativos — son estructurales. Clic en el hex para copiarlo.

Claude Cream
#F5F0E8
Fondos principales, espacios de respiración
Claude Black
#0D0D0D
Texto principal, secciones de contraste
Claude Terra
#C1440E
Acentos, CTAs, palabras clave
Claude Stone
#6B6B6B
Texto secundario, metadata
Claude Sand
#E8E0D0
Cards, separadores, fondos alternativos

Cómo combinarlos

Cream + Black: base de toda página de luz. El contraste natural sin agresividad.
Terra sobre cualquiera: un solo elemento por pantalla. Botón, palabra en cursiva, o badge.
Sand para cards: diferencia secciones sin romper el ritmo cálido de la página.
Stone para apoyo: fechas, categorías, metadata. Nunca para texto principal.
💡
Clic en cada hex para copiarlo. Y cuando le pidas materiales a Claude, menciona "usa la paleta de Claude Design" — el modelo reconoce los nombres y aplica los colores directamente sin que tengas que pegar los codes.
3

Tipografía: la escala visual completa

Dos fuentes. Cada una con un rol que no se intercambia. La tensión entre ellas es exactamente lo que le da carácter al sistema.

Fuente 1 Playfair Display — Para emoción, impacto y jerarquía visual
H164px
Título principal
H240px
Título de sección
H328px
Subtítulo de paso
Fuente 2 Inter — Para claridad, lectura y UI
Body18px
Texto de cuerpo. Legible y limpio para explicaciones largas y contenido técnico.
Small14px
Metadata · Badges · Etiquetas · Fechas · Categorías
Label11px
SECCIÓN · CATEGORÍA · ETIQUETA
Mono14px
const api_key = "sk-ant-..."

"La combinación Playfair + Inter no es accidental. Refleja la dualidad de Claude: cálido y preciso al mismo tiempo. Serif para el corazón, sans para la cabeza."

PRINCIPIO TIPOGRÁFICO CLAUDE DESIGN

✍️
La regla del cursor único: una sola palabra en cursiva terracota por título. Nunca dos. Ese acento es el que da identidad al headline sin convertirlo en ruido visual. Puedes verlo en cada título de esta misma guía.

💡 En Expertos AI Builder usamos esto para validar propuestas de diseño con clientes — les mostramos paletas Claude Design y les pedimos que elijan. El 80% prefiere combinaciones que nosotros no habríamos elegido.

4

5 prompts reales para usar Claude Design

Estos prompts convierten el sistema en material concreto. Cada uno está pensado para un caso de uso diferente. Cópialos, rellena las variables y ejecuta.

Prompt 1 — Paleta de marca desde cero

Prompt — Paleta de marca

Actúa como diseñador con conocimiento del sistema Claude Design. Quiero crear una paleta de colores para mi marca [NOMBRE MARCA] que opere en el sector [SECTOR]. Sigue estos principios de Claude Design: - Tonos cálidos, no fríos ni tecnológicos - Máximo 5 colores base - Un color de acento para CTAs y destacados - Que transmita: calidez humana + precisión técnica Dame: nombre de cada color, hex code, y caso de uso específico.

Ejemplo de resultado esperado

Para una agencia de marketing en el sector B2B, Claude genera: "Ivory" (#F7F3EC) como fondo cálido principal, "Obsidian" (#111111) para texto y secciones oscuras, "Rust" (#B84012) como acento de CTAs, "Pebble" (#6E6E6E) para texto secundario, y "Linen" (#E6DECE) para cards y separadores. Cada color lleva una tabla con nombre, hex, contraste WCAG y 3 ejemplos de uso concreto.

Prompt 2 — Presentación con estilo Claude

Prompt — Presentación

Necesito crear una presentación de [X] slides sobre [TEMA]. Usa el sistema tipográfico de Claude Design: - Títulos en Playfair Display con una palabra clave en cursiva - Subtítulos y cuerpo en Inter sans-serif - Fondo crema (#F5F0E8) para slides de luz - Fondo negro (#0D0D0D) para slides de contraste - Acento terracota (#C1440E) para destacados y CTAs - Sin gradientes azul-morado, sin fuentes geométricas frías Estructura de la presentación: [ESTRUCTURA]

Ejemplo de resultado esperado

Claude devuelve 10 slides con copy completo: portada con headline "Construye tu marca con criterio" sobre fondo crema, 6 slides de contenido alternando claro/oscuro con bullets cortos y palabras clave en cursiva terracota, y una slide de cierre con CTA sobre fondo negro. Incluye notas de presentador y especificaciones de color/fuente para trasladar a Canva o PowerPoint en 15 minutos.

Prompt 3 — Carrusel de Instagram

Prompt — Carrusel Instagram

Crea el copy y describe el diseño visual de un carrusel de Instagram de 6 slides sobre [TEMA]. Principios visuales a seguir: - Tipografía: títulos grandes serif, body sans-serif - Colores: fondo crema o negro, acento terracota - Tono: directo, humano, sin jerga de startup - Cada slide: 1 idea, headline corto + 2 líneas de apoyo - Slide 1: hook con pregunta o dato sorprendente - Slides 2-5: desarrollo con palabra clave en cursiva - Slide 6: CTA claro Audiencia: [AUDIENCIA]

Ejemplo de resultado esperado

Slide 1: "¿Por qué tu contenido no convierte aunque tengas 10K seguidores?" — fondo negro, headline en Playfair Display blanco, dato de apoyo en Inter gris claro. Slides 2-5: cada uno con una razón concreta, palabra clave en cursiva terracota. Slide 6: "Guarda este carrusel y aplica el primero esta semana" — fondo terracota, texto blanco bold. Incluye descripción de diseño para Canva.

Prompt 4 — Documentos y guías internas

Prompt — Documento editorial

Voy a crear un documento sobre [TEMA] para [AUDIENCIA]. Aplica el sistema editorial de Claude Design: - Jerarquía clara: H1 para título, H2 para secciones, H3 para subsecciones - Párrafos cortos (máximo 3-4 líneas) - Negritas solo para conceptos clave, no decoración - Al menos una cita o insight destacado en bloque - Tono: experto pero accesible, sin palabras relleno Extensión: [EXTENSIÓN]

Ejemplo de resultado esperado

Claude genera un documento de 800 palabras con H2 para cada sección principal, párrafos de 2-3 líneas separados por espacio generoso, un bloque de cita destacado con borde izquierdo, y negritas solo en los 4-5 conceptos más importantes. Sin bullets anidados. Sin adjetivos vacíos. Listo para pegar en Notion, Word o convertir a PDF con formato limpio.

Prompt 5 — Adaptar Claude Design a tu marca

Prompt — Adaptación de marca

Tengo una marca llamada [NOMBRE] en el sector [SECTOR]. Mis colores actuales son: [COLORES] Mi tipografía actual es: [TIPOGRAFÍA] Quiero adaptar los principios de Claude Design a mi marca sin copiarla. Dame: 1. Cómo ajustar mi paleta siguiendo los principios de calidez y contraste de Claude Design 2. Qué tipografías similares podría usar si no tengo Playfair Display 3. 3 reglas de diseño específicas para mi sector 4. Qué NO hacer (los anti-patrones que Claude Design evita)

Ejemplo de resultado esperado

Para una marca de fitness con naranja y negro, Claude entrega: ajuste de paleta calentando el naranja hacia terracota (#C8520A) y añadiendo un crema oscuro (#F0EBE0) en vez de blanco; sugiere Cormorant Garamond como serif alternativa y DM Sans para cuerpo; propone 3 reglas sectoriales (fotografías en acción sobre fondos oscuros, tipografía bold para métricas, CTAs siempre directos sin verbos pasivos); y lista 4 anti-patrones a evitar: gradientes neón, fuentes condensadas en títulos largos, iconos genéricos de gym, y paletas de más de 3 colores activos.

🎨
Cuando pidas HTML o CSS: añade "aplica Claude Design con fondo crema #F5F0E8, secciones alternadas en #0D0D0D y acento en #C1440E" al final de cualquier prompt de código. Claude genera el CSS directamente, sin que tengas que especificar propiedad por propiedad.
5

¿Cómo aplicarlo según tu negocio?

Claude Design no es solo para empresas de tecnología. Funciona en cualquier sector si se adaptan los principios, no los colores exactos.

🏢 Si tienes una agencia

Usa Claude Design como sistema base para propuestas a clientes que arrancan desde cero. El sistema crema/negro/terracota funciona como placeholder de marca que puedes personalizar en minutos. Prompt rápido para adaptar:

"Adapta la paleta de Claude Design para un cliente en el sector [SECTOR]. Mantén la calidez pero cambia el terracota por [COLOR DEL CLIENTE]. Dame los 5 hex codes resultantes."

🛍️ Si vendes productos o servicios

Aplícalo en tus emails de venta y landing pages. El contraste claro/oscuro de Claude Design aumenta la legibilidad y reduce el rebote. Lo más fácil: usa el Prompt 2 de esta guía para tu próxima propuesta de servicio o página de producto. El resultado se ve profesional sin necesitar diseñador.

🎬 Si eres creador de contenido

Claude Design resuelve el problema del creador que no sabe diseño: te da un sistema coherente para todos tus materiales. Usa Cream (#F5F0E8) como fondo de tus thumbnails, Black (#0D0D0D) para el texto, y Terra (#C1440E) para el elemento que quieres que la gente vea primero. Empieza por el Prompt 3 para tu próximo carrusel.

✦ Paso 6

Los 4 errores que Claude Design quiere eliminar

El sistema no solo define qué hacer — define también qué dejar de hacer. Estos son los patrones visuales que convirtieron a la IA en algo aburrido y genérico.

✗ Lo que Claude Design rechaza
  • Gradientes azul-morado El "look de IA" genérico que saturó el mercado entre 2022 y 2025. Comunica tecnología vacía, no inteligencia real.
  • Fuentes geométricas frías Raleway, Montserrat o Futura usadas en titulares sin calor ni personalidad. Transmiten startup, no criterio.
  • Iconos de circuitos y cerebros Los clichés visuales de la IA: neuronas, chips, robots sonrientes. Todos dicen "somos una empresa de tecnología" sin decir nada.
  • Texto en mayúsculas "tecnológico" Párrafos o titulares enteros en uppercase para "parecer más tech". El resultado es agresivo y difícil de leer, no profesional.
✓ Lo que Claude Design propone
  • Tonos terrosos y cálidos Crema, terracota, negro profundo. Paleta que transmite calidez humana sin perder la solidez técnica.
  • Serif + sans para dualidad Playfair Display para emoción e impacto, Inter para claridad y función. El contraste entre ambas crea personalidad sin trucos.
  • Espacio en blanco como elemento El aire entre elementos no es vacío — es diseño activo. Claude Design usa márgenes generosos para que el contenido respire.
  • Fotografía real sobre ilustración genérica Imágenes de personas reales trabajando, pensando, construyendo. No stock photos de personas sonriendo a una pantalla en blanco.

La pregunta que Claude Design responde no es "¿cómo hacemos que esto parezca de IA?" sino "¿cómo hacemos que esto parezca hecho por personas inteligentes?"

Ya dominas el Bloque 1. El siguiente nivel:

Siguiente →

Instala y usa Claude Code desde cero

EXPERTOS AI BUILDER

¿Y si en vez de leer
lo ejecutas?

Te enseñamos a construir tu propio sistema de contenido con IA desde cero.

VER LA COMUNIDAD →