Crear un sistema de diseño con Claude Design

Si ya usas Claude Design para crear interfaces, piezas para redes sociales o diseños web, seguramente te ha pasado: cada generación sale con colores distintos, tipografías distintas y un estilo que no se parece en nada al anterior. El problema no es la herramienta. El problema es que no le has dado una base sobre la cual trabajar. Y esa base tiene nombre: un sistema de diseño de tu marca.

En este tutorial te voy a enseñar a crear un sistema de diseño con Claude Design partiendo de lo único que muchas veces tienes al arrancar un proyecto: el logo. Nada más. Sin manual de marca, sin paleta definida, sin tipografías elegidas. Te muestro el proceso completo con un proyecto real, con sus iteraciones, sus correcciones y los trucos que uso para que el resultado no grite "esto lo hizo una IA".

¿Por qué necesitas un sistema de diseño antes de pedirle diseños a la IA?

Un sistema de diseño es el conjunto de reglas visuales de una marca: colores, tipografías, tamaños, sombras, botones, tarjetas, formularios, badges e iconografía. Cuando Claude Design tiene ese sistema como referencia, todo lo que genera después —una landing, una pantalla de app, una pieza para Instagram— mantiene la misma paleta, los mismos estilos y un branding homogéneo y correcto.

Sin ese sistema, la IA improvisa en cada generación. Por eso los resultados a veces son buenos y a veces no, y casi nunca son consistentes entre sí. Es el mismo principio que aplico cuando configuro el sistema de diseño en Divi 5: defines las reglas una sola vez y todo el proyecto las hereda. Y si todavía no tienes claro qué es Claude o cómo funciona, empieza por mi guía completa de Claude AI en español y regresa a este tutorial.

El punto de partida: un logo y nada más

El proyecto que uso de ejemplo se llama Elementor Academy. Es una idea que tenía en pausa desde hace tiempo: en su momento un diseñador me desarrolló varias variaciones del logo, elegí mi favorita… y ahí se quedó todo. No hay paleta, no hay tipografías documentadas, no hay manual de marca. Solo el logo. Que, siendo honestos, es el escenario más común cuando un cliente llega contigo: "tengo el logo, hazme el sitio".

Ese es justo el reto de este ejercicio: demostrar que con Claude Design puedes construir un sistema de diseño completo, en modo claro y modo oscuro, partiendo de esa única pieza.

Cómo pedirle el sistema de diseño a Claude Design

Lo primero: copié los tres logos como imagen y los pegué en un proyecto nuevo de Claude Design, en la sección de Design System, sin ningún template seleccionado. Después escribí un prompt donde le expliqué el contexto: que a partir de esos logos de la marca Elementor Academy me ayudara a crear un sistema de diseño completo, que tengo pensado desarrollar un sitio web, posiblemente una aplicación y contenido para redes sociales, y que quería definir la tipografía, los colores, las cajas, las sombras, los tamaños y todo lo relacionado a la marca.

Y cerré el prompt con la instrucción más importante de todas: "pregunta todo lo que necesites preguntar para poder desarrollar este sistema de diseño".

Consejo: Pídele siempre a Claude Design que te haga preguntas antes de generar. La diferencia entre un sistema genérico y uno alineado a tu marca está en el contexto que le das en esas respuestas, no en el prompt inicial.

Para este trabajo elegí el modelo Opus 4.8, porque en un entregable tan importante como el sistema de diseño quiero que la IA se tome su tiempo. Esta es la base de todo lo que viene después — no es el lugar para ahorrar.

Las preguntas de Claude Design (y cómo las respondí)

Claude Design leyó los logos y me devolvió una serie de preguntas muy concretas. Te dejo mis respuestas, porque aquí el criterio importa más que la respuesta en sí:

• ¿Cómo quieres el sistema? ¿Guía de estilos navegable, componentes UI reutilizables o un ejemplo aplicado tipo landing? Le pedí los tres.
• ¿Quién lo usará? Diseñadores, desarrolladores, equipo de redes, uso interno. Todos.
• ¿Qué personalidad transmite la marca? Moderno, tecnológico, premium y sofisticado.
• ¿Modo claro, oscuro o ambos? Ambos — la marca está planteada para funcionar en los dos.
• ¿Tipografía? Le dije que eligiera una que combinara con el logo (spoiler: luego la cambié, y más abajo te cuento por qué).
• ¿Qué componentes cubrir? Colores, gradientes, tipografías, botones, cards, sombras, formularios, badges, iconografía, bordes y radios.
• ¿Qué destino priorizamos? Web, porque es lo primero que voy a construir.
• ¿Idioma del sistema? Español.

