Un sistema de diseño con IA antes de escribir código

Vas a armar un documento maestro de diseño —colores, tipografías, espaciados y componentes— que la IA va a leer antes de generar una sola línea de código. Es para vos si armás webs con herramientas de IA y te pasa lo que me pasaba a mí: cada pantalla sale de un color distinto, con botones que no se parecen entre sí. Un "sistema de diseño" es exactamente eso: las reglas visuales escritas una sola vez, para que todo lo demás las respete.

Antes de empezar

• Una IA de chat que acepte instrucciones largas (Claude, ChatGPT o similar; con el plan gratis alcanza para esto).
• Saber para quién es la web: rubro, público, y qué sensación querés transmitir.
• Entre 30 y 45 minutos. Se hace una vez por proyecto y te ahorra días de retoques.

Paso 1 — Definí la personalidad en palabras, no en colores

Antes de hablar de hexadecimales, escribí 5 adjetivos que describan la marca y 2 que la describan mal. Suena blando, pero es lo que evita que la IA te devuelva "una web linda" genérica.

Marca: clínica dental.
Es: confiable, moderna, limpia, cercana, profesional.
NO es: infantil, corporativa fría.
Público: familias de 30 a 55 años que agendan por el celular.

Guardá ese bloque. Es la brújula de todo lo que sigue.

Paso 2 — Generá los tokens de diseño

Los "tokens" son los valores concretos: qué colores, qué fuentes, qué tamaños. Pedíselos a la IA con restricciones duras, porque si la dejás libre te da ocho colores y tres degradados.

Con la personalidad de arriba, generá un sistema de diseño con:
- 1 color primario, 1 acento y 4 neutros (fondo, superficie,
  texto, texto suave). Hex exactos.
- 2 tipografías de Google Fonts: una para títulos, una para
  texto. Justificá la elección.
- Escala de espaciado en múltiplos de 4px (4, 8, 16, 24, 32, 48, 64).
- Radio de bordes y estilo de sombras (uno solo, usado siempre igual).
Devolvémelo como tabla, sin explicaciones largas.

Revisá el contraste: el texto tiene que leerse sin esfuerzo en el celular, a pleno sol. Si dudás, pedile a la misma IA que verifique el contraste entre tus pares de colores y te diga cuáles fallan.

Paso 3 — Definí los componentes base

Con los tokens listos, pedile las reglas de los 4 o 5 componentes que se repiten en toda web: botón primario, botón secundario, card (tarjeta), input de formulario y barra de navegación. Para cada uno: qué colores usa, espaciado interno, radio de bordes y qué pasa al pasar el mouse. No hace falta código todavía; alcanza con la descripción precisa.

Paso 4 — Guardalo como archivo maestro

Pegá todo en un archivo DISENO.md dentro del proyecto. A partir de acá, la regla es una sola: ningún prompt de código sin mencionar el archivo.

Leé DISENO.md y respetalo al 100%.
Generá la sección de precios: 3 planes en cards,
usando los tokens y componentes definidos ahí.
No inventes colores ni fuentes nuevas.

Si tu herramienta lee archivos del proyecto (como Claude Code o similares), mejor todavía: lo encuentra sola en cada sesión y no tenés que repetirlo.

Paso 5 — La prueba de fuego

Pedile a la IA una página de demostración con todos los componentes juntos: títulos, párrafos, botones, cards, un formulario. Abrila en el navegador y comparala contra DISENO.md como si fueras auditor. Todo lo que no coincida se corrige en el archivo o en el código, pero nunca queda "más o menos". Esa página te sirve después como vara para cada pantalla nueva.

Errores comunes

• Hacer el sistema después de la web. Al revés no funciona: ya generaste 10 pantallas inconsistentes y arreglarlas cuesta más que empezar de cero. El sistema va primero, siempre.
• Demasiados colores. Si tu paleta tiene más de 6 valores, la IA los va a mezclar mal. Un primario, un acento, neutros. Punto.
• Aceptar la primera propuesta sin verla en pantalla. Los hex que se ven bien en una tabla pueden verse lavados en el navegador. Probá antes de fijar.
• Cambiar cosas "solo por esta vez" fuera del archivo. A la tercera excepción el sistema murió. Todo cambio visual entra primero por DISENO.md y de ahí se propaga.

Siguiente paso

Con el sistema andando, el salto natural es nutrirlo con referencias reales: analizar el diseño de marcas grandes, extraer sus principios y traducirlos a tus propios tokens. Ahí es donde una web hecha con IA deja de verse "hecha con IA". Y si querés ir un paso más técnico, investigá cómo llevar tus tokens al código con variables CSS: es la versión "en serio" de este mismo archivo.