{"id":85162,"date":"2026-04-13T18:39:25","date_gmt":"2026-04-13T23:39:25","guid":{"rendered":"https:\/\/niixer.com\/?page_id=85162"},"modified":"2026-05-11T17:50:30","modified_gmt":"2026-05-11T22:50:30","slug":"creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable","status":"publish","type":"page","link":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/","title":{"rendered":"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-1024x683.png\" alt=\"\" class=\"wp-image-85164\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-1024x683.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-300x200.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-768x512.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"480\" style=\"aspect-ratio: 720 \/ 480;\" width=\"720\" controls src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Video-2026-04-13-at-2.44.17-PM.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. \u00bfQu\u00e9 es el Vibe Coding y por qu\u00e9 es importante?<\/strong><\/h2>\n\n\n\n<p>El <a href=\"https:\/\/www.ibm.com\/es-es\/think\/topics\/vibe-coding\">Vibe Coding<\/a> es una metodolog\u00eda emergente en el desarrollo de software que se basa en el uso de inteligencia artificial para generar aplicaciones a partir de instrucciones en lenguaje natural, conocidas como prompts. Este enfoque permite a los usuarios describir sus ideas sin necesidad de escribir c\u00f3digo directamente, delegando en la IA la construcci\u00f3n t\u00e9cnica del sistema (OpenAI, 2023).<\/p>\n\n\n\n<p>Herramientas como<a href=\"https:\/\/lovable.dev\/\"> Lovable<\/a> y Google AI Studio han impulsado este paradigma al facilitar la creaci\u00f3n de aplicaciones completas mediante descripciones estructuradas, lo que representa una transformaci\u00f3n significativa en la forma tradicional de programar (Google, 2024).<\/p>\n\n\n\n<p>La importancia del Vibe Coding radica en su capacidad para democratizar el acceso al desarrollo tecnol\u00f3gico, reducir tiempos de producci\u00f3n y fomentar la innovaci\u00f3n en contextos educativos y profesionales (World Economic Forum, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Ventajas y desventajas del Vibe Coding<\/strong><\/h2>\n\n\n\n<p>El Vibe Coding presenta m\u00faltiples ventajas, entre ellas la posibilidad de desarrollar aplicaciones sin conocimientos avanzados de programaci\u00f3n, la rapidez en la creaci\u00f3n de prototipos y la facilidad para iterar ideas mediante ajustes en los prompts (OpenAI, 2023).<\/p>\n\n\n\n<p>Sin embargo, tambi\u00e9n presenta desventajas como la dependencia de la inteligencia artificial, la generaci\u00f3n de c\u00f3digo con posibles errores y las limitaciones para personalizaciones complejas, lo que puede dificultar el desarrollo de soluciones m\u00e1s avanzadas (Google, 2024).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Competencias necesarias para el Vibe Coding<\/strong><\/h2>\n\n\n\n<p>El uso efectivo del Vibe Coding requiere el desarrollo de competencias como el pensamiento l\u00f3gico, que permite estructurar adecuadamente las ideas, y la capacidad de redacci\u00f3n de prompts, fundamental para comunicar de manera clara las instrucciones a la IA (OpenAI, 2023).<\/p>\n\n\n\n<p>Asimismo, es necesario contar con habilidades de an\u00e1lisis cr\u00edtico para evaluar los resultados generados, as\u00ed como capacidades de resoluci\u00f3n de problemas que permitan ajustar y mejorar continuamente las instrucciones dadas a la inteligencia artificial (World Economic Forum, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Herramientas y t\u00e9cnicas de Vibe Coding<\/strong><\/h2>\n\n\n\n<p>Para el desarrollo de este proyecto se utilizaron herramientas como Lovable para la construcci\u00f3n de la aplicaci\u00f3n y Google AI Studio como apoyo en procesos de validaci\u00f3n, junto con ChatGPT para la generaci\u00f3n y refinamiento de<a href=\"https:\/\/www.promptingguide.ai\/es\/introduction\/examples\"> prompts<\/a> (Google, 2024).<\/p>\n\n\n\n<p>Entre las t\u00e9cnicas aplicadas se destacan el uso de prompts estructurados, la iteraci\u00f3n constante para mejorar resultados y la divisi\u00f3n del proceso en etapas como dise\u00f1o de interfaz, l\u00f3gica funcional e integraci\u00f3n de inteligencia artificial (OpenAI, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. C\u00f3mo crear una aplicaci\u00f3n desde cero sin saber programar<\/strong><\/h2>\n\n\n\n<p>El proceso de creaci\u00f3n de la aplicaci\u00f3n se realiz\u00f3 mediante una serie de pasos estructurados que permitieron transformar una idea en un producto funcional utilizando herramientas de inteligencia artificial (OpenAI, 2023).<\/p>\n\n\n\n<p><strong>Paso 1:<\/strong> Registro en Lovable<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"289\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-937.png\" alt=\"\" class=\"wp-image-85166\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-937.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-937-300x147.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 1. <em>Registro de usuario en la plataforma Lovable.<\/em><br>Fuente: Elaboraci\u00f3n propia.<\/p>\n\n\n\n<p>Se accede a la plataforma, se crea una cuenta de usuario y se ingresa al entorno de trabajo disponible (Lovable, 2024).<\/p>\n\n\n\n<p><strong>Paso 2:<\/strong> Creaci\u00f3n del proyecto<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"290\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-938.png\" alt=\"\" class=\"wp-image-85168\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-938.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-938-300x148.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 2. Creaci\u00f3n de un nuevo proyecto en la plataforma.<\/p>\n\n\n\n<p>Se selecciona la opci\u00f3n de crear una nueva aplicaci\u00f3n y se define la idea general del proyecto (Lovable, 2024).<\/p>\n\n\n\n<p><strong>Paso 3:<\/strong> Ingreso del prompt<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"287\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-939.png\" alt=\"\" class=\"wp-image-85170\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-939.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-939-300x146.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 3. Ingreso del prompt para la generaci\u00f3n de la aplicaci\u00f3n.<\/p>\n\n\n\n<p>Se introduce un prompt estructurado que describe las funcionalidades, dise\u00f1o y comportamiento esperado de la aplicaci\u00f3n (OpenAI, 2023).<\/p>\n\n\n\n<p><strong>Paso 4:<\/strong> Generaci\u00f3n autom\u00e1tica<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"289\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-940.png\" alt=\"\" class=\"wp-image-85171\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-940.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-940-300x147.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 4. Interfaz generada autom\u00e1ticamente por la plataforma.<\/p>\n\n\n\n<p>La plataforma genera autom\u00e1ticamente la interfaz, la l\u00f3gica y la estructura del sistema (Lovable, 2024).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5.1 Creaci\u00f3n de herramientas internas<\/strong><\/h2>\n\n\n\n<p>El Vibe Coding permite desarrollar herramientas internas que optimizan procesos acad\u00e9micos y organizativos, como planificadores, asistentes inteligentes y sistemas automatizados de gesti\u00f3n del tiempo (World Economic Forum, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><br>Introducci\u00f3n<\/h2>\n\n\n\n<p>La organizaci\u00f3n de ideas y proyectos es un aspecto fundamental en cualquier proceso acad\u00e9mico o profesional. Contar con herramientas que permitan visualizar conceptos de manera clara y estructurada facilita la planificaci\u00f3n y el desarrollo de proyectos complejos. En este contexto, GitMind se presenta como una soluci\u00f3n vers\u00e1til para crear mapas mentales, diagramas de flujo y esquemas que ayudan a transformar ideas en planes concretos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPara qu\u00e9 sirve GitMind?<\/h2>\n\n\n\n<p><strong>GitMind<\/strong> es una plataforma digital dise\u00f1ada para la creaci\u00f3n de mapas mentales y diagramas colaborativos. Su principal utilidad radica en:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Organizar ideas<\/strong> de manera visual y jer\u00e1rquica.<\/li>\n\n\n\n<li><strong>Facilitar la planificaci\u00f3n<\/strong> de proyectos acad\u00e9micos, laborales o personales.<\/li>\n\n\n\n<li><strong>Fomentar la colaboraci\u00f3n<\/strong> en equipos de trabajo mediante la edici\u00f3n compartida en tiempo real.<\/li>\n\n\n\n<li><strong>Simplificar la comunicaci\u00f3n<\/strong> de conceptos complejos a trav\u00e9s de esquemas claros y din\u00e1micos.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contextos en los que se puede utilizar<\/h2>\n\n\n\n<p>GitMind puede aplicarse en m\u00faltiples escenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Educaci\u00f3n<\/strong>: para elaborar planes de estudio, organizar contenidos y preparar presentaciones.<\/li>\n\n\n\n<li><strong>Trabajo en equipo<\/strong>: ideal para brainstorming, gesti\u00f3n de proyectos y planificaci\u00f3n estrat\u00e9gica.<\/li>\n\n\n\n<li><strong>Investigaci\u00f3n<\/strong>: permite estructurar hip\u00f3tesis, metodolog\u00edas y resultados.<\/li>\n\n\n\n<li><strong>Uso personal<\/strong>: como herramienta de productividad para organizar metas, tareas y proyectos individuales.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo se utiliz\u00f3 para realizar el mapa<\/h2>\n\n\n\n<p>En el caso del <strong>Planificador de Estudio con IA<\/strong>, GitMind se emple\u00f3 para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Definir categor\u00edas principales<\/strong> como usuarios, m\u00f3dulos centrales, requisitos funcionales y t\u00e9cnicos.<\/li>\n\n\n\n<li><strong>Visualizar problemas y soluciones<\/strong> de versiones anteriores del proyecto.<\/li>\n\n\n\n<li><strong>Organizar requisitos<\/strong> funcionales y no funcionales de manera clara y jer\u00e1rquica.<\/li>\n\n\n\n<li><strong>Dise\u00f1ar la experiencia de usuario<\/strong> con un enfoque en seguridad, integraciones y usabilidad.<\/li>\n<\/ul>\n\n\n\n<p>Este proceso permiti\u00f3 tener una visi\u00f3n integral del proyecto, identificar \u00e1reas de mejora y establecer un plan de acci\u00f3n m\u00e1s s\u00f3lido.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM-1024x956.jpeg\" alt=\"\" class=\"wp-image-86768\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM-1024x956.jpeg 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM-300x280.jpeg 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM-768x717.jpeg 768w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM-1536x1433.jpeg 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-04-at-2.31.03-PM.jpeg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>GitMind se consolida como una herramienta pr\u00e1ctica y eficiente para la <strong>gesti\u00f3n visual de proyectos<\/strong>. Su capacidad para estructurar informaci\u00f3n compleja en diagramas claros facilita la toma de decisiones y la comunicaci\u00f3n entre equipos. En el caso del Planificador de Estudio con IA, el uso de GitMind permiti\u00f3 transformar ideas dispersas en un esquema organizado, lo que contribuye directamente al \u00e9xito del proyecto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5.2 Caso pr\u00e1ctico: Planificador de estudio con IA<\/strong><\/h2>\n\n\n\n<p>El problema identificado fue la dificultad de los estudiantes para organizar su tiempo de estudio de manera eficiente antes de un examen, lo que puede afectar su rendimiento acad\u00e9mico (OECD, 2022).<\/p>\n\n\n\n<p>La soluci\u00f3n consisti\u00f3 en desarrollar una aplicaci\u00f3n que genera autom\u00e1ticamente un plan de estudio personalizado a partir de datos ingresados por el usuario, como materia, fecha de evaluaci\u00f3n y tiempo disponible (OpenAI, 2023).<\/p>\n\n\n\n<p>El sistema distribuye las actividades de estudio en el tiempo disponible y proporciona recomendaciones para optimizar el aprendizaje (Lovable, 2024).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"400\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-941.png\" alt=\"\" class=\"wp-image-85172\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-941.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-941-300x204.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 5. Vista del planificador de estudio en funcionamiento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<strong>5.3 Implementaci\u00f3n y acceso a la aplicaci\u00f3n<\/strong><\/h2>\n\n\n\n<p>Como resultado del proceso de Vibe Coding, se desarroll\u00f3 una aplicaci\u00f3n funcional de planificador de estudio utilizando la plataforma Lovable, la cual permite generar planes personalizados de estudio de manera autom\u00e1tica (Lovable, 2024).<\/p>\n\n\n\n<p>La aplicaci\u00f3n cuenta con una interfaz sencilla donde el usuario ingresa informaci\u00f3n b\u00e1sica, y el sistema genera una planificaci\u00f3n estructurada adaptada a sus necesidades (OpenAI, 2023).<\/p>\n\n\n\n<p>&nbsp;Acceso a la aplicaci\u00f3n:<\/p>\n\n\n\n<p><a href=\"https:\/\/lovable.dev\/projects\/3eb3f624-ab41-4375-9b98-6b2fd04a21a9\">https:\/\/lovable.dev\/projects\/3eb3f624-ab41-4375-9b98-6b2fd04a21a9<\/a><\/p>\n\n\n\n<p>Capturas de la aplicaci\u00f3n: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"260\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-942.png\" alt=\"\" class=\"wp-image-85173\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-942.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-942-300x132.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 6. Interfaz principal del usuario en la aplicaci\u00f3n desarrollada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"266\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-943.png\" alt=\"\" class=\"wp-image-85174\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-943.png 589w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/image-943-300x135.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<p>Ilustraci\u00f3n 7. Interfaz principal del usuario en la aplicaci\u00f3n desarrollada.<\/p>\n\n\n\n<p>Esta implementaci\u00f3n evidencia c\u00f3mo la inteligencia artificial facilita la creaci\u00f3n de soluciones tecnol\u00f3gicas sin necesidad de programaci\u00f3n avanzada (World Economic Forum, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6. Prompt y refinamiento de prompts<\/strong><\/h2>\n\n\n\n<p>El prompt constituye el elemento central del Vibe Coding, ya que define el comportamiento del sistema y orienta la generaci\u00f3n de la aplicaci\u00f3n (OpenAI, 2023).<\/p>\n\n\n\n<p><strong>Prompt final utilizado:<\/strong><\/p>\n\n\n\n<p>&nbsp;Build a simple and useful AI-powered study planner web application.<\/p>\n\n\n\n<p>APP IDEA:<\/p>\n\n\n\n<p>Create an app where students can generate a personalized study plan based on their exam date and available time.<\/p>\n\n\n\n<p>CORE FEATURES:<\/p>\n\n\n\n<p>&#8211; Input form where the user enters:<\/p>\n\n\n\n<p>&nbsp; &#8211; Subject<\/p>\n\n\n\n<p>&nbsp; &#8211; Exam date<\/p>\n\n\n\n<p>&nbsp; &#8211; Daily available study time<\/p>\n\n\n\n<p>&nbsp; &#8211; Difficulty level<\/p>\n\n\n\n<p>&#8211; AI generates:<\/p>\n\n\n\n<p>&nbsp; &#8211; A daily study plan<\/p>\n\n\n\n<p>&nbsp; &#8211; Tasks per day<\/p>\n\n\n\n<p>&nbsp; &#8211; Study tips<\/p>\n\n\n\n<p>AI BEHAVIOR:<\/p>\n\n\n\n<p>&#8211; Act like an academic coach<\/p>\n\n\n\n<p>&#8211; Break down topics<\/p>\n\n\n\n<p>&#8211; Distribute workload evenly<\/p>\n\n\n\n<p>TECH STACK:<\/p>\n\n\n\n<p>&#8211; React<\/p>\n\n\n\n<p>&#8211; Node.js<\/p>\n\n\n\n<p>&#8211; Supabase<\/p>\n\n\n\n<p>UI:<\/p>\n\n\n\n<p>&#8211; Clean<\/p>\n\n\n\n<p>&#8211; Minimal<\/p>\n\n\n\n<p>&#8211; Responsive<\/p>\n\n\n\n<p>EXTRA:<\/p>\n\n\n\n<p>&#8211; Progress tracking<\/p>\n\n\n\n<p>&#8211; Completed tasks<\/p>\n\n\n\n<p>OUTPUT:<\/p>\n\n\n\n<p>&#8211; Full app<\/p>\n\n\n\n<p>&#8211; Instructions<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompt inicial de construcci\u00f3n del MVP <\/h3>\n\n\n\n<p>-Construye una aplicaci\u00f3n web moderna, completa y profesional de planificador de estudio con inteligencia artificial.<\/p>\n\n\n\n<p>&#8211; La aplicaci\u00f3n debe incluir: &#8211; Selecci\u00f3n de idioma (Espa\u00f1ol, Ingl\u00e9s, Franc\u00e9s, Chino, Ruso, Alem\u00e1n) <\/p>\n\n\n\n<p>&#8211; Sistema de autenticaci\u00f3n<\/p>\n\n\n\n<p> &#8211; Generaci\u00f3n de planes de estudio<\/p>\n\n\n\n<p> &#8211; Explicaciones tipo tutor <\/p>\n\n\n\n<p>&#8211; Quizzes <\/p>\n\n\n\n<p>&#8211; Dashboard <\/p>\n\n\n\n<p>&#8211; Descarga en PDF<\/p>\n\n\n\n<p> &#8211; Frases motivacionales<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompt de configuraci\u00f3n t\u00e9cnica (activaci\u00f3n de backend real) <\/h3>\n\n\n\n<p>Activa Lovable Cloud para habilitar backend, autenticaci\u00f3n real, base de datos y funciones de inteligencia artificial.<\/p>\n\n\n\n<p> Este prompt fue clave para pasar de una aplicaci\u00f3n local limitada a una soluci\u00f3n con: <\/p>\n\n\n\n<p>\u2022 Autenticaci\u00f3n real \u2022 Persistencia de datos \u2022 Inteligencia artificial funcional \u2022 Sincronizaci\u00f3n entre dispositivos<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br>Prompt de mejora en contenido educativo <\/h3>\n\n\n\n<p>Eliminar la secci\u00f3n de videos y mejorar el material de estudio para que sea m\u00e1s claro, concreto y basado en textos acad\u00e9micos, incluyendo libros, art\u00edculos y cursos espec\u00edficos con instrucciones de estudio. Con este ajuste se mejor\u00f3 la calidad del contenido, pasando de recursos poco funcionales a material acad\u00e9mico m\u00e1s estructurado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompt de mejora en funcionalidades de descarga y explicaci\u00f3n<\/h3>\n\n\n\n<p> Permitir descargar el plan de estudio en PDF de forma flexible, dando la opci\u00f3n de descargar el plan completo o solo el contenido de un d\u00eda.<\/p>\n\n\n\n<p> Adem\u00e1s: &#8211; Incluir material de estudio con textos o enlaces de lectura <\/p>\n\n\n\n<p>&#8211; Mejorar la funci\u00f3n \u201cExpl\u00edcame el tema\u201d para que proporcione explicaciones breves y claras <\/p>\n\n\n\n<p>Adem\u00e1s: &#8211; Incluir material de estudio con textos o enlaces de lectura <\/p>\n\n\n\n<p>&#8211; Mejorar la funci\u00f3n \u201cExpl\u00edcame el tema\u201d para que proporcione explicaciones breves y claras Este prompt permiti\u00f3 mejorar la usabilidad y personalizaci\u00f3n del contenido generado.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prompt de integraci\u00f3n con Google Calendar <\/h2>\n\n\n\n<p>Integrar la aplicaci\u00f3n con Google Calendar. <\/p>\n\n\n\n<p>Requisitos: <\/p>\n\n\n\n<p>&#8211; Conexi\u00f3n por usuario <\/p>\n\n\n\n<p>&#8211; Sincronizaci\u00f3n bidireccional<\/p>\n\n\n\n<p> &#8211; Generaci\u00f3n de eventos autom\u00e1ticos <\/p>\n\n\n\n<p>&#8211; Recordatorios 15 minutos antes <\/p>\n\n\n\n<p>Este cambio permiti\u00f3 llevar la aplicaci\u00f3n a un entorno real de uso, integr\u00e1ndola con herramientas externas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompt de restricci\u00f3n de fuentes acad\u00e9micas <\/h3>\n\n\n\n<p>Configurar la aplicaci\u00f3n para que los recursos de estudio provengan \u00fanicamente de fuentes acad\u00e9micas. Permitir solo: &#8211; Google Scholar &#8211; CRAI <\/p>\n\n\n\n<p>Bloquear completamente: &#8211; Wikipedia Aplicar esta restricci\u00f3n en la interfaz, generaci\u00f3n de contenido y documentos PDF.<\/p>\n\n\n\n<p> Este prompt garantiz\u00f3 la calidad y confiabilidad del contenido acad\u00e9mico generado.<\/p>\n\n\n\n<p> Los prompts utilizados evidencian un proceso de desarrollo iterativo en el que la aplicaci\u00f3n evolucion\u00f3 desde una versi\u00f3n b\u00e1sica hasta una soluci\u00f3n m\u00e1s robusta, incorporando mejoras en funcionalidad, calidad de contenido e integraci\u00f3n con servicios externos. Este enfoque demuestra la aplicaci\u00f3n pr\u00e1ctica del Vibe Coding, donde los prompts se convierten en la principal herramienta para dise\u00f1ar, ajustar y optimizar sistemas mediante inteligencia artificial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>7. Soporte y dificultades encontradas<\/strong><\/h2>\n\n\n\n<p>Durante el desarrollo se presentaron dificultades como errores en la generaci\u00f3n autom\u00e1tica, interfaces poco claras y la necesidad de m\u00faltiples iteraciones para lograr un resultado funcional (Lovable, 2024).<\/p>\n\n\n\n<p>Estas dificultades fueron solucionadas mediante la mejora de los prompts, la simplificaci\u00f3n de requerimientos y la interacci\u00f3n continua con la inteligencia artificial (OpenAI, 2023).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>8. Conclusiones<\/strong><\/h2>\n\n\n\n<p>El Vibe Coding representa una evoluci\u00f3n en el desarrollo de software al permitir la creaci\u00f3n de aplicaciones mediante lenguaje natural, facilitando el acceso a la tecnolog\u00eda (World Economic Forum, 2023).<\/p>\n\n\n\n<p>El desarrollo del planificador de estudio demuestra que es posible construir soluciones funcionales utilizando herramientas como Lovable, lo que abre nuevas oportunidades en el \u00e1mbito acad\u00e9mico y profesional (Lovable, 2024).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>9. Referencias<\/strong><\/h2>\n\n\n\n<p>Google. (2024). Google AI Studio documentation. https:\/\/ai.google.dev<\/p>\n\n\n\n<p>Lovable. (2024). Lovable platform overview. https:\/\/lovable.dev<\/p>\n\n\n\n<p>OECD. (2022). Student learning and time management. https:\/\/www.oecd.org<\/p>\n\n\n\n<p>OpenAI. (2023). Prompt engineering and AI systems. https:\/\/openai.com<\/p>\n\n\n\n<p>World Economic Forum. (2023). The future of jobs report. https:\/\/www.weforum.org<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cr\u00e9ditos Finales<\/strong><\/h2>\n\n\n\n<p><strong>Autor:<\/strong>&nbsp;<a href=\"https:\/\/niixer.com\/index.php\/como-crear-modelos-3d-increibles-con-meshy-ai-guia-completa-paso-a-paso\/\">Santiago Ramirez Rico<\/a> &#8211; <a href=\"https:\/\/niixer.com\/index.php\/2026\/03\/25\/meshy\/\">Alejandro Benavides<\/a><\/p>\n\n\n\n<p><strong>Editor:<\/strong>&nbsp;Magister Ingeniero Carlos Iv\u00e1n Pinz\u00f3n Romero, Kevin Castillo<\/p>\n\n\n\n<p><strong>C\u00f3digo:<\/strong>&nbsp;1016097165 &#8211; 1000287100<\/p>\n\n\n\n<p><strong>Instituci\u00f3n:<\/strong>&nbsp;<a href=\"https:\/\/www.ucentral.edu.co\/\">Universidad Central<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \u00bfQu\u00e9 es el Vibe Coding y por qu\u00e9 es importante? El Vibe Coding es una metodolog\u00eda emergente en el desarrollo de software que se basa en el uso de inteligencia artificial para generar aplicaciones a partir de instrucciones en lenguaje natural, conocidas como prompts. Este enfoque permite a losSeguir Leyendo<\/p>\n","protected":false},"author":2020,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"class_list":["post-85162","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"og:description\" content=\"1. \u00bfQu\u00e9 es el Vibe Coding y por qu\u00e9 es importante? El Vibe Coding es una metodolog\u00eda emergente en el desarrollo de software que se basa en el uso de inteligencia artificial para generar aplicaciones a partir de instrucciones en lenguaje natural, conocidas como prompts. Este enfoque permite a losSeguir Leyendo\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T22:50:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-1024x683.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","robots":{"index":"noindex","follow":"follow"},"og_locale":"es_ES","og_type":"article","og_title":"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","og_description":"1. \u00bfQu\u00e9 es el Vibe Coding y por qu\u00e9 es importante? El Vibe Coding es una metodolog\u00eda emergente en el desarrollo de software que se basa en el uso de inteligencia artificial para generar aplicaciones a partir de instrucciones en lenguaje natural, conocidas como prompts. Este enfoque permite a losSeguir Leyendo","og_url":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_modified_time":"2026-05-11T22:50:30+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-1024x683.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/","url":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/","name":"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1-1024x683.png","datePublished":"2026-04-13T23:39:25+00:00","dateModified":"2026-05-11T22:50:30+00:00","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-13-abr-2026-14_28_35-1.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/creacion-de-una-aplicacion-con-ia-mediante-vibe-coding-caso-practico-con-lovable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Creaci\u00f3n de una Aplicaci\u00f3n con IA mediante Vibe Coding: Caso pr\u00e1ctico con Lovable"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]}]}},"_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/pages\/85162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/2020"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=85162"}],"version-history":[{"count":6,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/pages\/85162\/revisions"}],"predecessor-version":[{"id":86775,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/pages\/85162\/revisions\/86775"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=85162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}