Al final agregué un párrafo de contexto extra: que la marca es principalmente educativa, una academia en línea donde se crean y venden cursos, con posibles submarcas de templates. Ese contexto vale oro — orienta todas las decisiones visuales que la IA va a tomar.

El primer resultado: bueno, pero con cara de IA

Lo que generó no me desagradó. La paleta de colores estaba bien resuelta, el sistema de estados para error, info, success y warning era correcto, los gradientes funcionaban y las sombras y elevaciones se veían muy bien. Los botones y las cards, francamente buenos.

Consejo: Las tipografías por defecto son la señal más evidente de un diseño hecho con IA. Haz siempre un trabajo tipográfico propio: define tu tipografía display, la de cuerpo y la mono, y pídele a Claude Design que reconstruya el sistema con ellas.

¿Dónde estaba el problema? En las tipografías. Eligió Sora para títulos, Plus Jakarta Sans para cuerpo y JetBrains Mono para código — que son prácticamente las mismas tipografías que la IA usa siempre para todo. Y el modo oscuro era el mismo modo oscuro que le hace a cualquier otra marca. Ahí es donde el diseño empieza a "oler a IA", y ahí es donde tu criterio como diseñador entra a trabajar.

Ajustar tipografías y pesos

Le pasé las tres tipografías que quería —la del logo para los títulos, una Google Font neutra y legible para el cuerpo y una mono para código— y le pedí que modificara todo el sistema con ellas, esta vez con el effort en High para que le dedicara un esfuerzo mayor al cambio.

🎓 ¿Quieres dominar Claude Design de verdad?
En uxdivi.com/cursos tenemos nuestro Curso de Claude Design donde llevamos esta herramienta mucho más allá del sistema de diseño: flujos de usuario completos, interfaces de baja y alta fidelidad y presentaciones, todo con la misma base de marca. ¡Accede como suscriptor y construye tu primer proyecto completo de diseño con IA!

Aquí apareció un detalle interesante: la tipografía del logo es variable, y en peso 800 se veía aplastada en los títulos. Así que pedí dos ajustes puntuales: que en títulos usara máximo 700 de peso, y que en los botones bajara a 400 o 500, porque el semibold que les había puesto no se veía bien. También le pedí que los badges usaran la tipografía mono, que les da un toque más técnico. Son cambios pequeños, pero exactamente los que separan un sistema decente de uno bien terminado.

Afinar el modo oscuro con ColorZilla

El modo oscuro traía dos superficies: un fondo principal que ya funcionaba y un segundo color que no me convencía. Para identificarlo con precisión usé ColorZilla, una extensión de Chrome que te da el código hexadecimal exacto de cualquier pixel en pantalla. Con el código en mano, le pedí a Claude Design que reemplazara ese color por el Navy 900 de la propia paleta — usando la misma nomenclatura que él mismo creó.

Después quise comparar contra el color Ink, otro de los oscuros del sistema. Lo probó, lo vi… y no. Se veía peor. Así que volvimos al Navy 900 sin drama. Esta es la dinámica real de trabajar con Claude Design: probar, comparar con tus propios ojos y decidir. La IA ejecuta rápido; el criterio lo pones tú.

Consejo: Cuando pidas cambios de color, usa la nomenclatura que Claude Design creó en el propio sistema (Navy 900, Ink, etc.). Así no hay ambigüedad sobre a qué color te refieres y los cambios salen bien a la primera.

Bordes sutiles y ediciones directas sobre el diseño

Revisando el sistema me di cuenta de que los colores de los bordes no estaban definidos — y en el modo oscuro se notaban demasiado. Le pedí que definiera los bordes para ambos modos con una condición clara: que se vean, pero que sean sutiles. Como seguían marcados de más (9% de opacidad en modo claro, 10% en oscuro), pedí bajar la transparencia de todos. No me importaba tanto el color exacto; me importaba la sutileza.

También aproveché la edición directa: seleccionas el elemento, entras a Edit y ajustas el valor del borde en vivo — lo probé al 5% y la diferencia fue inmediata. Y un matiz que también le pedí: que no todas las cards llevaran borde; algunas funcionan mejor solo con sombra. Esa variedad es justo lo que rompe la uniformidad artificial del diseño generado.

Referencias visuales: el truco para quitarle la cara de IA

