Cómo aprendí a usar Claude Design (sin haber estudiado diseño)

No estudié diseño. Todo lo que sé lo aprendí en estos 5 años como developer y en los millones de pimponeos con QA, que me entrenaron el ojo para los detalles a los palazos.

Aun así, acá te cuento cómo uso Claude Design.

Spoiler: no hay un prompt mágico como cuenta cada uno por ahí. Hay un proceso y hay que laburarlo. Claude no te va a hacer todo el trabajo, pero sí gran parte.

Qué conseguía al principio con Claude Design

Obviamente la idea de todos siempre arranca en hacer la landing más única del universo, y lo que termina pasando es que tenés la misma estructura que literalmente TODAS las webs de internet.

Animaciones, tipografías como la serif (lo más quemado en diseño estos últimos años), medidas, bordes, layouts muy salidos de librerías UI medio pelo.

Normalito, prolijo... pero sin alma.

Lo primero que cambié: saber qué quería

Sé que parece una pavada, pero es lo más importante. Entender cómo querés que se vea el resultado final, o al menos tener una idea, para poder guiar a Claude en el proceso es muy clave.

Sin eso caés en los mismos AI-loops de siempre. Iterás la landing 10 veces y lo único que conseguís es quemar tokens para terminar con algo igual a la v1.

Lo segundo más importante son las referencias. Qué me gustaba y qué iba con lo que la marca quiere comunicar. Con referencias visuales claras, a Claude le es mucho más fácil entender lo que uno quiere.

Referencias, pero sin copiar

Antes de abrir Claude Design busco inspiración y veo qué estilo le quiero dar al diseño, sea de app o de producto:

• Research a mano: webs del mismo rubro de lo que quiero diseñar.
• Las pruebo, veo qué animaciones me gustan, loaders, transiciones, etc.
• Uso mucho styles.refero.design para darle referencias a Claude de algo muy específico que en palabras es muy difícil de explicar.

Ojo con esto: no cierres a Claude en la referencia. Si lo hacés, más que un diseño estás haciendo una copia barata de lo que te gustó, y eso está pésimo.

Por eso pido variantes de esa referencia: variantes de layout, de una sección, de un fondo. Elegís la que va o, si no te cerró ninguna, pedís reevaluar en base a la opción más adecuada.

Desktop primero, mobile después

Primero testeo desktop (entiendo todo lo de mobile-first bla bla bla, pero así me gusta a mí 🤫). Cuando lo tengo como quiero, voy a mobile.

Ahí evalúo los puntos más importantes: cuáles se pueden transferir y cuáles hay que reevaluar, porque en mobile, como todos sabemos, no se pueden resolver de la misma forma.

Donde Claude flaquea: las animaciones

En layouts, responsive y medidas simétricas es muy preciso, porque mantiene los mismas reglas para todo.

Lo que más me costó fue la parte creativa: lograr animaciones y transiciones verdaderamente profesionales. Ahí es justamente donde Claude flaquea, y nosotros tenemos que ser lo más precisos en el pedido para que el output no termine siendo esto:

Por eso las referencias ayudan muchísimo.

Y cuando algo no queda, corrijo con pedidos chiquitos y concretos. Con el fondo del hero, por ejemplo, fue algo así:

"Más grande, más abajo, que ocupe todo el recuadro a la derecha del título sin tocar el texto."

De a poquito, hasta que queda.

El famoso design system

En mi caso lo armé después de la landing, ya que antes de eso no tenía cerrado qué quería. Con la landing terminada, me quedaba toda la parte restante de diseño, y todo tenía que tener la misma estética para lograr esa homogeneidad.

Si todo es "parecido" pero usás medidas, tipos o hasta colores distintos (por dios, no lo hagan), vas a tener una mezcla de cosas sin identidad. Y lo que tenemos que buscar es eso: una identidad de marca.

Hacerlo en ese orden fue un acierto total, porque ya tenés mapeado todo lo que hiciste en el proyecto.

Tip que aprendí: a Claude le es más fácil armarlo si manejás un DESIGN.md en tu proyecto que si le tirás la URL y que se arregle. Con la URL tiene que mapear toda la web y es cantado que algo se olvida. El DESIGN.md tiene las reglas de diseño de tu proyecto, y eso es VITAL para un design system.

El resultado

Con este portfolio hice lo mismo, tanto la primera versión como la v2, y el salto también fue muy notorio. Todo gracias a estos pasos.

Qué nunca hacer

• Abrir Claude Design sin saber qué querés.
• Seguir las tendencias porque sí (sí, te hablo a vos, amante de la serif, todos alguna vez lo fuimos).
• Copiar la referencia tal cual en vez de pedir variantes. Eso no se hace.
• Usar medidas, tipos o colores distintos en cada pieza.

Para terminar

Esto no es la verdad absoluta, es la forma que encontré y que hoy me funciona. Como todo en IT, va a ir mutando y la idea es encontrar un proceso con el que te sientas cómodo e ir iterando.

Claude Design no te va a convertir en diseñador. Pero si sabés lo que querés, te deja muchísimo más cerca de lo que te imaginás.

Espero que te haya servido, te mando un abz 🙌🏻