Lovable.

https://discord.com/channels/814407845428330536/1313176446138712085

https://lovable.dev/

https://aistudio.google.com/prompts/new_chat

Siempre revisar en modo mobil, tablet y desktop para ver si se ve bien el proyecto.

PRD — Product Requirements Document.

GPT de Octavia para crear PRD. (está dentro de «Cómo crear un buen prompt para Lovable.doc»)

https://chatgpt.com/g/g-68d4b6464af081918170599514dffe3a-arquitecto-prd-para-lovable

Cuando uses el GPT le pones el modelo de Thinking, y de ahí le pones el modelo de «Deep Thinking».

Si vas a hacer una página web, decirle que le vas a dar referencias para hacer la página web.

Para ver referencias de páginas web o de imágenes te metes en Dribble, copias las imágenes y le das al GPT que vas a crear el PRD. Volver a copiar las imágenes en Lovable cuando uses el PRD creado en el GPT.

https://dribbble.com/

Cuando vayas iterando, usar el modo «chat», le dices en el modo chat lo que quieres hacer, y después cuando el modo chat te dice «voy a hacer esto y esto y esto», validas, aplastas el botón para que te haga el cambio.

Si no sabe como hacer algo, en el modo chat le dices «Nos vamos a enfocar al 100% en esto. Quiero que hagas una investigación sobre XYZ para lograr XYZ, y dame las mejores opciones para lograr esto. Nos vamos a enfocar al 100% solo en esto. »

A veces, también es bueno ir a la documentación, y pegarle la documentación sobre cómo hacer algo para que Lovable lo pueda hacer.

El fuerte de Lovable no es crear imágenes, entonces, si es que quieres una imagen, es mejor que le subas a Lovable.

Para hacerle a la página más interactiva, le dices «Quiero que XYZ parte tenga XYZ y cuando scrolliemos para abajo, hayan imágenes de XYZ.»

Puedes coger el código de diseño personalizado de otras aplicaciones, y lo puedes introducir a Lovable. Para esto, entrar acá: https://21st.dev/community/components

En 21ist.dev puedes inclusive jugar con IA para crear animaciones. Se recomienda utilizar las secciones de Heroes.

No poner mucho código de 21st.dev ya que obviamente se hace pesada la página.

OBSERVACIÓN: cuando Lovable ya tienes más de unas 60 interacciones, Lovable se comienza a hacer lento y se comienza a perder. Mientras mejor sea el PRD y menos interacciones hayan, mejor.

Puedes usar LottieFiles que es una es una plataforma de animaciones vectoriales ligeras que se usan en web y apps. Funcionan con archivos .json (Lottie), no con GIFs ni videos.

https://lottiefiles.com/

https://codepen.io/

CodePen es una plataforma online para crear, probar y compartir código frontend (HTML, CSS y JavaScript) directamente en el navegador, sin instalar nada.

CodePen no es como LottieFiles, aunque a veces se usen para cosas visuales parecidas.
La diferencia está en qué tipo de “animación” es y cómo se usa.

La diferencia clave (en una frase)

  • LottieFiles → catálogo de animaciones listas (archivos .json).

  • CodePen → laboratorio de código donde la gente crea animaciones con HTML, CSS y JavaScript.

🟢 LottieFiles: animaciones “listas para usar”

Piensa en LottieFiles como:

🎞️ un banco de animaciones profesionales

  • Descargas un .json

  • Lo insertas en tu web o app

  • Funciona sin tocar código (o casi nada)

Ideal para:

  • Hero animations

  • Íconos animados

  • Estados (loading, success, error)

  • Onboarding

👉 Muy usado en SaaS, apps y landings modernas.

🔵 CodePen: animaciones hechas con código

CodePen es más bien:

🧪 un laboratorio creativo frontend

Aquí no “descargas una animación”, sino que ves:

  • Animaciones en CSS

  • Interacciones en JavaScript

  • Micro-UX (hover, scroll, loaders)

  • Experimentos visuales

