📖 La revista de decoración, no el plano de la casa del vecino
¿Eres nuevo aquí? Referencia visual es mostrarle al agente un sitio, un diseño o una imagen existente para que entienda el estilo que quieres: no el contenido, el estilo: dónde van los bloques, el tamaño de los títulos, el ambiente general (sobrio, colorido, denso, aireado). Es lo mismo que hace un arquitecto al hojear una revista de decoración antes de diseñar tu casa: no va a copiar la casa de la portada ladrillo por ladrillo; reúne ideas como "me gustó esta distribución de la sala", "me gustó este tipo de iluminación" y las usa para diseñar una casa nueva, tuya.
El agente ve una referencia del mismo modo que ve cualquier cosa en esta ruta: por screenshot (la captura de pantalla — módulo 5.3) o mediante un enlace al que accede y analiza. La diferencia entre el módulo 5.5 y el 5.3 es lo que haces con lo que aprendió: en el 5.3 comparaba su PROPIO trabajo con el diseño. Aquí observa el trabajo de otra persona para aprender un patrón de diseño — y esta es una línea que debe quedar clara desde el principio, porque es fácil pasar de «aprender de» a «copiar de».
Leyenda: la referencia entra por la izquierda solo como fuente de diseño; el "filtro de marca" del medio cambia sistemáticamente el color, la fuente, el logo y el tono; lo que sale a la derecha tiene la misma disposición, pero una identidad nueva.
💡 Concepto principal
La referencia visual es materia prima para el diseño. Lo que construyas después es tuyo: siempre pasa por el filtro de marca antes de publicar.
- •Un arquitecto mira 20 revistas y no construye ninguna de esas 20 casas: construye la número 21.
- •Tu referencia puede ser un competidor, un sitio que admiras o un ejemplo de portafolio, siempre que el resultado final no parezca el mismo sitio.
⚖️ Inspirarse × clonar: la línea que no se cruza
Esta es la regla explícita de la Ruta 5, y es seria: la referencia es para aprender y después crear tu propio sitio con tu propia marca — nunca para copiar un sitio ajeno entero, con el diseño, los textos y las imágenes de otra empresa. Copiar la identidad visual de una marca real (sus colores exactos, el logo, los textos, las fotos) puede infringir derechos de propiedad intelectual y, en la práctica, engañar a quienes visiten tu sitio haciéndoles creer que se trata de otra empresa.
La buena noticia: es fácil trazar la línea entre los dos cuando sabes qué observar. Diseño (disposición de las secciones: un hero grande, luego 3 tarjetas y después testimonios), tipo de composición (imagen a la izquierda / texto a la derecha) y estructura de navegación son patrones de diseño ampliamente usados; nadie es "dueño" de la idea de tener un menú en la parte superior. Ya colores de marca (la paleta exacta que identifica a esa empresa), logo, textos originales e fotos/ilustraciones las protegidas son activos de esa marca en particular; en ese caso, no se tocan.
✓ Inspirarse (bien)
- ✓Copiar la disposición: hero + 3 bloques + testimonios + pie de página
- ✓Usar el mismo tipo de composición (imagen grande de fondo, texto centrado)
- ✓Adoptar el "estilo" visual: minimalista, denso, colorido, corporativo
- ✓Tomar la idea de una función (carrusel, FAQ expandible) sin copiar el código fuente protegido
✗ Clonar (no está bien)
- ✗Usar los colores de marca exactos de otra empresa (su código hex específico)
- ✗Copiar el logo, aunque esté "adaptado"
- ✗Pegar sus textos originales (frases llamativas, descripciones de productos)
- ✗Descargar y reutilizar las fotos/ilustraciones protegidas del sitio de referencia
⚠️ Atención
Si, al terminar el sitio, alguien que conoce la referencia dice «esto es una copia de tal empresa», cruzaste la línea, aunque no hayas copiado literalmente ningún texto ni imagen. La prueba es sencilla: el resultado debe tener una identidad propia, no parecer prestada.
🎨 Qué es el rebranding en la práctica del agente
¿Eres nuevo aquí? Cambio de marca, aquí, es el proceso de tomar un diseño de referencia y reemplazar sistemáticamente todo lo que identifica a la marca original por lo tuyo: colores, tipografía, logo y tono de voz. No es «hacer un arreglo rápido»: es un reemplazo completo y deliberado, punto por punto, hasta que no quede ningún rastro de una identidad ajena.
¿Eres nuevo aquí? Paleta de colores es el
conjunto de colores que representa tu marca (normalmente 1 color principal + 1-2 de apoyo + neutros). Cada color tiene
un hex — un código de 6 caracteres como #0d9488
que identifica exactamente ese tono, sin ambigüedad. Ese es el código que le das al agente: «azul» es impreciso,
#2563eb es exacto.
El color sale, entra el código hex
Cada elemento que usaba el color de referencia (botones, enlaces, fondos, íconos) pasa a usar tu paleta, color por color.
La tipografía cambia de familia
La fuente del título y del cuerpo del texto pasa a ser la tuya — aunque el «peso visual» (título grande y llamativo, texto discreto) siga siendo parecido.
El logo y el nombre propios ocupan su lugar
Donde estaba el logo de la referencia, va el tuyo (hecho en el módulo 5.6, «Carpeta de marca»).
Los textos se escriben desde cero, con tu tono
No traduzcas ni parafrasees el texto de referencia: cada frase de tu sitio está escrita pensando en tu negocio y tu forma de hablar.
📎 Dándole la referencia correcta al agente
La referencia llega al agente de dos formas: una enlace al que accede y analiza (usando las mismas herramientas de navegador del módulo 5.3), o una captura de pantalla que adjuntas directamente a la conversación. Una captura de pantalla es más confiable cuando el sitio de referencia tiene protección contra el acceso automatizado o cuando quieres mostrar solo una parte específica (el hero, no todo el sitio).
Leyenda: la escalera sube en 3 peldaños: elegir, indicar qué copiar e indicar explícitamente qué no copiar. Saltarse el peldaño 3 es el error más común (ver tema 6).
🔍 Por dentro
- Buena referencia: un sitio del mismo TIPO de negocio u objetivo que el tuyo —landing de servicios, portafolio, tienda—; no hace falta que sea del mismo nicho exacto.
- Instrucción de alcance: siempre indica en qué PARTE fijarse ("el encabezado y la sección de precios"), no "copia todo el sitio": eso reduce la posibilidad de que el agente arrastre detalles de la marca.
📝 Instrucciones de marca: el prompt que hace funcionar el rebranding
¿Eres nuevo aquí? Tono de voz de la marca es la forma en que tu empresa «habla»: formal o informal, técnica o sencilla, seria o con humor. Así como la paleta necesita un valor hexadecimal exacto, el tono de voz necesita una descripción concreta («directo y sin jerga, como si se lo explicaras a un amigo» es mejor que «profesional»).
Un prompt de rebranding completo tiene 4 ingredientes: la referencia (con alcance), la paleta en hex, el nombre/logo de la marca y el tono de voz. Si falta uno, el agente llena el vacío con lo «genérico» del módulo 5.1 — o peor, con un rasgo de la referencia que debía cambiarse.
Objetivo: pedirle al agente un rebranding completo, usando un sitio de referencia solo como fuente de diseño y proporcionándole las 3 instrucciones de marca (paleta, nombre/logo, tono).
Anexei uma captura de tela do site <referência.com>. Quero que você use APENAS o layout dessa referência como inspiração: a disposição do cabeçalho fixo, o hero com título grande + botão, e a seção de 3 colunas com ícones logo abaixo. NÃO copie cores, logo, textos ou imagens da referência — construa a versão da minha marca do zero, com estes dados: - Nome da marca: <Nome da Sua Empresa> - Paleta: cor principal <#0d9488>, cor de apoio <#38bdf8>, fundo <#0f172a> - Tom de voz: <direto e caloroso, como um consultor explicando pra um amigo, sem jargão técnico> - Textos: escreva do zero pro meu negócio de <descreva seu negócio em 1 frase>, não traduza nem parafraseie nada da referência Ao terminar, tire um screenshot do resultado e me mostre lado a lado com a referência, apontando o que veio do layout e o que é 100% meu.
Cómo verificar: compara el resultado con la referencia: si alguien que no conoce ninguno de los dos sitios mira el tuyo y no reconoce la marca original, el rebranding funcionó. Comprueba también si realmente se aplicó cada hex de la paleta (no solo el color principal).
💡 Consejo práctico
Guarda este bloque de "paleta + nombre + tono": es el esqueleto de la "carpeta de marca" que formalizarás en el módulo 5.6, para no tener que volver a escribir todo esto en cada proyecto nuevo.
🚫 Errores comunes y checklist final
Los dos errores que más aparecen cuando alguien empieza a usar referencias: primero, dejar que el agente copie textos e imágenes — pedir solo "haz algo parecido a este sitio" sin decir explícitamente que los textos, las imágenes y el logo no deben copiarse, y el agente (que intenta seguir fielmente el pedido) reutiliza lo que encontró. Segundo, olvidar cambiar la paleta — pedir el rebranding pero no indicar los códigos hexadecimales, así que el agente mantiene tonos parecidos a los de la referencia "porque combinaban con el diseño".
✓ Prompt bien armado
- ✓Dice «solo el diseño» y enumera exactamente qué copiar
- ✓Pasa los códigos hex exactos de la paleta, no nombres de colores vagos
- ✓Pide textos escritos desde cero para tu negocio
- ✓Pide una confirmación visual comparando el resultado con la referencia
✗ Prompt arriesgado
- ✗"Hazlo igual a este sitio" sin ninguna salvedad
- ✗Sin una paleta en hex — el agente adivina los colores
- ✗Sin pedir textos originales — el agente reutiliza frases de la referencia
- ✗Sin una revisión final que compare ambos lado a lado
✅ Lista de verificación antes de publicar algo inspirado en una referencia
- ☐ La paleta del resultado es TUYA, con los códigos hex verificados — no quedó ningún color «parecido» al de la referencia.
- ☐ El logo y el nombre son 100% tuyos (creados o reemplazados, no los de la referencia).
- ☐ Todo el texto se escribió para tu negocio — ninguna frase es una traducción o paráfrasis de la referencia.
- ☐ No se reutilizó ninguna imagen/foto/ilustración de la referencia.
- ☐ Revisaste ambos lado a lado y confirmarías en voz alta: «esto es mío, está inspirado en, no es una copia».
Verificación rápida (opcional): ¿qué es seguro reutilizar de un sitio de referencia?
🏋️ Ejercicio
Elige un sitio que admires (sea o no un competidor). Toma una captura de pantalla solo del encabezado + hero. Prepara el prompt de rebranding del tema 5 usando esa captura, con una paleta y un nombre ficticios (o los tuyos, si ya los tienes). Ejecútalo en Claude Code y compara el resultado con la lista de verificación anterior.
Guarda el código hex de la paleta que usaste: vuelve en el módulo 5.6, "Carpeta de marca".