constructor-de-identidad-de-marca

Constructor de Identidad de Marca

Lovable construye lo que describes, y la mayoría de las personas aún no han decidido cómo se ve, suena o representa su producto. Por eso obtienen el mismo gradiente genérico que todos los demás. Esta habilidad toma las decisiones de marca que realmente necesita una v1 y las escribe en un formato que un constructor puede seguir.

Cuándo usarlo

• Estás a punto de comenzar una build y aún no has decidido colores, fuentes o tono.
• Tus builds de Lovable siguen resultando genéricas.
• Tienes un nombre pero sin razón detrás, o ningún nombre en absoluto.
• Necesitas un documento de marca que una herramienta, un compañero de equipo o un contratista pueda seguir sin que estés presente.

Entradas

Un breve resumen es suficiente: qué hace el producto, para quién es y cualquier cosa ya decidida (un nombre, un color que te encanta, un competidor al que no quieres parecerte). Si el usuario ya tiene un nombre, consérvalo y escribe la justificación. No renombres un producto que nadie pidió renombrar.

Proceso

Haz al usuario una pregunta a la vez, y solo por lo que el resumen no responda ya.

1. Lee la situación. Responde estas cuatro preguntas tú mismo a partir del resumen antes de elegir cualquier cosa. Pregunta al usuario solo sobre aquellas que el resumen deje abiertas.

   • ¿Qué hace realmente, en una oración operativa? ("Reserva y enruta citas para peluqueros caninos móviles individuales", no "empoderando el cuidado de mascotas".)
   • ¿Quién debe confiar en él? Nombra la relación de confianza principal y una secundaria.
   • ¿Cuál es la tensión en el trabajo? Las marcas fuertes se asientan donde dos cosas que no deberían ir juntas se encuentran (logística y calma, datos y calidez). El nombre y el eslogan viven en esa tensión.
   • ¿Cuál es el lugar más pequeño donde tiene que funcionar? Un favicon, un ícono de aplicación, un encabezado de mensaje de texto. Diseña para ese tamaño.

2. Nombre (solo si es necesario). Enumera diez palabras para el lado operativo y diez para el lado relacional, luego empareja una de cada uno. Ofrece dos o tres opciones, cada una con una justificación de una línea. Prueba cada una: ¿se puede decir en una inhalación, funciona como URL, un desconocido entendería al menos la mitad?

3. Color: cinco colores, cada uno con un trabajo.

   • Primario para CTAs y los momentos principales de la marca, alta energía.
   • Oscuro para profundidad y contraste. Más cálido que el negro puro.
   • Claro para superficies y texto sobre oscuro.
   • Secundario como contrapeso que hace que el primario suene menos fuerte.
   • Acento para números, destacados y énfasis.

   Nombra cada color por lo que significa para la marca, no por su tono ("Ruta Nocturna", no "Azul Marino Oscuro"). Verifica el contraste: el texto del cuerpo debe cumplir WCAG AA (4.5:1) en cada fondo donde lo asignes.

4. Tipografía: dos fuentes. Una fuente display lo suficientemente fuerte para llevar un titular o un número. Una fuente de cuerpo que desaparezca en tamaños pequeños. Elige de Google Fonts para que cualquier constructor pueda cargarlas. Deben contrastar en peso, no pelearse en estilo: una fuente display pesada y con carácter con una fuente de cuerpo tranquila y legible.

5. Eslogan: dos oraciones cortas. La primera es la acción operativa, la segunda es la promesa relacional. Sin conjunción, porque la yuxtaposición es el significado. De cuatro a ocho palabras en total. ("Reserva la furgoneta. Mantén la calma.")

6. Voz: exactamente cuatro principios. Cada uno es un par de contraste, "X, no Y", más una oración de ejemplo y la versión genérica que reemplaza. Las oraciones de ejemplo deben describir solo cosas que el producto realmente hace en v1, porque los constructores y habilidades posteriores las reutilizan como texto. Los adjetivos de personalidad ("amigable, profesional") no son principios, ya que todas las marcas los reclaman.

7. Escribe las reglas de construcción. Convierte las decisiones en instrucciones que un constructor pueda seguir: qué color va en qué token de tema, carga de fuentes, reglas de botones y encabezados, y una lista corta de lo que no se debe hacer. Esta sección es lo que hace que el documento sea útil para Lovable y no solo bonito.

8. Guárdalo. Escribe brand-system.md usando referencias/plantilla-sistema-de-marca.md. Manténlo en una página.

Salida

• brand-system.md: una página que cubre la oración del producto, audiencia, justificación del nombre, eslogan, una tabla de paleta con reglas de uso, el emparejamiento tipográfico, cuatro principios de voz y reglas de construcción para Lovable.
• Una nota corta sobre cómo usarlo: pega el archivo completo en el conocimiento del proyecto de Lovable (configuración del proyecto), luego comienza el primer prompt de build con "Sigue el sistema de marca en el conocimiento del proyecto".
• Opcional: si el usuario lo solicita, una vista previa HTML de una página con muestras de color y especímenes tipográficos.

Barreras de seguridad

• Decide, no encuestes. Recomienda una paleta y un par de fuentes, y explica por qué. Ofrece alternativas solo para el nombre.
• Sin nombres de color AI. "Salvia", "Pizarra" y "Taupe Cálido" dicen cómo se ve un color, no qué significa.
• Sin declaraciones de misión disfrazadas de eslóganes. "Construyendo mejores comunidades juntos" es una misión que se rindió.
• Solo v1. El diseño de logotipo, estilo de ilustración y dirección de fotografía pueden esperar. Diló si el usuario se desvía hacia allí, y anótalo bajo "Después" en el documento.
• El contraste no es opcional. Si un emparejamiento falla AA, cámbialo antes de guardar.

Relacionados

La siguiente habilidad lee brand-system.md: arquitecto-de-narrativa-de-presentacion usa los principios de voz, y redactor-de-sitio-web-para-fundadores lo usa todo.