Diseño de interfaces
Haz que tu app no parezca una plantilla genérica. Tailwind, shadcn/ui y buen gusto. 5 unidades, 14 lecciones interactivas y retos prácticos. Con LINDO para resolver tus dudas.
Incluida en Pro · 14 lecciones · 53 retos.
Para quién es
- Tus apps funcionan pero parecen una plantilla.
- Quieres entender jerarquía, color y tipografía sin estudiar diseño gráfico.
- Quieres interfaces accesibles que funcionen bien en el celular.
Qué vas a construir: Una página que se ve y se usa bien
La página principal de tu producto publicada (la página de entrada de tu herramienta o la página de tu negocio con su formulario de reserva o de contacto), con jerarquía clara, que funciona en el teléfono, con un formulario usable y estados cuidados.
- Define tu mini sistema visual
- Publica la primera versión
- Hazla funcionar en el teléfono y cuida los estados
- Un formulario que no frustra
- De una referencia a tu página, y revisión final
Unas 7 horas con Claude Code o Cursor (v0 sirve para un primer boceto), Tailwind y shadcn/ui, GitHub y Vercel o Netlify, un verificador de contraste.
Fundamentos visuales
- Espaciado y jerarquía: Ordena una pantalla con espacio y haz que lo importante se vea primero.
- Sistemas de color: Reparte un trabajo a cada color y comprueba que tus textos se leen.
- Tipografía que funciona: Elige una fuente, define tus tamaños y escribe el texto antes de diseñar.
Tailwind y componentes
- Fundamentos de Tailwind: Lee las clases de Tailwind y pide cambios de estilo con precisión.
- Diseño adaptable con Tailwind: Haz que una misma página se vea bien en teléfono, tablet y computadora.
- Primero el teléfono: Diseña para el pulgar y comprueba tu página con una sola mano.
- shadcn/ui: componentes listos: Añade componentes ya hechos a tu proyecto y aprende a leer sus colores.
Experiencia de uso
- Reducir la fricción: Encuentra dónde se atasca la gente en tu app y quita esos tropiezos.
- Estados de la interfaz: Diseña lo que se ve cuando algo carga, no hay datos o falla.
Formularios y modo oscuro
- Formularios que no frustran: Arma un formulario corto que se complete sin errores desde el teléfono.
- Modo oscuro: Añade un modo oscuro que se lea bien y recuerde la elección de cada persona.
De la referencia a tu pantalla
- Animaciones y microinteracciones: Usa animaciones cortas que confirmen acciones sin estorbar.
- Sistemas de diseño: Deja escritas tus decisiones de diseño para que tu agente las siga siempre.
- Del diseño al código con IA: Convierte una captura o un boceto en una pantalla real con tu agente.
Lección de muestra: Respira: El espacio es tu amigo
Abre cualquier app hecha con prisa y verás lo mismo: todo pegado. Títulos encima de los textos, botones tocando los bordes, tarjetas sin aire. No falta color ni decoración: falta espacio. El espacio en blanco no es espacio desperdiciado; es lo que le dice al ojo dónde termina una cosa y empieza la siguiente.
Hay dos tipos de espacio y conviene distinguirlos: → Padding: el aire por dentro de un elemento. Es la distancia entre el texto de un botón y su borde. → Margen o separación (gap): el aire entre un elemento y el siguiente. Es la distancia entre dos tarjetas.
En este curso los estilos se escriben con Tailwind, que usa nombres cortos llamados clases (lo verás a fondo en la unidad 2). Por ahora basta con saber leerlas: el número se multiplica por 4 píxeles. Así, p-6 es un padding de 24 px, gap-4 son 16 px de separación y gap-16 son 64 px.
Una escala que funciona casi siempre: → Dentro de tarjetas y cajas: p-6 o p-8 (24 o 32 px). → Entre elementos pequeños, como un título y su texto: gap-4 (16 px). → Entre secciones: gap-8 (32 px). → Entre bloques grandes de una página: gap-16 (64 px).
Lo importante no son los números exactos, sino usar siempre los mismos. Si una tarjeta tiene 24 px de aire y la de al lado 17, la página se siente desordenada aunque nadie sepa decir por qué.
Regla práctica: cuando dudes, agrega espacio. Y cuando le pidas una pantalla a tu agente, dilo con palabras: "usa espaciado generoso y una escala consistente".
Ana abre la página que generó su agente: el título toca el texto y las tarjetas de servicios se tocan entre sí. ¿Qué pide primero?
- Un fondo con degradado y más color en las tarjetas
- Letra más pequeña para que todo quepa sin tocarse
- Más aire dentro de las tarjetas y entre bloques
Preguntas frecuentes
¿Necesito Figma?
No. El curso trabaja con un mini sistema visual que aplicas directamente en código con IA y Tailwind. Figma es opcional.
¿Cuánto cuesta el curso de diseño de interfaces?
Está incluido en el plan Pro, que abre las 14 rutas: US$14.99 al mes, US$59 al año o US$99 en un solo pago (Lifetime).
¿Cuánto tiempo lleva?
Son 14 lecciones cortas con 53 retos, más el proyecto final, que lleva alrededor de 7 horas de trabajo. Avanzas a tu ritmo.
¿Necesito conocimientos previos?
Te recomendamos haber hecho antes Vibe Coding: fundamentos. Es una recomendación, no un bloqueo: puedes empezar igual.
¿Hay certificado?
Sí. Con todas las lecciones completas y el proyecto final aprobado obtienes un certificado verificable con enlace público.