Subir de nivel el diseño con Claude: 25 trucos prácticos en 13 minutos

Lo primero que delata un diseño generado por IA no es el color sino la insipidez: tipografía por defecto, frases genéricas, iconos desparejados. El ponente parte de esta observación y reparte 25 trucos en tres capas: bases, nivel medio y avanzado. La tesis es simple pero audaz; con el material de contexto adecuado, un agente puede alzar una mano principiante al nivel vitrina. Tomo este marco en serio, porque el problema rara vez está en el talento del modelo sino en lo que le entregamos.

Bases: sistemas de diseño y préstamo de estilo

La primera parada es montar un sistema de diseño . Abrir un sistema nuevo en la interfaz de diseño de Claude (claude.ai/design) y volcar colores, tipografías y logo de la marca funda todo lo que se producirá después. Lo agradable es el innecesario punto cero: se puede subir una presentación querida, un sitio o una captura y hacer extraer colores y componentes. Según la ayuda propia de Anthropic, Claude Design genera en conversación y se apoya automáticamente en el sistema adjunto; la insistencia del ponente reposa exactamente ahí. El segundo truco cuenta entre los atajos más rentables: la galería de Refero, en styles.refero.design, aloja recetas legibles por IA de productos reales como Mercury y Linear, con colores, tipos y espaciados en texto copiable. Se copia un sistema querido, se pega en Claude, se añaden los cambios deseados, y se consigue una base de calidad de un golpe. El tercer truco va más lejos: en vez de perderse entre miles de opciones, se entrega el enlace de la galería al modelo para que elija los tres sistemas más cercanos al negocio.

El cuarto truco recuerda el límite de la interfaz web: la apli de diseño del navegador no alcanza los archivos del ordenador. La corrección propuesta es definir el sistema de diseño como habilidad personalizada del lado de Claude Code o agente de escritorio; un comando estilo Duolingo, por ejemplo, habla el mismo idioma en cada llamada. Según el ponente, la mayoría de los trucos del vídeo funcionan también en el agente de código gracias a esta flexibilidad; lo que cuenta es pues una forma de trabajar más que un producto único.

El quinto truco toca las tipografías, y ahí veo la ganancia más barata de la lista. El trabajo que conserva la fuente por defecto se denuncia al instante; elegir una familia adecuada en un servicio gratuito como FontShare, nombrarla en la consigna o volcar su archivo en el sistema endereza el aspecto de golpe. El padrino de FontShare, el Indian Type Foundry, declara estas fuentes gratuitas incluso para uso comercial; herramientas como FontJoy generan parejas título-texto para quien busque acordes. El ponente sugiere además enquistarlo en el sistema en vez de analizar rivales en plena conversación. El sexto truco versa sobre la redacción: aun con visuales impecables, las frases con olor a IA ahuyentan al público. La sugerencia es pedir a Claude estudiar los cinco mejores rivales del campo y cocer los patrones en el sistema de diseño. La producción se alimenta así de la lengua real del sector en vez del fraseo listo del modelo. El séptimo truco prolonga esta lógica: fusionar deliberadamente dos sistemas, tomar la tipografía de uno y el color más el movimiento del otro para fundirlos por el modelo, hace nacer un idioma original que nunca parece copia.

Nivel medio: tipo, texto y complementos visuales

El octavo truco tapa el ángulo muerto de la herramienta de diseño: Claude Design no genera solo ni imágenes ni vídeos, pero puede conectarse a un servicio de generación externo. El ponente cita Kie.ai como ejemplo; el servicio reúne muchos grandes modelos visuales y de vídeo bajo un techo con pago por uso, y la instalación se deja a Claude Code. El mercado actual de Kie.ai cubre del vídeo por texto al retoque de imagen, de modo que la conexión nunca depende de un solo modelo. El noveno truco pega el enlace de un proyecto terminado en una sesión nueva para heredar sistema y materiales; el trabajo pasado deviene punto de partida del nuevo.

El décimo truco sistematiza el gusto: montar una biblioteca de referencias personal que acopia el trabajo admirado desde sitios como Dribbble, Awwwards y X. El ponente describe una extensión de navegador en un clic que construyó, Rubric References; la página guardada entra al archivo con captura y nota, y luego Claude puede consultar ese archivo. El undécimo truco es una habilidad de auditoría llamada Impeccable: barre un sitio en jerarquía, espaciado, tipo, accesibilidad y estados vacíos, luego los corrige, volviendo pulido un buen borrador.

