Crear un sistema de diseño siempre ha tenido una parte bastante insufrible: recopilar logos, localizar colores y jerarquizarlos, cargar tipografías, definir tamaños, nombrar estilos, ordenar componentes, dejar por escrito cómo debe utilizarse cada cosa y un largo etcétera.
Si has trabajado con Figma, seguramente conoces el ritual: Primary Blue, Secondary Blue, Grey 100, Button Primary, Button Secondary… y unas cuantas horas por delante.
Claude Design cambia bastante este proceso.
En lugar de construir toda esa base desde cero, elemento a elemento, puedes proporcionarle materiales que ya utiliza tu marca: logos, manuales de marca, presentaciones, PDFs, archivos de diseño, tipografías o incluso una biblioteca de componentes.
A partir de esas referencias, Claude Design puede identificar los elementos y patrones visuales de la marca para generar una primera versión del sistema de diseño. También puede trabajar a partir de una base de código o de componentes existentes.
En pocas palabras: tú le das las piezas y Claude Design ordena el puzzle.
Y te ahorra una parte del trabajo que, siendo sinceros, nadie estaba deseando hacer.
Pero ¿qué es exactamente un sistema de diseño?
Un sistema de diseño o design system es el conjunto de reglas, estilos y componentes que define cómo debe verse y comportarse visualmente una marca o producto.
Puede recoger elementos como:
- Colores corporativos.
- Tipografías y jerarquías.
- Logotipos.
- Botones y llamadas a la acción.
- Formularios.
- Tarjetas.
- Espaciados.
- Iconografía.
- Estructuras de página.
- Patrones de navegación.
Pero un buen sistema de diseño no se limita a decir qué elementos existen. También establece cómo deben utilizarse.
Un manual de marca puede indicar que tu empresa utiliza azul, blanco y amarillo. Un sistema de diseño va un paso más allá: define qué azul corresponde al botón principal, cómo debe ser ese botón, cuándo utilizarlo y cómo se relaciona con el resto de elementos.
Una precisión terminológica: aunque podemos encontrar búsquedas relacionadas con system design, el término más preciso para este contexto visual es design system. System design suele utilizarse más en el ámbito de la arquitectura de software.
Cómo crear un sistema de diseño con Claude Design
1. Reúne lo que ya tienes
No necesitas empezar preparando un brandbook de 80 páginas para que Claude entienda tu empresa.
Puedes partir de materiales reales que ya utilizas:
- Logotipos.
- Manuales de identidad.
- Presentaciones.
- PDFs corporativos.
- Diseños de Figma.
- Tipografías.
- Prototipos.
- Componentes desarrollados.
De hecho, Anthropic recomienda aportar ejemplos reales y no únicamente especificaciones, ya que un diseño terminado ofrece mucho más contexto sobre cómo funciona visualmente una marca.
La gracia está precisamente ahí: probablemente gran parte de tu sistema de diseño ya exista, solo que está desperdigado entre veinte archivos diferentes.
2. Deja que Claude Design encuentre los patrones
Una vez incorporados los materiales, Claude Design puede analizar las referencias y extraer elementos como la paleta de colores, las familias tipográficas, tamaños, pesos, componentes de interfaz o patrones de layout.
En lugar de introducir todo manualmente, puede partir del trabajo que tu equipo ya ha realizado.
Es decir, en vez de explicarle durante media hora cuál es tu azul corporativo, qué tipografía utilizas y cómo son tus botones, le das ejemplos donde todo eso ya está aplicado.
Básicamente, le encargas el trabajo sucio.
Además, si el sistema de diseño ya existe como componentes React, puedes utilizar /design-sync en Claude Code para incorporar esos tokens y componentes al trabajo de Claude Design.
3. Revisa antes de convertirlo en ley
Aquí conviene frenar un poco el entusiasmo tecnológico.
Que Claude Design detecte que llevas utilizando un botón durante tres años no significa necesariamente que ese botón sea bueno.
El sistema generado necesita revisión y criterio humano, como ocurre con cualquier proceso asistido por IA.
Diseño, UX o la persona responsable de marca debería comprobar que los elementos detectados son correctos, eliminar inconsistencias y añadir aquellas reglas que una herramienta no puede deducir simplemente mirando archivos.
La IA acelera la organización. El criterio sigue siendo humano.
¿Qué puedes hacer después con ese sistema de diseño dentro del mundo del marketing digital?
Aquí aparece la parte realmente interesante para un equipo de marketing digital.
Una vez configurado, Claude Design puede utilizar el sistema de diseño de la empresa como base para nuevos trabajos, manteniendo colores, tipografías y patrones definidos.
Ya no tienes que empezar cada proyecto con el clásico: “Usa este azul, esta tipografía, este logo y, por favor, no inventes nada raro”
Wireframes y landing pages
Imagina que el equipo de Paid Media necesita una landing específica para una campaña.
Puedes definir la estructura que quieres (hero, formulario, beneficios, testimonios, FAQ, CTA final) y generar un primer planteamiento visual utilizando directamente el sistema de diseño.
Claude Design permite crear diseños y prototipos interactivos, por lo que puede resultar especialmente útil para pasar rápidamente de una idea abstracta a algo que el equipo pueda ver y discutir.
No significa que la primera landing que genere vaya a ser definitiva, eso sería tener demasiada fe. Pero sí permite llegar mucho antes al momento realmente útil: tener algo delante y empezar a mejorarlo con tus conocimientos y aprendizajes previos.
Esa estructura básica de la que partir ya te la has ahorrado y tendrás más tiempo para implementar y mejorar esa parte más estratégica y creativa.
Propuestas de CRO y UX
También puede ser útil para visualizar hipótesis antes de desarrollarlas.
Si queremos probar un hero diferente, subir un formulario, cambiar la jerarquía de contenidos o reorganizar una página, podemos convertir esa idea en un boceto muy visual para el cliente antes de dedicar recursos a implementarla.
Esto ayuda a que marketing, diseño, cliente y desarrollo hablen sobre prácticamente la misma cosa.
Y evita algunas reuniones en las que cinco personas intentan imaginar qué significa exactamente poner este bloque un poco más arriba. Todos lo hemos experimentado en nuestras carnes.
Presentaciones comerciales
Otro terreno evidente son las presentaciones.
Propuestas comerciales, auditorías, estrategias de marketing, informes, pitches o presentaciones para clientes pueden partir directamente del mismo lenguaje visual.
Claude Design puede trabajar con nuevos diseños y decks utilizando el sistema de diseño configurado.
Para una agencia supone poder concentrarse antes en el contenido, el argumento y la historia que queremos contar, dejando de buscar aquella presentación de 2024 porque había una slide que nos gustaba mucho…
PDFs, dossiers y one-pagers
Casos de éxito, fichas de servicio, guías, lead magnets, documentos comerciales o resúmenes de campaña también pueden beneficiarse del mismo sistema.
Claude Design está pensado para crear, entre otros formatos, one-pagers y trabajos visuales dentro del mismo entorno.
Esto ayuda a evitar uno de esos pequeños dramas habituales del marketing: que cada PDF de la empresa parezca diseñado por una compañía distinta.
Interfaces y prototipos web
Las posibilidades van más allá de los documentos.
También podemos trabajar sobre interfaces como:
- Nuevas páginas web.
- Formularios multistep.
- Áreas privadas.
- Páginas de precios.
- Calculadoras.
- Comparadores.
- Flujos de registro.
Y si la empresa ya dispone de un sistema de diseño desarrollado en React, Claude Code puede leer sus tokens y componentes mediante /design-sync para trabajar con esos elementos reales.
Aquí la conexión entre marketing, UX, diseño y desarrollo empieza a ponerse especialmente interesante.
Claude y Claude Design: ¿qué diferencia hay?
Conviene separar ambos conceptos.
Claude es el entorno general desde el que puedes investigar, redactar, analizar información, trabajar con archivos, programar o resolver tareas mediante conversación.
Claude Design está específicamente orientado al trabajo visual. Permite crear diseños, prototipos interactivos y documentos visuales, trabajar directamente sobre un lienzo y utilizar el sistema de diseño de la empresa como base. Actualmente se integra dentro de las conversaciones de Claude, Artifacts y Claude Code.
La diferencia se entiende mejor con un ejemplo:
Puedes utilizar Claude para analizar una landing y decidir qué estructura debería tener. Después puedes utilizar Claude Design para convertir esa estructura en una propuesta visual que ya respete tu identidad.
Uno te ayuda a pensar qué construir. El otro también te permite empezar a verlo.
Menos tiempo explicando tu marca, más tiempo utilizándola
Probablemente este sea el mayor cambio que aporta un sistema de diseño en Claude Design.
Las empresas ya han tomado cientos de decisiones visuales: colores, tipografías, logos, componentes, estructuras o patrones.
El problema es que muchas veces ese conocimiento está repartido entre Figma, presentaciones, manuales, PDFs y la cabeza de esa persona del equipo a la que todo el mundo termina preguntando.
Claude Design permite reunir buena parte de ese contexto y convertirlo en una base reutilizable para nuevos trabajos.
El ahorro no está únicamente en diseñar más rápido. Está en dejar de reconstruir tu marca cada vez que quieres crear algo nuevo.
Y sobre todo, dejar de introducir por decimoquinta vez el mismo código HEX. Eso se agradece.