16 abril 2026

Cómo pasar de UI genérica a diseño premium usando awesome-design-md

awesome-design-md: el truco para que la IA deje de diseñar interfaces feas

Vale, te voy a ahorrar tiempo: si estás usando IA para programar interfaces y todo te sale con pinta de plantilla cutre… no eres tú, es la falta de contexto.

Aquí entra awesome-design-md, un repo que básicamente dice: “oye, en vez de pedirle magia a la IA, dale instrucciones de diseño claras”. Y lo hace con algo tan simple que duele: archivos Markdown.

Sí, Markdown. Nada de Figma, nada de tokens raros, nada de pipelines complejos. Un archivo llamado DESIGN.md donde defines colores, tipografías, espaciados, componentes… y listo. Lo metes en tu proyecto y le dices al agente: “usa esto”. Fin.

La idea es potente porque soluciona un problema real: las IAs programan bien, pero diseñan como si vivieran en 2014. Botones genéricos, layouts reciclados… todo correcto, pero sin alma.

Este repo lo que hace es convertir el “gusto” en texto reutilizable. No estás copiando componentes, estás copiando criterios de diseño.

Y aquí está la magia: puedes hacer que tu app parezca Stripe, Notion o Apple simplemente cambiando un archivo. Literalmente eliges un estilo y la IA lo sigue como si fuera un manual de marca.

Además, cada DESIGN.md no es un resumen cutre. Tiene de todo:

  • paleta de colores con roles semánticos
  • jerarquía tipográfica completa
  • estilos de botones, inputs, cards
  • reglas de espaciado y layout
  • comportamiento responsive
  • incluso “qué NO hacer”

O sea, es como pasarle a la IA el cerebro de un diseñador comprimido en texto.

Y lo mejor: funciona porque Markdown es justo el idioma que las LLM entienden mejor. No hay que parsear nada raro.

Ahora bien, tampoco es la panacea.

#diseñografico #uxui #frontend #ia #programacion #webdesign #openSource #designsystems #markdown #aiTools

11 abril 2026

Theme Toggle con animaciones brutales: cómo usar View Transitions API fácil

Vale, vamos al grano. Cambiar entre modo claro y oscuro ya no es suficiente. Si tu web todavía hace ese cambio cutre sin animación… estás perdiendo una oportunidad brutal de destacar.

La demo de https://theme-toggle.rdsx.dev/ es justo lo contrario: un ejemplo simple pero muy potente de cómo hacer transiciones entre temas que parecen magia. Y lo mejor, no necesitas un framework raro ni 200 líneas de código.

La base de todo esto es la View Transitions API, una API moderna del navegador que te permite animar cambios entre estados de la UI de forma nativa. Nada de hacks, nada de trucos raros. Directo al grano.

De hecho, el propio ejemplo te deja claro lo absurdo de simple que puede ser:

if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);

Ya está. Literalmente eso. Con eso puedes envolver el cambio de tema y convertirlo en una transición animada.

Aquí es donde viene lo interesante. El toggle no se limita a cambiar colores, sino que puedes meterle creatividad: máscaras circulares, efectos blur, animaciones con SVG, clip-paths… incluso GIFs si te vienes arriba.

Y esto cambia totalmente el juego. Porque ya no estás haciendo un “modo oscuro”, estás creando una experiencia.

Piensa en esto: cuando el usuario hace clic, no solo cambia el tema, siente que la web responde, que hay una transición cuidada. Eso es UX del bueno.

Además, este enfoque encaja perfecto con cómo ya funcionan los toggles clásicos. Normalmente solo cambias una clase en el <html> o guardas el estado en localStorage para recordar la preferencia del usuario . Aquí haces lo mismo… pero con esteroides visuales.

Otro punto clave: esto es totalmente personalizable. No estás atado a un estilo concreto. Puedes hacer:

  • Animaciones tipo “círculo que se expande”
  • Transiciones desde una esquina
  • Efectos tipo eclipse
  • Cambios con degradados o blur

Y todo controlado con CSS + SVG.

Si estás aprendiendo front, este tipo de recursos son oro. Porque te enseñan algo muy importante: no siempre necesitas más librerías, necesitas entender mejor el navegador.

Y sí, esto se puede integrar perfectamente con Tailwind, React, Astro o lo que quieras. Al final, el toggle sigue siendo un botón que cambia estado. Solo que ahora lo envuelves en una transición.

En resumen:

  • Código mínimo
  • Impacto visual máximo
  • UX mucho más pro

Y sobre todo, algo que la mayoría de webs todavía no está usando. Ahí tienes ventaja.

#Frontend #JavaScript #UX #UI #WebDesign #DarkMode #CSS #SVG #ViewTransitions #DesarrolloWeb #Programación

30 enero 2026

Guía de Optimización de Fuentes: El Secreto del SEO Técnico

Optimización de Fuentes

¿Sabías que las fuentes suelen ser uno de los recursos más pesados de una web? Si no las optimizas, tus usuarios verán una pantalla en blanco o un salto de texto brusco al cargar. Para Google, esto se traduce en una mala experiencia de usuario y peores métricas en Core Web Vitals.

Aquí te explico cómo dominar el rendimiento de tus fuentes en 4 pasos:

1. Usa el formato WOFF2

Olvídate de TTF o OTF para la web. WOFF2 es el estándar de oro. Utiliza una compresión superior (hasta un 30% mejor que WOFF) que reduce drásticamente el tiempo de descarga.

2. Implementa font-display: swap