Y si te gusta algo:

  • Copias el código

  • Lo adaptas

  • Lo integras en tu proyecto

🧩 Ejemplo concreto

LottieFiles

  • “Quiero una animación de escudo de seguridad”

  • La descargas

  • La usas tal cual

CodePen

  • “Quiero un botón con hover elegante”

  • Encuentras un Pen

  • Copias el CSS/JS

  • Lo ajustas a tu diseño

https://ui.shadcn.com/

shadcn/ui (en ui.shadcn.com) es una biblioteca de componentes UI modernos para React que se basa en Tailwind CSS y Radix UI, con una idea clave muy distinta a otras librerías.

🧩 ¿Qué tipo de cosas ofrece?

Componentes listos y bien pensados como:

  • Botones

  • Formularios

  • Inputs

  • Modales (Dialogs)

  • Dropdowns

  • Tabs

  • Tables

  • Toasts

  • Skeleton loaders

  • Dark mode

Todo con:

  • Accesibilidad (a11y) bien hecha

  • Diseño limpio tipo SaaS moderno

  • Tailwind “bien escrito”

🆚 ¿En qué se diferencia de otras librerías?

  • vs Material UI / Ant Design:
    shadcn/ui no te encierra; copias y personalizas sin luchar contra el framework.

  • vs Bootstrap:
    Es moderno, accesible y sin estilos “opinados”.

  • vs Chakra:
    Menos magia, más control.

https://magicui.design/

