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

19 enero 2026

¿Tu web tiene «scroll» lateral en móvil? El bug del desbordamiento y cómo fijarlo

css Tips

Es el error clásico: abres tu web en el móvil y notas que puedes deslizar la pantalla hacia la derecha, dejando un espacio en blanco innecesario. Este «bug» visual suele romper la experiencia de usuario y ocurre porque un elemento es más ancho que el contenedor padre.

El Culpable: El Modelo de Caja (Box Model)

La mayoría de las veces, esto sucede porque añadimos padding o borders a un elemento que ya tiene un width: 100%. Por defecto, CSS suma esos valores, haciendo que el elemento mida más del 100%.

La Solución Rápida: box-sizing

La forma más eficiente de evitar que esto ocurra de forma global es aplicar la propiedad box-sizing: border-box;. Esto obliga al navegador a incluir el padding y el borde dentro del ancho total del elemento.

Añade esto al inicio de tu CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

El «Truco Pro» para encontrar al infractor

Si después de aplicar lo anterior el scroll lateral persiste, es que tienes un elemento hijo «rebelde» (como una imagen grande o un texto sin saltos). Usa este snippet temporalmente para localizarlo visualmente:

CSS

/* Esto dibujará un borde rojo alrededor de cada elemento de tu web */
* {
  outline: 1px solid red !important;
}

Al recargar, busca qué caja roja se sale de los límites de la pantalla. Una vez lo encuentres, asegúrate de que ese elemento tenga un max-width: 100%;.

6 enero 2026

¿Iconos desalineados? El bug del «Bounding Box» en Figma y cómo arreglarlo en CSS

Figma Tips

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

  1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
  2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
  3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.

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

31 marzo 2019

5 librerías CSS para lograr fántasticos «Hover Effects» en imágenes

iHover (35 efectos)
Para mi la mejor librería de la colección, aporta animaciones muy elegantes y profesionales. No usan JavaScript y todo lo realizan con CSS3 y HTML

Image Hover Effects (16 efectos)
Bonita colección de 16 «hover effects» con subtitulos. Dispones de el HTML y CSS necesario para emular los efectos en tus proyectos.

Captión Hover Effect (7 efectos)
Transiciones suaves y bonita son las que ofrece esta librería. Si quieres usarla en algún proyecto en su sección de tutoriales te explican como poder usarlas.

Image Caption Hover Animation (4 efectos)
En este enlace encontrarás 4 animaciones para cuando colocan el cursos sobre tus imágenes.
Toda las animaciones son en CSS3, no usan JavaScript, por lo que son ideal para no tener problemas de compatibilidad con navegadores.

Image Hover (44 efectos)
Solo con CSS esta biblioteca posee 44 efectos hover. En esta librería encontrarás efectos de diapositivas, zoom, desenfoque o desvanecimientos entre otros. Además de esta versión gratuita ofrecen una versión premium por 14€ que ofrece un total de 216 efectos.

23 febrero 2018

Curso CSS Avanzado

Curso CSS Avanzado

CSS desde 0 al infinito gracias a este curso creado por Pildoras Informativas aprenderás a darle diseño profesional a las paginas web hechas con HTML.

5 noviembre 2015

FreshInbox – Rollover images para Emails

Freshinbox

Freshinbox

FreshInbox es una herramienta ideal para aquellos usuarios que tengan una tienda virtual ya que nos permite crear para nuestras creatividades de email un rollover entre dos imágenes al pasar el ratón por encima. Un comportamiento habitual en las webs que ahora gracias a FreshInbox lo podremos usar en nuestros mail, así danto un toque de frescura a nuestras creatividades.

Es una herramienta que ha día de hoy tiene poco uso, que sumado a que es gratis nos ayudará a sorprender a nuestros clientes a través de nuestras newsletters.

9 septiembre 2013

Requisitos que tu web debería de cumplir, antes de lanzarla a la red.

Web Developer Checklist

Web Developer Checklist

Si piensas que tu web esta lista para ser lanzada a la red y que reciba oleadas de visitantes, antes te recomiendo que visites la web de Web Developer Checklist y pases los test que te ofrecen para asegurarte que tu página web cumple con todos los estándares.

12 febrero 2013

El Gran Libro de Diseño Web en PDF

El Gran Libro de Diseño Web

El Gran Libro de Diseño Web

Descarga el en PDF El Gran Libro de Diseño Web. Una guía definitiva para crear páginas web increíbles, llenas de dinamismo y calidad.
Encontrarás una completisima guía de HTML5, CSS3, Photoshop y jQuery.

Descargar – El Gran Libro de Diseño Web en PDF

« Entradas anteriores