← Color Ramp Generator
Se trata de un generador de escalas de color que permite a diseñadores y desarrolladores crear, editar y exportar escalas de color de 10 pasos en formato Figma Variables. Está desarrollado completamente con HTML, CSS y JavaScript puro, y funciona directamente en el navegador sin procesos de compilación ni dependencias externas.
Objetivos
- Unificar el flujo de trabajo de gestión de color entre diseño y desarrollo
- Eliminar los cálculos manuales al crear escalas de color para sistemas de diseño
- Permitir un control preciso sobre cada aspecto de la generación de escalas de color
- Mantener la compatibilidad con Figma mediante importación y exportación nativa en formato Variables JSON
Metas
- Simplificar la creación de escalas de color
Generar escalas consistentes de 10 pasos (50→950) a partir de un único color base. - Ofrecer control detallado
Permitir ajustes de luminosidad por paso, cambios de tono y cromaticidad, y opciones de interpolación de curvas. - Garantizar retroalimentación visual
Mostrar una vista previa en tiempo real con indicadores contextuales (el borde punteado marca el color base). - Dar soporte a flujos de trabajo de sistemas de diseño
Compatibilidad completa con Figma Variables JSON para importar y exportar sin fricciones.
Beneficios para la experiencia de usuario
- Iteración visual instantánea
Ajusta parámetros y visualiza los resultados inmediatamente sin salir del navegador. - Exportación lista para Figma
Exporta directamente al formato Figma Variables, eliminando la creación manual de tokens. - Controles intuitivos
Deslizadores de luminosidad por paso, ajustes de tono y cromaticidad, y selección de curvas para un control preciso sin complejidad innecesaria. - ⚡Ligero y rápido
Sin dependencias, tamaño reducido y tiempos de carga instantáneos
Aprendizajes
Este proyecto también sirvió como una experiencia práctica para explorar el concepto de vibe coding, utilizando herramientas de inteligencia artificial como apoyo directo en el proceso de desarrollo. A través de la experimentación, la iteración rápida y la colaboración entre diseño e IA, fue posible validar ideas, acelerar decisiones técnicas y comprender mejor cómo integrar estos nuevos flujos de trabajo en proyectos reales de frontend y diseño de producto.
Tecnologías Utilizadas:
- Lenguajes: HTML5, CSS3, JS
- Frameworks y Herramientas: OpenCode, AI