Aun con tipografías y colores corregidos, el sistema seguía teniendo ese aire de "todo encerrado en cajas con bordes redondeados" típico de la IA. La solución no fue describir con palabras lo que quería — fue mostrárselo.

Me fui a Pinterest y busqué referencias con términos como "modern academy UI" y "modern academy web". Elegí dos imágenes con el estilo que buscaba (una de ellas, de hecho, con colores muy parecidos a los de mi marca), las pegué en el chat y le pedí que refactorizara el sistema basándose en los elementos de diseño de esas referencias: cards diferenciadas, botones diferenciados, sombras y elevación con más intención, más ejemplos aplicados —tarjetas de curso, pricing, preguntas frecuentes— y menos apariencia de web hecha por IA.

Importante: Claude no copia las referencias. Se basa en ellas para refinar el diseño desde donde estaba. Y el salto de calidad fue enorme: el sistema quedó más suave, más profesional, con un hero de ejemplo, bloques de métricas, sección de pricing y preguntas frecuentes que ya se ven como un producto real — y todo funcionando en modo claro y modo oscuro.

¿Cuánto vale un entregable así?

Te lo digo sin rodeos: un sistema de diseño como este, bien trabajado con Claude Design, lo puedes cobrar tranquilamente entre $100 y $300 USD a cualquier persona con una marca que necesite empezar a diseñar su sitio web o su aplicación. Y como paso uno de un proyecto de diseño web funciona todavía mejor: se lo entregas al cliente, lo ve profesional y limpio, y lo acercas muchísimo a visualizar cómo va a ser el producto final que le vas a construir.

🎓 ¿Quieres profundizar en esto?
En uxdivi.com/cursos tenemos contenido premium donde te enseño a convertir flujos con IA como este en servicios que puedes vender: desde el sistema de diseño hasta el sitio completo. ¡Accede como suscriptor y empieza a cobrar por lo que la IA te ayuda a producir!

El siguiente paso: del sistema de diseño al código

Con el sistema listo, lo que sigue es empezar a iterar los diseños reales del proyecto sobre esta base. Habrá cosas que cambien, mejoren o se agreguen conforme avances — lo importante es mantener el sistema actualizado, porque es la fuente de verdad visual del proyecto.

Y cuando llegue el momento de codificar, este documento se vuelve oro: se lo pasas a Claude Code y llega con todo claro — colores, tipografías, componentes, pantallas de referencia — y empieza a construir sin inventarse nada. Si quieres ver ese lado del flujo, en el tutorial de Claude Code para diseñadores te muestro cómo crear webs completas sin saber programar.

Por cierto: este proyecto pienso construirlo con Elementor, en parte porque hoy ya se le puede integrar IA mediante addons de terceros — no es Elementor quien lo hace de forma nativa, pero la opción existe. En el mundo Divi seguimos esperando que Elegant Themes termine su agente; ya te conté mis impresiones sobre el Divi AI Agent y, apenas se puedan integrar modelos de IA con Divi de forma directa, voy a ser el primero en contártelo.

Recomendaciones finales

1. Dedícale tiempo real al sistema de diseño. Es la base de todo lo que vas a generar después — cada minuto invertido aquí se multiplica en los diseños siguientes.
2. Pide siempre que la IA te pregunte antes de generar. Las respuestas que le das valen más que cualquier prompt elaborado.
3. Corrige las tipografías por defecto. Sora y Plus Jakarta Sans son la firma involuntaria de la IA.
4. Usa referencias visuales reales en lugar de adjetivos. Dos imágenes de Pinterest comunican más que diez líneas de prompt.
5. Trata el sistema como un documento vivo: actualízalo cada vez que el proyecto evolucione.

🎓 ¿Quieres dominar Claude Design de forma completa?
En el Curso de Claude Design te enseño a usar esta herramienta a fondo: sistema de diseño, flujos de usuario, interfaces de baja y alta fidelidad y presentaciones — todo partiendo de este mismo logo que viste en el tutorial. Accede como suscriptor y construye tu primer proyecto de diseño con IA de principio a fin.

Conclusión

Crear un sistema de diseño con Claude Design a partir de un logo no solo es posible — es el paso que convierte a la IA en una herramienta consistente en lugar de una lotería visual. Defines la base una vez, la refinas con tu criterio de diseñador y, a partir de ahí, cada pieza que generes para la marca sale alineada. Sube tu logo, pídele que te pregunte y empieza a construir el tuyo hoy mismo.