El duodécimo truco fija el tono de voz: construir una habilidad de tono con lista de palabras vetadas, giros personales y estilo de habla. Reglas listas pueden sumarse; el estándar ASD-STE 100 para inglés técnico, la guía de estilo de documentación para desarrolladores de Google y el estilo de escritura de Apple se citan como ejemplos. El decimotercer truco es 21st.dev: componentes de interfaz compartidos por la comunidad abierta, listos para entregar directo al agente. Se copia un trozo querido y se pega al modelo; en vez de dibujar de cero, incrusta una sección probada en la página, y el soporte MCP de 21st permite hacerlo sin salir del editor. Los trucos decimocuarto y decimoquinto corren en el mismo surco: el sitio ReactBits ofrece piezas audaces como textos animados, tarjetas efecto cristal y juegos de cursor; CanvasUI.dev aloja una treintena de efectos gratuitos, con cristal líquido roto y revelados de partículas como muestras. La lógica es idéntica: tomar el código de lo que guste, entregarlo a Claude, hacerlo añadir a la interfaz o guardar en el sistema de diseño. Así los toques vistos en sitios punteros aterrizan en la página sin quemar tokens.

Bibliotecas de componentes e iconos

El decimosexto truco enuncia una verdad amarga: Claude dibuja a menudo mal los iconos. La corrección es descargar todo un juego de un solo estilo desde una fuente como Iconify y entregar la carpeta al modelo; se obtienen iconos listos y el modelo gana una referencia coherente para lo siguiente. El universo de Iconify cubre cientos de juegos y cientos de miles de iconos, cargando solo los iconos usados en una página. El decimoséptimo truco impone el formato SVG al pedir dibujos nuevos: vectorial, queda nítido a todo tamaño, su color cambia a mano, y hasta puede animarse. El decimoctavo truco trata los iconos animados con Lordicon: iconos, miles de ellos gratis, se descargan en archivos Lottie y se sueltan en el proyecto; como la animación llega incrustada en el código, cuenta como un peldaño sobre el SVG plano. La biblioteca de Lordicon ha alcanzado decenas de miles de iconos con color, velocidad y tamaño ajustables al exportar. El decimonoveno truco es una sugerencia de marcador único: una guía llamada Creator's Toolbox que reúne más de 150 recursos de diseño gratis en una lista: componentes animados, efectos 3D, iconos SVG, galerías de logos y kits de maquetas.

El vigésimo truco convoca las reglas de interfaz de Apple: la empresa publica estas reglas abiertamente, con maquetación, tamaños de tipo, zonas táctiles y colores definidos de antemano. Convertirlas en habilidad y pasar por ellas al modelo al dibujar una pantalla de apli suprime los errores de tanteo. La guía de interfaz humana de Apple da tamaños por defecto y mínimos por plataforma para la legibilidad y exige la jerarquía por el equilibrio de grosor y color. El vigésimo primer truco es GSAP: la biblioteca JavaScript de GreenSock fluidifica tareas como secciones al desplazar y textos revelados, y las grandes agencias también la prefieren. Su sitio dice que se puede animar todo, y con la extensión de desplazamiento las coreografías complejas caen a pocas líneas.

Avanzado: reglas, movimiento y comandos

El cuarteto final cubre el frente de diseño del agente de código. El vigésimo segundo truco es el comando /design: un tablero virtual se abre con una idea o una captura, llegan espacios editables estilo Figma, pero la diferencia es que el agente conoce todo el proyecto y sus reglas. El vigésimo tercero es /tweak: construir el panel de deslizadores del lado web como habilidad propia del lado código, jugar con tipo, espaciado y colores y luego volcar el resultado en el diseño. El vigésimo cuarto es texto a animación: extraer un guion sellado por palabra con Whisper, pedir a Claude elegir los momentos que merezcan animación, y producir clips calzados a la voz vía Hyperframes. El ponente dice que las animaciones de este vídeo se hicieron así.

El vigésimo quinto y último truco recoge todo en un sistema operativo de diseño : una pequeña apli que exhibe el trabajo terminado e indexa cada visual y vídeo generados; ahí se halla el patrón buscado mientras Claude alcanza los mismos archivos. El equipo del ponente lo explota como biblioteca de elementos, con materiales 3D, animaciones e iconos SVG con los colores de la marca en espera de reuso. La lista se cierra aquí y se ata al primer punto: sin sistema los trucos quedan números sueltos, con sistema componen como intereses.