Módulo · Diseño con IA para programadores
Aprende las pocas reglas que separan lo amateur de lo profesional —y aplícalas a tu web real, dentro de tu propio repositorio, dirigiendo a la IA.
De dónde partes · A dónde llegas
En un portfolio o una entrevista, el que mira juzga por cómo se ve. Un buen código dentro de una web fea parece un proyecto malo.
Sabes programar y montas una web que funciona. Pero queda fea: parece una plantilla. No eres diseñador y ni siquiera sabes por qué no transmite profesionalidad.
Dentro de tu propio repositorio. Y lo más importante: te llevas el ojo para detectar qué falla y un sistema para mantenerla así en cualquier proyecto futuro.
No te llevas un PDF de marca que no usarás nunca. Te llevas tu web mejor y una habilidad para toda la vida.
Cómo se llega de A a B
Qué tiene que ver el ojo primero.
Que se lee y no satura.
Dos fuentes y una escala clara.
El aire que da profesionalidad.
Todo convertido en sistema.
Y lo haces dirigiendo a la IA: Claude Design para diseñar y montar el sistema, Claude Code para construirlo en tu código, más herramientas concretas para color, fuentes y logo. No es no-code: todo pasa en tu repo, en tu código de verdad.
El programa
Cada clase se construye en pantalla y termina con algo aplicado a la web del propio alumno. De proyecto feo a web profesional.
Diagnosticamos webs reales: por qué unas se ven profesionales y otras no. Aprendes a ver los cinco fallos típicos y los cazas en tu propio proyecto.
Sales con: tu web mirada con ojo crítico, el punto de partida de todo.
Por qué una pantalla necesita una sola cosa dominante. Usamos Claude Design para generar varias versiones y comparar en vivo cómo cambia todo al ordenar lo importante.
Sales con: la estructura de tu página reordenada para guiar al usuario.
La regla simple para no pasarse: paleta corta, proporción 60/30/10 y contraste para que el texto se lea de verdad. Montas tu paleta con Coolors y la pruebas con Realtime Colors.
Sales con: una paleta definida y comprobada sobre tu web real.
Por qué dos fuentes bien elegidas cambian más que cualquier logo, y cómo montar una escala legible. Eliges tus fuentes (Fontjoy / Monotype) y creas un wordmark en SVG con Recraft.
Sales con: tipografía, jerarquía de texto y una cara para la web.
La clase que más sorprende. El espaciado, el aire y la alineación son el detalle que separa amateur de profesional. Aplicas un sistema de espaciado y ves la misma página pasar a verse cara.
Sales con: tu web «respirando».
Todo lo anterior deja de ser decisiones sueltas. En Claude Design montas tu design system (color, tipografía, espaciado, componentes) leyendo tu propio repositorio.
Sales con: un sistema de diseño propio y reutilizable.
El cierre, donde todo aterriza en tu código. Sincronizas el sistema a Claude Code y le pides que aplique las bases a tu repo. Ves al agente reescribir los archivos y la web aparece rediseñada.
Sales con: tu web, la real, transformada. Antes y después, lado a lado.
Por qué aporta tanto valor
Sus proyectos dejan de parecer amateur, justo lo que más penaliza en portfolio y entrevistas.
Las bases del diseño se usan en todos los proyectos. No caducan como una herramienta de moda.
Aprende a orquestar agentes de IA —diseñar y construir conversando—, que es como se va a programar a partir de ahora.
Todo pasa en su repo, en su código de verdad. Respeta que son programadores.
El formato
7 clases grabadas de ~45 minutos. Cada una se construye en directo y termina con algo aplicado a la web del propio alumno. De proyecto feo a web profesional, capa a capa.
Entrena el ojo, monta tu sistema de diseño y déjalo construido en tu repo.