PROGRESIÓN CLARA
Los controles siguen el orden natural de una decisión visual: contenido, forma, color y comportamiento.
← VOLVER AL PORTFOLIO02 / 05 / 2026
HERRAMIENTA INTERACTIVA / UI / FRONT-END
GENERADOR DE BOTONES
DISEÑAR, PROBAR Y LLEVAR UNA DECISIÓN VISUAL A CÓDIGO EN EL MISMO FLUJO.
Diseñé una herramienta que permite construir botones, comparar estados y obtener HTML y CSS reutilizable sin separar la exploración visual de la implementación.
- ROL
- UX/UI DESIGN & FRONT-END
- TIPO
- HERRAMIENTA INTERACTIVA
- STACK
- HTML / CSS / JAVASCRIPT
- AÑO
- 2026
OPORTUNIDAD
REDUCIR LA DISTANCIA ENTRE PROBAR UNA IDEA Y PODER UTILIZARLA.
Ajustar un botón suele implicar saltar entre diseño, navegador y código. La herramienta reúne esas decisiones en una única superficie y hace visible el resultado de cada cambio al instante.
El objetivo era mantener el control suficiente para experimentar sin convertir la interfaz en un panel técnico difícil de recorrer.
- Vista previa en tiempo real.
- Controles agrupados por intención.
- Estados normal, hover, active y disabled.
- Código listo para copiar.
INTERACCIÓN
CADA CONTROL EXPLICA SU EFECTO EN EL PROPIO RESULTADO.
La interfaz ordena contenido, caja, color, borde, sombra y comportamiento. Los cambios se reflejan en el botón y en el código, de modo que el usuario entiende qué propiedad está modificando.
Los presets y la generación aleatoria permiten empezar con una base útil y después refinarla.
DECISIONES UX/UI
UNA HERRAMIENTA TÉCNICA QUE SIGUE SIENDO FÁCIL DE LEER.
ESTADOS VISIBLES
El usuario puede comprobar hover, active y disabled antes de copiar el resultado.
CÓDIGO SIN RUIDO
HTML y CSS aparecen separados, listos para reutilizar y sin ocultar qué se está generando.
PERSISTENCIA LOCAL
La configuración se conserva en el navegador para continuar una exploración más tarde.
RESULTADO
DE UNA CONFIGURACIÓN ABSTRACTA A UN COMPONENTE QUE YA SE PUEDE USAR.
La herramienta transforma parámetros técnicos en una experiencia directa: mover, comparar y copiar. El resultado demuestra cómo el diseño de interacción puede hacer más accesible una tarea de Front-End.
La implementación funciona sin dependencias de interfaz y mantiene navegación por teclado, estados reconocibles y adaptación a pantallas pequeñas.
- Presets editables.
- Variaciones aleatorias controladas.
- Copia independiente de HTML y CSS.
- Responsive y persistencia local.
PRUEBA LA HERRAMIENTA