Diseña el style guide de tu app en Lovable
Curso Gratis de Lovable para Crear Páginas Web sin Programar
Contenido del curso
Andrea Alexandra Mora Vega
JUAN DAVID CORRALES AGUILAR
Fabián Ardila
NESTOR IVAN RONCANCIO CABALLERO
JUAN DAVID CORRALES AGUILAR
Beder Danilo Casa Condori
Andres Reinoza
Kevin Fiorentino
Brenda Iliana Gallegos López
WALTER DIAZ
Andrea Alexandra Mora Vega
Jose Antonio Pinto Gimeno
Gabriela Almeyda
Boris Turcios
Aderson Rangel Parada
Nicolás García
Fabricio Sandi Torrico
JUAN DAVID CORRALES AGUILAR
Alejandro Bravo
Erick Ripas
Steven Aguilera
Yaritza Jazmin Sanchez Rosa
Yaritza Jazmin Sanchez Rosa
Yaritza Jazmin Sanchez Rosa
Alfredo Hankins
Camila Ossa
Henry Velásquez Yaya
En mi opinión, antes de comenzar a construir una guía de estilo o un sistema de diseño en Lovable, he entendido que lo más importante no es partir de colores o tipografías aisladas, sino de la intención emocional y funcional del producto. Definir desde el inicio qué quiero que el sitio transmita —por ejemplo, tranquilidad o calma— me permite tomar decisiones de diseño mucho más coherentes.
He aprendido que estas emociones no se diseñan de forma abstracta, sino que se traducen en atributos concretos: paletas de color suaves y desaturadas, tipografías legibles con buen interlineado, jerarquías claras, uso generoso de espacio en blanco y animaciones mínimas o muy sutiles. Llegar a Lovable con esta traducción previa hace que los prompts sean más claros y efectivos.
También considero válido apoyarme en sistemas de diseño existentes como referencia, no para copiarlos, sino para tener un marco visual sólido. Guías como Material Design, las Human Interface Guidelines de Apple o design systems de productos como Notion, Calm (si quiero transmitir tranquilidad) o Headspace ayudan a aterrizar el lenguaje visual que quiero comunicar y sirven como referencias claras al momento de construir.
En conclusión, al terminar esta clase entiendo que es muy útil crear una página de Style Guide desde el inicio dentro de Lovable, definir ahí las decisiones principales y refinar sobre esa base antes de expandir el sitio. Una vez esa guía existe, Lovable puede leerla y reutilizarla como sistema de diseño, evitando la creación de estilos inconsistentes en nuevas páginas o componentes.
Igual la idea es avanzar sin caer en ser perfeccionista porque eso demora, así que más que buscar una guía perfecta antes de empezar, mi enfoque es construir una guía inicial clara y coherente, e ir ajustándola de forma iterativa. En Lovable, el verdadero valor está en definir bien la intención, aportar buenas referencias y refinar con criterio a medida que el proyecto evoluciona.
Excelente aporte. Entender la psicología del color. Rojo - Azul - Amarillo - Verde.
Cada uno de ellos está enlazado a una emoción diferente. 💚
Dejo el copy para el knowledge style-guide y con una mejorita que incluye mantener actualizado el style-guide apra los nuevos componentes
Knowledge copy:
Whenever you create a new page or component, make sure that it uses our style guide and its styles. You should never create new components withour first checking the styleguide. for new components you need to create, always include them in the styleguide
se me acabaron los creditos , vali mondiu
Crea una cuenta con el mismo correo con el que estás registrado a Platzi, recuerdo haber escuchado que así obtienes un -50% descuento
La creación de guías de estilo y sistemas de diseño en Lovable es fundamental para mantener la consistencia visual de tu aplicación. Estas guías permiten definir reglas sobre colores, tipografías y componentes, lo que facilita la creación de nuevas páginas y el uso de elementos predefinidos. Además, al integrar esta guía en el conocimiento del sistema de Lovable, garantizas que cada nuevo componente diseñado respete estas pautas. Esto evita la incoherencia en el diseño y mejora la experiencia del usuario, asegurando que tu aplicación sea visualmente atractiva y profesional.
Este es el prompt para crear el style guide:
in this project I would like you to create a new page called styleguide that encompasses our current styles and will let me create a styleguide that you can use thorugh the app as a design system
El profesor hace bastante incapié en decirle a la IA que no cree nuevos componentes sin verificar que no haya uno ya creado para esa necesidad. Ya sabemos con qué cosas hay que lidear al hacer vibe coding.
Estaba muy emocionada practicando lo que Harry iba demostrando, lastimosamente los créditos se agotan muy rápido.
tal cual Lovable solo brinda 5 créditos pot día 😊
Cuando llega el momento de dar órdenes o de proporcionar prompts de manera efectiva, resulta sumamente importante y fundamental tener la capacidad de saber describir con claridad y precisión lo que uno desea obtener como resultado. Para poder desarrollar y perfeccionar esta habilidad tan valiosa de saber describir de forma detallada y específica, creo que la vida diaria nos permite desarrollar esta habilidad si la hacemos consciente e intencional con actividades como:
1. Explicar una idea sin usar gestos ni ejemplos visuales
Ejercicio: describe algo (un objeto, una emoción, una instrucción) solo con palabras, como si la otra persona no pudiera verlo.
🔹 Entrena: precisión verbal, orden lógico, eliminación de supuestos.
Ejemplo:
Explicar cómo llegar a un lugar sin decir “por ahí” o “así”.
2. Dar instrucciones paso a paso
Ejercicio: explica un proceso cotidiano como si la persona nunca lo hubiera hecho antes.
🔹 Entrena: secuenciación, claridad, anticipación de errores.
Ejemplos:
3. Comparar dos cosas y justificar la elección
Ejercicio: explica por qué prefieres una opción sobre otra, con criterios claros.
🔹 Entrena: pensamiento crítico y lenguaje comparativo.
Ejemplo:
“Prefiero este cuaderno porque el papel es más grueso, no traspasa la tinta y tiene márgenes definidos.”
4. Describir una emoción sin usar la palabra de la emoción
Ejercicio: expresa cómo te sientes sin decir “estoy triste”, “estoy ansiosa”, etc.
🔹 Entrena: riqueza descriptiva y conciencia emocional.
Ejemplo:
“Siento presión en el pecho, me cuesta concentrarme y estoy más irritable de lo normal.”
5. Escribir mensajes claros con intención
Ejercicio: antes de enviar un mensaje, pregúntate:
6. Dar feedback específico (no general)
Ejercicio: reemplaza juicios vagos por observaciones concretas.
🔹 Entrena: objetividad y claridad.
Ejemplo:
❌ “Esto no me gusta”
✅ “El texto es largo, no tiene subtítulos y me pierdo en el mensaje principal.”
7. Narrar un evento en orden lógico
Ejercicio: cuenta algo que pasó siguiendo una estructura clara:
8. Observar y nombrar detalles
Ejercicio: elige un objeto cotidiano y escribe o di:
9. Reformular pedidos vagos
Ejercicio: toma una frase ambigua y mejórala.
🔹 Entrena: traducción de intención a instrucción clara.
Ejemplo:
❌ “Hazlo más bonito”
✅ “Usa menos texto, más espacio en blanco y una paleta de dos colores.”
10. Revisar resultados vs intención
Ejercicio: después de pedir algo, pregúntate:
Muy buen aporte y reflexión. Gracias.
1. Idea central La clase explica cómo construir un design system y una style guide dentro de Lovable para asegurar una experiencia visual coherente desde el día uno. Al centralizar colores, tipografías, botones y patrones, cada nueva página o componente sigue las mismas reglas, lo que mejora la calidad visual, acelera la construcción y refuerza la identidad de la app. El uso del edit tool, inspiración externa y el knowledge file permite refinar colores, botones e interacción, garantizando una UI limpia, profesional y lista para escalar.
2. Puntos clave
3. Ejemplos Crear una Style Guide page que muestre componentes existentes, pedir “change the design system color scheme to use blue”, simplificar botones a primary y ghost, replicar un botón inspirado en Dribbble especificando bordes menos redondeados, color púrpura opaco y un divisor entre ícono y texto, capturar la inspiración con una captura de pantalla y pedir “recrea este botón como primary variant”, y finalmente agregar al knowledge file la instrucción de que todas las nuevas páginas deben seguir la Style Guide.
4. Conexión o siguientes pasos Este enfoque prepara para construir más páginas y flujos en Lovable con un diseño coherente y escalable, utilizando el design system como base para acelerar la producción y mantener calidad visual en desarrollos posteriores.
-------------------------------------------------- RESUMEN DE LA CLASE CREACIÓN DE GUÍAS DE ESTILO Y SISTEMAS DE DISEÑO (LOVABLE) -------------------------------------------------- GUIA DE ESTILO (STYLE GUIDE) 🎨 Documento que define reglas visuales claras para una interfaz. Incluye colores, tipografías, botones, espaciados y estilos generales. Sirve para mantener coherencia visual en todo el producto. SISTEMA DE DISEÑO 🧩 Conjunto de componentes reutilizables y reglas. Permite construir interfaces más rápido y sin inconsistencias. Es la evolución de la guía de estilo. CONSISTENCIA VISUAL 🎯 Hace que toda la aplicación se vea uniforme. Mejora la experiencia del usuario y la percepción profesional del producto. REUTILIZACIÓN ♻️ Los componentes se usan múltiples veces. Reduce errores y acelera el desarrollo. COLORES 🎛 Definición de colores principales y secundarios. Control de contrastes y modo claro/oscuro. Clave para accesibilidad y legibilidad. TIPOGRAFÍA 🔤 Define tamaños, pesos y jerarquía del texto. Ayuda a comunicar mejor la información. BOTONES 🔘 Uso de pocas variantes (primary y ghost). Facilita decisiones de diseño y uso por parte del usuario. LOVABLE – KNOWLEDGE / CONFIGURACIÓN ⚙️ Se cargan las reglas del sistema de diseño. Lovable aplica automáticamente el estilo en nuevas páginas y componentes. INSPIRACIÓN VISUAL 📌 Uso de referencias externas para mejorar el diseño. La inspiración se adapta, no se copia. EDICIÓN Y MEJORA CONTINUA ✏️ El sistema no es estático. Se ajusta y mejora conforme evoluciona el producto. -------------------------------------------------- STICKERS DE ESTUDIO (MEMORIA RÁPIDA) -------------------------------------------------- 🎨 Guía de estilo = reglas visuales 🧩 Sistema de diseño = componentes reutilizables 🎯 Consistencia = mejor experiencia de usuario ♻️ Reutilizar = menos errores 🎛 Colores definidos = accesibilidad 🔘 Menos botones = más claridad ⚙️ Lovable aplica el estilo automáticamente 📌 Inspiración no es copia ✏️ El sistema siempre evoluciona -------------------------------------------------- LÍNEA DE TIEMPO VISUAL PARA REPASO -------------------------------------------------- INICIO 🧠 Comprender qué es una guía de estilo y por qué es necesaria. PASO 1 📘 Crear la guía de estilo en Lovable. PASO 2 🎨 Definir colores, contrastes y tipografía. PASO 3 🔘 Diseñar botones simples y consistentes. PASO 4 🧩 Convertir la guía en un sistema de diseño reutilizable. PASO 5 📌 Tomar inspiración visual para mejorar el diseño. PASO 6 ⚙️ Cargar el sistema en Knowledge para uso automático. RESULTADO FINAL ✅ Producto visualmente coherente, profesional y escalable. --------------------------------------------------
Could you kindly advise me on how to undo one change made to Lovable?
There should be subtitles in English! In the first classes, the option was available, but now there are only Spanish subtitles available :/
That bug was fix it. Try now
Alejandro, la guía de estilo es principalmente una herramienta de diseño para ti, el creador, como se menciona en la clase. Te ayuda a mantener la consistencia en el diseño de tu app con Lovable. Una vez publicada, los usuarios solo verán el resultado final.
It would be great if they included all the prompts used in the class in the description, so we can practice them. It’s something basic and very helpful for learning better.
BUENA EXPLICACIONN
¿Puedo usar esto para rediseñar apps existentes?
Absolutamente. Un sistema de diseño no es exclusivo para proyectos que empiezan desde cero. Si ya tienes una aplicación construida pero su apariencia es inconsistente, puedes generar una guía de estilo retroactiva. Al crear esta página centralizada, la herramienta agrupará los componentes que ya existen. A partir de ahí, puedes auditar y unificar los elementos visuales. Utilizando la herramienta de edición específica, puedes seleccionar un botón desactualizado y pedirle a la IA que lo modernice o cambie su esquema de colores. Una vez que la guía de estilo esté refinada, cualquier refactorización que agregues a tu aplicación antigua heredará automáticamente este nuevo estándar moderno y profesional.
¿Qué pasa si la IA genera demasiados estilos?
Cuando la inteligencia artificial se vuelve demasiado creativa y genera docenas de variantes innecesarias, tu interfaz corre el riesgo de volverse caótica y difícil de mantener. La solución es aplicar una técnica de simplificación activa. Debes intervenir directamente y establecer límites estrictos. Por ejemplo, puedes ordenarle a la herramienta que elimine todo excepto dos variantes fundamentales: un botón primary (para las acciones principales) y un botón ghost o secundario (para acciones menos importantes). Reducir la biblioteca de componentes a lo esencial no solo limpia el código, sino que mejora drásticamente la experiencia del usuario final al crear una navegación predecible.
¿Por qué es mejor crear una guía primero?
Piensa en una guía de estilo como los cimientos y planos de una casa. Si empiezas a construir sin ellos, terminarás con puertas que no encajan y ventanas de diferentes tamaños. Al definir un sistema de diseño antes de generar las pantallas principales, estableces reglas claras sobre colores, tipografías y componentes. Esto evita la deuda de diseño, un problema común donde cada nueva página introduce un botón o color ligeramente distinto, haciendo que la aplicación luzca poco profesional. Además, al centralizar estos estilos, cualquier cambio futuro se aplica de forma global y coherente, ahorrándote horas de ajustes manuales en cada pantalla individual.
para que el boton azul se paresca al que le gusta tendria que cambiar el fondo blanco a negro de esa forma le dara el efecto luminoso ya que se expande tambien en el fondo negro
This is the result of my design system. Since I’m a visual person (I’m a designer), I created a dedicated view to centralize styles and components in one place. I also added a right-side menu to provide faster access to other relevant views.
Great Camila!. The best way to practicing English.
