Los knowledge files en Lovable funcionan como un prompt de sistema que se adjunta automáticamente a cada instrucción que envías, lo que te permite mantener un diseño consistente, un código bien organizado y una app lista para producción. Si estás construyendo con Lovable y quieres que cada nuevo componente respete tu estilo y estructura, este recurso es clave.

¿Qué es un knowledge file en Lovable y para qué sirve?

Piensa en el knowledge file como un texto extra que se pega a cada prompt que ejecutas. En lugar de repetir cada vez "recuerda el estilo de botón que estoy usando", lo escribes una sola vez y Lovable lo tendrá presente siempre.

Para acceder, entras al botón de settings en la parte superior izquierda del proyecto (también hay un atajo) y buscas la sección knowledge [01:00]. Ahí encuentras una caja donde puedes pegar instrucciones y guidelines.

¿Qué es un system prompt? Es un bloque de texto que se adjunta a cada prompt que envías a la IA. Su función es dar contexto fijo, como reglas de estilo o de organización, sin que tengas que repetirlo manualmente.

¿Cómo crear una guía de estilos consistente con chat mode?

Una de las mejores formas de aprovechar el knowledge file es para mantener el styling consistente en toda tu app. Si ya tienes una landing page con los componentes, colores y look que te gustan, puedes pedirle a Lovable que extraiga ese estilo y lo convierta en una guía.

Desde chat mode, que no edita el código sino que solo devuelve texto, escribes algo como: Can you create a simple text-based system prompt that I can use to keep the styling and consistency across the app in line with the landing page that we made [02:30].

Lovable revisará tus componentes y devolverá un documento que incluye:

• Colores primarios y primary glow.
• Background colors y tipografía.
• Estilos de botones y iconography.
• Reglas de layout y comportamiento mobile.

El resultado puede ser largo. Mi recomendación es quedarte con lo esencial: colores y estilos de botones, que son los que más impacto tienen en la consistencia visual. Copias ese fragmento, vuelves a settings con el atajo command + dot, lo pegas en la caja de knowledge y guardas [04:10].

¿Cómo verificar que el knowledge file está funcionando?

La forma más rápida es probarlo con un componente nuevo. En el ejemplo, usé la herramienta de edit sobre el botón sign in y pedí: When I click the sign in button, I would like to be taken to a login page [05:00]. La idea era generar un prototipo, no funcionalidad real, solo para validar que el estilo se respetara.

El resultado fue una página de login con el mismo background, los mismos botones y los mismos sizings de la landing. Ahí confirmas que el knowledge file está haciendo su trabajo.

¿Cómo usar el knowledge file para tener una app production ready?

El segundo uso poderoso es la organización del código. Una app production ready cumple tres condiciones: los componentes están bien organizados, todo es fácil de encontrar y otro developer podría tomar el proyecto y seguir trabajando sin fricción.

¿Qué hace que una app sea production ready? Que los componentes estén bien nombrados, agrupados en carpetas, sin duplicados y suficientemente pequeños como para que cualquier developer pueda leerlos y modificarlos rápido.

Para lograrlo, escribes un prompt en el knowledge file con estas instrucciones [07:30]:

1. Antes de crear un componente nuevo, revisar si ya existe uno reutilizable en la app.
2. Si hay que crear uno, que esté bien nombrado y organizado en folders.
3. El objetivo es una app limpia, fácil de transferir a otro developer.
4. Los componentes deben ser pequeños y enfocados.

¿Por qué evitar la duplicación de componentes?

Imagina que tienes un botón en la landing page y necesitas otro botón en el dashboard. Si creas uno nuevo en lugar de reutilizar el existente, terminas con dos botones que hacen lo mismo, código duplicado y un proyecto cada vez más difícil de mantener.

Reutilizar evita ese caos. Y mantener componentes pequeños tiene un beneficio extra: Lovable trabaja más rápido y comete menos errores cuando los archivos no son enormes. Si notas que la herramienta se ralentiza o da resultados raros, muchas veces es porque está manejando componentes gigantes que ya no tienen sentido.

¿Qué es un componente en React? Es una pieza reutilizable de interfaz, como un botón o un formulario, que puedes usar en distintas partes de la app sin reescribir el código. Si este concepto te suena nuevo, los cursos de React en Platzi te dan las bases.

Con estas dos aplicaciones, guía de estilos y reglas de organización, el knowledge file deja de ser un campo opcional y se convierte en la columna vertebral de tu proyecto en Lovable. ¿Tú qué reglas pondrías en tu propio knowledge file? Déjamelo en los comentarios.