NutriGen Pro es una herramienta web interactiva diseñada para la creación, visualización y exportación de etiquetas de información nutricional en tiempo real. Este proyecto nació como una solución personal a una necesidad específica durante un encargo de diseño de etiquetas de producto para un cliente, y se ha desarrollado con fines didácticos y prácticos.
Important
Aviso de Tipo de Proyecto:
Este es un proyecto desarrollado con fines de aprendizaje y uso personal, utilizando asistencia de Inteligencia Artificial. No se garantiza la adhesión al 100% a ninguna legislación, normativa o regulación de etiquetado vigente (FDA, NOM-051, UE, etc.). Los cálculos y redondeos pueden contener errores. Debe usarse únicamente como referencia creativa o didáctica y siempre bajo la supervisión de un profesional en regulaciones alimentarias.
Este sitio fue creado porque necesitaba una herramienta ágil para generar estructuras de tablas nutricionales precisas para un proyecto de diseño gráfico. Al no encontrar una opción 100% gratuita y completa que me permitiera exportar la etiqueta y ajustar parámetros rápidamente, decidí construir esta solución. La comparto para cualquier otra persona que pueda encontrarla útil en sus propios flujos de trabajo de diseño o estudio.
El sistema permite alternar entre diferentes normativas de etiquetado (en desarrollo), adaptando automáticamente el formato y los nutrientes requeridos:
- EEUU (FDA 2016): Implementación de los formatos Vertical, Tabular/Horizontal y Lineal.
- México (NOM-051): Visualización de la tabla nutricional con sistema de sellos de advertencia octogonales. (para desarrollo futuro)
- Europa (Reg. 1169/2011): Estructura basada en 100g/100ml (para desarrollo futuro).
- Cálculo de % Valor Diario (%VD): Basado en los valores de referencia de cada estándar.
- Redondeo Legal: Sistema de redondeo automático según las reglas de la FDA para calorías y nutrientes principales.
- Configuración de Porciones: Control total sobre las porciones por envase, unidades y pesos.
- Vitaminas y Minerales: Posibilidad de añadir nutrientes opcionales (Vitamina A, C, E, Calcio, Hierro, Potasio, etc.) en unidades de medida o porcentajes.
- JPG de Alta Resolución: Exportación en diferentes escalas (hasta 5x) para uso en presentaciones o mockups.
- Vectores SVG: Descarga de archivos vectoriales para escalado y edición.
- Vista Previa Expandida: Modo de pantalla completa para inspección detallada de la etiqueta.
- Multilingüe: Interfaz disponible en Español e Inglés.
- Modo Oscuro/Claro: Soporte nativo para temas visuales.
- Diseño Responsivo (Desktop): Optimizado para uso en estaciones de trabajo y pantallas de escritorio.
- Validación Legislativa: Panel informativo que alerta sobre posibles inconsistencias según la norma seleccionada.
- HTML5 Semántico
- Vanilla CSS3 (Variables, Grid, Flexbox, Glassmorphism)
- JavaScript (ES6+)
- Bibliotecas Externas:
- Tabler Icons para la iconografía.
- Flag Icons para la selección de idiomas.
- html-to-image para el procesamiento de exportaciones.
- Asistencia de IA:
- Antigravity como espacio de trabajo y desarrollo.
- Copilot para búsqueda de información y fuentes.
- Gemini como agente de IA.
- Claude como agente de IA.
Este proyecto es de uso libre para fines personales y educativos. Si decides emplearlo con propósitos comerciales, la responsabilidad de validar la información nutricional y asegurar su cumplimiento normativo recae íntegramente en el usuario final. No se asume responsabilidad alguna por posibles errores o imprecisiones en el contenido de las etiquetas generadas. Dar crédito al autor es opcional, pero cualquier mención es bienvenida y se agradece enormemente.
Desarrollado por firogv96
Hecho con ❤️ y el soporte de IA para diseñadores y entusiastas del desarrollo web.