Este es el truco maestro para el SEO. Al añadir esta propiedad en tu CSS, le dices al navegador: «Muestra una fuente del sistema primero y, en cuanto la fuente personalizada esté lista, cámbiala».

  • Beneficio: Evitas el «Flash of Invisible Text» (FOIT) y mejoras el tiempo de renderizado percibido.

3. Precarga las fuentes críticas (preload)

Si usas una fuente específica para tus títulos (H1), no esperes a que el navegador descubra el CSS para empezar a bajarla. Usa un rel="preload" en el <head> de tu HTML:

<link rel="preload" href="/fonts/mi-fuente.woff2" as="font" type="font/woff2" crossorigin>

4. Haz un «Subsetting» (Subconjuntos)

¿Realmente necesitas los caracteres cirílicos, griegos o los símbolos matemáticos de esa fuente? Probablemente no.

  • Acción: Recorta la fuente para que solo incluya los caracteres que usas (ej. Latín). Esto puede reducir el peso del archivo de 100kb a solo 15kb.

10 noviembre 2025

HTML5 UP: plantillas web gratis que se ven como si las hubieras pagado

Si alguna vez has buscado plantillas web gratis, sabes que la mayoría parecen sacadas de otra época o llenas de errores. Pero hay un sitio que rompe con eso: HTML5 UP.

Este proyecto, creado por AJ, el mismo tipo detrás de Carrd y Pixelarity, ofrece un montón de plantillas modernas, limpias y totalmente gratuitas. Sí, gratis de verdad —sin registros raros, sin versiones “pro”, y sin sorpresas.

Cada plantilla está hecha con HTML5, CSS3 y un poquito de JavaScript, sin frameworks ni dependencias molestas. Todo está bien organizado y fácil de editar, incluso si apenas estás empezando con el desarrollo web. Además, son 100% responsive, así que tu sitio se verá bien en el celular, la tablet o la compu.

Algunos de mis favoritos son:

  • Massively – ideal para blogs o portafolios.
  • Forty – perfecta para páginas de empresas o agencias.
  • Editorial – estilo revista digital, súper elegante.

Lo que más me gusta de HTML5 UP es que no te hace perder tiempo. Descargas la plantilla, cambias el contenido, y listo: tienes una web con look profesional sin tener que pelearte con un CMS o pasar horas ajustando código.

html5up #plantillasweb #html #css #diseñoweb #recursosgratuitos #frontend #webdesign #desarrolloweb #templates #responsive

24 octubre 2025

MJML: La Herramienta que Revoluciona el Diseño de Emails Responsivos

En la era digital, el email marketing sigue siendo una de las herramientas más efectivas para conectar con clientes y audiencias. Sin embargo, crear emails que se vean bien en todos los dispositivos puede ser un desafío. Aquí es donde entra MJML, un framework que simplifica la creación de correos electrónicos responsivos y profesionales.

¿Qué es MJML?

MJML (Mailjet Markup Language) es un lenguaje de marcado desarrollado por Mailjet que permite diseñar emails de manera más sencilla y estructurada. Su principal objetivo es que los desarrolladores y diseñadores puedan crear emails responsivos sin preocuparse por las complicaciones de los distintos clientes de correo (Gmail, Outlook, Apple Mail, etc.), que a menudo interpretan el HTML de forma distinta.

En pocas palabras, MJML traduce un código limpio y simple a HTML complejo y compatible con todos los clientes de correo. Esto significa menos tiempo escribiendo tablas, estilos en línea y hacks para que el correo se vea bien en dispositivos móviles.

¿Para qué se usa MJML?

MJML se utiliza principalmente para crear:

  • Campañas de email marketing: Boletines, promociones, anuncios y newsletters.
  • Emails transaccionales: Confirmaciones de pedidos, notificaciones de cuenta o restablecimiento de contraseña.
  • Plantillas reutilizables: Diseños que se adaptan automáticamente a cualquier dispositivo.

Su enfoque es ideal para equipos de marketing, desarrolladores front-end y cualquier persona que quiera emails consistentes, bonitos y funcionales sin tener que ser un experto en HTML complejo para correo electrónico.

Pros de usar MJML

  1. Simplicidad y rapidez: MJML usa etiquetas semánticas y fáciles de entender, eliminando la necesidad de escribir largas tablas y estilos en línea.
  2. Responsivo por defecto: Los emails se adaptan automáticamente a móviles, tabletas y desktops.
  3. Compatibilidad: Genera HTML compatible con los principales clientes de correo.
  4. Productividad: Reduce el tiempo de desarrollo y la probabilidad de errores de visualización.
  5. Comunidad y recursos: Al ser open-source, cuenta con documentación extensa, plantillas y soporte de la comunidad.

Contras de usar MJML

  1. Dependencia de una herramienta: Necesitas el compilador de MJML para generar el HTML final, lo que puede ser un obstáculo si quieres trabajar solo con HTML puro.
  2. Limitaciones de personalización extrema: Aunque es muy flexible, para diseños muy complejos puede requerir hacks adicionales.
  3. Curva de aprendizaje inicial: Aunque es más sencillo que HTML para correo, requiere aprender su sintaxis y etiquetas.
  4. Tamaño del HTML: A veces el HTML generado es más extenso de lo que se escribiría manualmente, aunque esto rara vez afecta la entrega o el rendimiento.

Conclusión

MJML es una herramienta poderosa para cualquiera que quiera emails profesionales y responsivos sin perder tiempo lidiando con las inconsistencias del HTML para correo electrónico. Su combinación de simplicidad, compatibilidad y eficiencia lo convierte en una opción cada vez más popular entre marketers y desarrolladores.

Si todavía no lo has probado, vale la pena darle una oportunidad: ahorrarás tiempo y frustraciones, y tus emails lucirán bien en cualquier dispositivo.