Knowledge files para apps consistentes en Lovable
Curso Gratis de Lovable para Crear Páginas Web sin Programar
Contenido del curso
Henry Bolaño
Javier Lazaro
Luis Angel Flores Moran
Rubén Rodríguez
Santiago Velasquez
JHØN AVALØZ
Ricardo Madrid
EDGAR LÓPEZ FIERRO
JHØN AVALØZ
EDGAR LÓPEZ FIERRO
It3m 14
JHØN AVALØZ
Jafet Brito
Edinson Fabián
Gabriel Obregón
Alejandra Roself Pagano Lagos
Juan Saenz G
Aloy Foxy
Piero Anderson Yactayo Rojas
Victor R Vele
Fredy Pico
Fredy Pico
Donald Mauricio Solano Monge
Camila Ossa
Kevin Fiorentino
Carlos Murgas Carrillo
Arturo Galvis
Arturo Galvis
Yaritza Jazmin Sanchez Rosa
Yaritza Jazmin Sanchez Rosa
Prompt del minuto 6:55 (buenas practicas para optimizar productos complejos)
When creating new components I would like to first understand if there are any components already existing in the app that we can use rather than making a new one. If we do create a new one make sure that it is well named and organised into sub component folders. Our goal is to have a production ready app that is clean and easy to pass to another developer if necessary.
Make sure any components that you do create are small. If they go over 500 lines of code then refactor them into smaller components, keeping a clean architecture.
Tks !!
Thanks a lot!
Me voy a marear de la clase pasada en español a esta clase, si es así debería haber un switch o botón que diga en que quieres la clase, en español o inglés. Sugiero que estos cursos dados por profesores de otras lenguas, se queden en el idioma original que el profesor habla de forma fluida. Es solo una sugerencia.
La pregunta es cómo activo o desactivo el español?
Es una buena solucion para otra ocasion, pero por ahora solo es adaptarse
Esto se llama, en el vibe coding, Context Engineering. Es lo mismo que sucede con el knowledge en Cursor, por ejemplo, o los claude.md y agents.md de claude code y codex. Para los que desean ahondar en esto:
Yo prefiero un documento en PDF u otro formato que tenga instrucciones para saber cómo utilizar Lovable
Y unas buenas infografias, mapas mentales y mas. No obstante, nos podemos complementar de otras fuentes
Sería mejor consultar la documentación
el curso dice "totalmente en español" según el comercial
Español subtitulado bro
Hasta el momento llevamos, introduccion general, una biblioteca genial de javascript, como utilizar el chat y como realizar cambios pequenos sin consultar a la AI, en eso deberias de centarte, el idioma es lo de menos.
Mi prompt: Always answer to me in spanish, write the comments in the code in spanish and everything we see on the frontend of the web app is in spanish, the variable names and the rest of the code can be in english.
When creating new components I would like to first understand if there are any components already existing in the app that we can use rather than making a new one. If we do create a new one make sure that it is well named and organised into sub component folders. Our goal is to have a production ready app that is clean and easy to pass to another developer if necessary.
Make sure any components that you do create are small. If they go over 500 lines of code then refactor them into smaller components, keeping a clean architecture.
📘📌 Lovable: Knowledge File + System Prompt
━━━━━━━━━━━━━━━━━━━━━━━
🎯 CORE IDEA
👉 A single knowledge file + a system prompt allow:
✔️ Consistent interfaces
✔️ Unified visual styles
✔️ Reusable components
✔️ Production-ready projects
🔑 All without repeating instructions in every prompt.
━━━━━━━━━━━━━━━━━━━━━━━
🧠 WHY DOES IT WORK?
📎 The knowledge file is automatically attached to every prompt.
🧩 Lovable:
✨ Result:
All views follow the same visual and structural criteria.
━━━━━━━━━━━━━━━━━━━━━━━
🧩 CORE CONCEPTS
📂 Knowledge file
⚙️ System prompt
🏁 Final goal
━━━━━━━━━━━━━━━━━━━━━━━
🛠️ CREATING THE FILE
📍 Path in Lovable:
➡️ Settings → Knowledge
📋 Paste there the prompt with:
━━━━━━━━━━━━━━━━━━━━━━━
🎨 CREATING THE STYLE PROMPT
💬 Use chat mode with an instruction like:
➡️ “create a simple text-based system prompt for styles that match the landing page”
🔍 Lovable analyzes:
📄 Generates:
➡️ Design System and Styling Guidelines
━━━━━━━━━━━━━━━━━━━━━━━
✂️ WHAT TO COPY FROM THE DESIGN SYSTEM
🚫 Not everything is needed
✅ Only the essentials:
📎 This is saved in the knowledge file.
━━━━━━━━━━━━━━━━━━━━━━━
✅ QUICK VALIDATION
🧪 Test example:
➡️ “generate a login page after clicking Sign In”
🔎 Check:
✔️ If it matches → the system works.
━━━━━━━━━━━━━━━━━━━━━━━
🏗️ BEYOND DESIGN
📦 The system knowledge also defines production-ready structure.
🔑 Principles:
━━━━━━━━━━━━━━━━━━━━━━━
🧱 ORGANIZATION BEST PRACTICES
📁 Clear structure:
🎯 Goal: an app that is easy to maintain and deliver.
━━━━━━━━━━━━━━━━━━━━━━━
🧾 ORGANIZATIONAL PROMPT: WHAT IT SHOULD STATE
It should reinforce:
✔️ Reusability\
✔️ Clear naming
✔️ Proper file placement
✔️ Professional focus
que es un componente
Hola, roself. Imagina que estás construyendo una casa con bloques de Lego. Un componente es cada una de esas piezas individuales (como una ventana, una puerta o un ladrillo) que puedes usar una y otra vez en diferentes partes de tu construcción.
En el desarrollo de aplicaciones, un componente es una pieza de código independiente y reutilizable que cumple una función específica, como un botón, una barra de navegación o un formulario.
¿Por qué son importantes?
¿Puedo crear una página web con varias páginas dentro de un mismo proyecto en Lovable, algo similar a lo que él hizo en el sign-up, pero por ejemplo, con la página de servicios o contacto? ¿O tengo que crear cada página como un proyecto independiente y después enlazarlas?
Si puedes, totalmente Solo pideselo y podrás hacerlo
Demasiado intuitivo
It's great I would love to learn more from the professor harry Thank you so much
To understand the project organization very well, it’s necessary to study and learn about frontend development. You can study that here on Platzi.
Follow me:
No hay una clase en donde nos expliquen como funciona el tema de los créditos en lovable?
follow me:
terrible que cambie de ingles a español jaja
😂 siiiiiii, me están obligando a cambiar el switch de idioma XD Se siente raro.
Back to English! Thanks!
qué maravilla del vibe-coding!
English is better
Great class, well done !!
¿Por qué es mejor usar componentes pequeños?
Imagina que estás construyendo una casa con bloques de Lego. Si usas bloques gigantes que ya tienen ventanas, puertas y techo pegados, será casi imposible modificar solo la ventana sin romper todo lo demás. En el desarrollo de software ocurre exactamente lo mismo.
Mantener los componentes pequeños y enfocados en una sola tarea (como un simple botón o una tarjeta de perfil) hace que la inteligencia artificial procese los cambios mucho más rápido y con menor margen de error. Cuando le pides a la herramienta que modifique un bloque de código masivo y complejo, es muy probable que se confunda, se vuelva lenta o rompa funcionalidades existentes. Al dividir tu interfaz en piezas modulares y pequeñas, no solo optimizas el rendimiento al generar código, sino que también facilitas el mantenimiento futuro si decides escalar tu aplicación o trabajar con otros desarrolladores.
¿Cómo mantengo el mismo estilo visual siempre?
Piensa en el archivo de conocimiento como el manual de marca de tu empresa que le entregas a un nuevo diseñador. En lugar de recordarle en cada interacción qué tono de azul usar o qué tan redondeados deben ser los botones, configuras estas reglas una sola vez en los ajustes globales.
Para lograrlo, puedes pedirle a la inteligencia artificial que analice una pantalla que ya te guste y extraiga sus colores, tipografías y sombras. Luego, guardas ese texto generado en la sección de Knowledge. A partir de ese momento, cualquier pantalla nueva que solicites (como un panel de control o un inicio de sesión) heredará automáticamente esa identidad visual. Es como tener un director de arte invisible que revisa cada nuevo elemento antes de crearlo, asegurando que tu aplicación no parezca un Frankenstein de estilos diferentes, sino un producto profesional y cohesivo.