Magic UI (en https://magicui.design) es una colección de componentes UI modernos, animados y “copiables” pensada para React + Tailwind, muy usada para crear interfaces tipo SaaS llamativas sin diseñar desde cero.

Sirve para acelerar el diseño visual de una app o landing con componentes que ya vienen:

  • bien diseñados,

  • con animaciones suaves,

  • y listos para adaptar.

Ejemplos típicos:

  • Marquees (cintas animadas de logos o texto),

  • Hero sections con movimiento,

  • Cards animadas,

  • Badges, stats, testimonials,

  • Efectos visuales modernos (hover, glow, scroll).

🧩 ¿Cómo se usa?

La filosofía es similar a shadcn/ui:

  • No es un plugin.

  • Copias el código del componente.

  • Lo adaptas a tu proyecto.

Aunque el código es React, sus patrones visuales se pueden replicar en:

  • HTML + CSS (WordPress),

  • UI generada por Lovable,

  • otras stacks frontend.

👉 Mucha gente lo usa como referencia visual, no necesariamente tal cual.

🆚 ¿En qué se diferencia de otras herramientas?

  • vs LottieFiles:
    Magic UI no son animaciones .json; son componentes UI animados con CSS/JS.

  • vs CodePen:
    Magic UI es curado y consistente; CodePen es experimental.

  • vs shadcn/ui:
    shadcn/ui es más “base y sobrio”; Magic UI es más visual y animado.

https://imgur.com/

Imgur es una plataforma de alojamiento y compartición de imágenes (y GIFs) muy popular en internet.

🧠 ¿Qué es Imgur, en simple?

Imgur sirve para:

  • Subir imágenes rápidamente

  • Obtener un link público

  • Compartirlas en foros, chats, documentación o redes

  • Sin crear una web propia ni configurar hosting

Nació muy ligada a Reddit y comunidades técnicas.

🧩 ¿Para qué se usa en la práctica?

Usos típicos:

  • Compartir screenshots (errores, diseños, demos).

  • Subir mockups o referencias visuales.

  • Compartir GIFs cortos.

  • Documentación técnica o soporte (“mira esta imagen”).

Es muy común en:

  • Desarrollo

  • Diseño

  • Foros

  • Soporte técnico

⚠️ Cosas importantes a saber

  • Las imágenes son públicas si compartes el link.

  • No es un CMS ni una galería profesional.

  • No es ideal para:

    • Imágenes críticas de un sitio web

    • Contenido legal sensible

    • Activos de marca a largo plazo

Para eso es mejor:

  • WordPress Media Library

  • Supabase Storage

  • Un CDN propio

En Lovable hay como subir hasta 10 imágenes por iteración.

Hay como subir videos hasta de 20 megas. Para subir más videos, puedes subir diferentes videos y después le pides a Lovable que los una adentro de si.

Hay como subir pdfs,

Hay como subir presentaciones de powerpoint.

Hay como subir Excels y hacer presentaciones interactivas.

Puedes subir un pdf con una hoja de vida(CV).

Lección 10: se puede crear una base de datos con usuarios y autentificación. Entonces, cuando un usuario se ingresa a la app, la app puede guardar información de chats anteriores. Puedes darles roles y jerarquías a los usuarios, como también, crear una pasarela de pagos.

Puedes guardar datos y utilizar los datos dentro de tu aplicación, esto es súper interesante y súper util.

Las Edge Functions son pequeñas piezas de backend que se ejecutan en la nube para manejar la lógica y acciones sensibles de una aplicación sin necesidad de montar un servidor; reciben peticiones (como una API), validan datos, toman decisiones, consultan bases de datos, llaman a servicios externos (IA, pagos, emails) y devuelven resultados de forma segura, actuando como el cerebro invisible que conecta el frontend (por ejemplo Lovable) con la base de datos y otras aplicaciones.

Si vas a tener una app donde los usuarios van a usar claves, siempre tienes que utilizar dentro de cloud, los secrets. Hay que usar la Lovable API key.

La transcripción del texto que aparece en la imagen es:

https://docs.lovable.dev/integrations/ai

Hay cómo crear una interfaz igualita a la de Chatgpt, de un chatbot.

Autenticación rápida con Google, Microsoft y Apple.

Para revisar si es que sirve la pasarela de pagos con Stripe, se recomienda utilizar una tarjeta falsa de stripe, en este caso vamos a poner 8 veces 42 y ahora vamos a poner aquí un año que sea una fecha que sea mayor a la actual, 3 números aleatorios y de nombre.

Puedes crear un Chatbot integrado con una Base de Datos donde le haces preguntas direcamente al chatbot sobre lo que tiene en la base de datos.

Lovable obviamente no tiene todo integrado, si este es el caso, puedes por ejemplo utilizar otras API. Por ejemplo, puedes usar la función de Whisper de Openai y le colocas con una API key dentro de Lovable para poder hacer transcripciones.

Puedes conectar Lovable a tu Supabase: https://supabase.com/

Pedir a Lovable que el rato que se llenen los formularios, hagan un dashboard interactivo, util, interesante, dinámica.

Obviamente, cuando remixeas un proyecto, la conexión con supabase del proyecto original se desconecta.

Puedes hacer investigaciones profundas con Chatgpt de la documentación de una API para poder pegarle a Lovable y que entienda cómo funciona una app.

Lo que tienes que hacer dentro de lovable, cuando hayas terminado la App, es que revise el código que está inncesario, y que lo limpie para quitar todo lo inncesario, y asegurarse de que al hacer la limpieza, no se dañe la app. Tener mucho cuidado de no cambiar los edge functions, o funciones de Supabase por que son más dificiles de revertir.

El rollback o restore no sabe funcionar si es que tienes una Supabase conectada(es decir, los cambios que pidas que se hagan en Supabase no se hacen).

Si tienes la versión Pro(la pagada de Supabase), ahí sí tienes backups de la base de datos que se hacen cada 24 horas, y puedes hacer rollbacks. Puedes hacer restore point-in-time para irte a restaurar la baes de datos en algún tiempo en específico. Esto cuesta 400 dólares por mes.

RLS policies = reglas de seguridad en la base de datos. Revisar lección: «Directo De Vibe Coding – Lovable – Octavian Kneupper – 2025-10.Oct.28 2H – Notas Jota.doc»

Se puede crear un App tipo Tinder, con swipe para tomar decisiones.

Lovable GPTs.

https://chatgpt.com/g/g-68be3140e5f88191b337ff8de853ef06-lovable

https://chatgpt.com/gpts/editor/g-68be3140e5f88191b337ff8de853ef06