¿Qué hace Design Scout (Investigador de Diseño)?
Los sitios web diseñados de memoria salen como el promedio de todos los sitios: héroe centrado, blob degradado, tres tarjetas de características, una fuente que nadie eligió. Los buenos diseñadores evitan esto mirando trabajo real antes de dibujar nada. Esta habilidad hace que eso sea la norma: mirar primero, decidir con propósito, luego construir.
El flujo consta de cinco pasos. No te saltes la investigación para ahorrar tiempo. La investigación es lo que ahorra tiempo, porque reemplaza rondas de "esto se ve genérico, inténtalo de nuevo".
- Recepción: conocer el negocio
- Investigación: recolectar referencias reales
- Brief: convertir referencias en decisiones
- Punto de control: el usuario aprueba la dirección
- Construir y verificar contra el brief
1. Recepción
Necesitas tres cosas antes de cualquier investigación. Pregunta por lo que falte, en un solo mensaje:
- Nicho: qué tipo de sitio web (clínica dental, B2B SaaS para facturación, tienda de ropa urbana)
- Nombre: el nombre del negocio o producto
- Acerca de: qué hace o vende, para quién, qué lo hace diferente
Si el usuario ya proporcionó esto, no preguntes de nuevo.
En el mismo mensaje, ofrece estas preguntas opcionales y deja claro que pueden omitirlas. Cada una afina mucho la investigación, pero ninguna debe detenerte:
- ¿Quién es la audiencia y cuál es la acción principal que el sitio debe lograr que realicen?
- Tres palabras para describir cómo debería sentirse (tranquilo, ruidoso, premium, divertido, técnico...)
- ¿Algún sitio que amen o detesten, en cualquier industria?
- ¿Activos de marca existentes: logotipo, colores, fuentes, fotos?
- ¿Qué páginas o secciones se necesitan y en qué stack construir?
Para cualquier cosa omitida, elige un valor predeterminado sensato y indícalo en el brief como una suposición para que el usuario pueda corregirlo.
2. Investigación
Lee references/sources.md ahora. Enumera cada fuente, para qué sirve, cómo buscarla y cuáles bloquean la obtención simple.
Planifica las consultas primero. Anota de 4 a 6 frases de búsqueda antes de abrir algo: el nicho en sí ("sitio web de clínica dental"), el tipo de página ("página de aterrizaje de reservas"), las palabras de estado de ánimo ("editorial tranquilo") y un nicho adyacente cuya cultura de diseño sea más fuerte que la de este (un dentista puede aprender de marcas de cuidado de la piel; una herramienta de contabilidad de herramientas de desarrollo estilo Linear). La consulta adyacente es importante: si solo miras dentro del nicho, reproduces los clichés del nicho.
Cubre cuatro lentes, no dieciocho sitios. El archivo de fuentes agrupa los sitios por lente. Usa al menos una fuente de cada uno, más donde el primero resulte escaso:
| Lente | Pregunta que responde |
|---|---|
| Sitios web en vivo | ¿Cómo diseñan una página los sitios reales y publicados en este espacio? |
| Patrones de UI | ¿Cómo resuelven los buenos productos esta sección específica (precios, navegación, formulario de reserva)? |
| Estado de ánimo visual | ¿Cómo podría sentirse: imágenes, textura, color, dirección artística? |
| Tipografía y color | ¿Qué fuentes y paleta específicas? |
También mira a 2 o 3 competidores directos del negocio (búsqueda web simple). No para imitarlos, sino para aprender qué esperan los visitantes en este nicho y ver lo que todos hacen, para que el diseño pueda diferenciarse.
Ve al sitio real. Las miniaturas de las galerías son pequeñas y a menudo desactualizadas. Cuando una entrada de galería parezca prometedora, abre el sitio web real al que apunta y míralo. Toma una captura de pantalla si tienes una herramienta de navegador; leer el HTML solo te dice la estructura, pero no cómo se siente.
Registra cada guardado a medida que avanzas. Apunta a 6 a 10 en todos los lentes. Para cada uno:
- Nombre y URL (la URL real que realmente abriste)
- Qué funciona específicamente: sé concreto ("titular serif sobredimensionado alineado a la izquierda contra una foto de producto estrecha", no "limpio y moderno")
- La única cosa que tomar prestada de él
- Qué dejar atrás
Las notas vagas producen diseños vagos. Si no puedes decir qué es específicamente bueno de una referencia, descártala.
Regla de honestidad. Solo cita referencias que realmente cargaste en esta sesión. Nunca inventes un sitio, una URL o una descripción de una página que no viste: una referencia inventada es peor que ninguna, porque el usuario confiará en ella. Si una fuente está bloqueada, requiere inicio de sesión o está vacía, dilo y usa otra. Si no tienes acceso web en absoluto, dile claramente al usuario que el paso de investigación no puede ejecutarse y pregúntale si quiere pegar enlaces o capturas de pantalla, o proceder desde el conocimiento general con esa salvedad indicada.
Escala según el trabajo. Un sitio completo recibe el pase completo. Para una sola sección o una solicitud "rápida", haz un pase corto: 2 consultas, 3 o 4 referencias, un brief de unas pocas líneas. No bajes a cero.
3. Brief
Convierte las referencias en decisiones. Usa la plantilla en references/brief-template.md y guárdala como design-brief.md en el proyecto, para que la dirección sobreviva a la conversación y el trabajo posterior pueda verificarse contra ella.
El brief debe comprometerse. Cada elemento es una elección específica con una razón vinculada a una referencia o al negocio:
- Concepto en una frase: la idea que hace que este sitio sea de este negocio y de nadie más
- Layout: sección por sección, con la idea estructural para cada una
- Tipografía: fuentes nombradas, dónde se usa cada una y dónde obtenerlas (verifica la licencia; prefiere fuentes gratuitas para uso comercial, como Google Fonts o Fontshare, a menos que el usuario tenga una licencia)
- Color: valores hex con roles (fondo, texto, acento, etc.), verificados por contraste legible
- Elemento firma: la única cosa que un visitante recordaría y describiría a otra persona
- Imágenes y animación: de qué tipo y qué tan restringidas
- No se hará: los clichés del nicho y patrones genéricos que este diseño evita deliberadamente
Toma prestados principios, no propiedad. Toma la idea (una cuadrícula asimétrica, una combinación de tipos, una forma de ritmar las secciones) y nunca el logotipo, imágenes, ilustraciones, copia o un clon a nivel de píxel de su diseño de la referencia. Mezcla ideas de varias referencias para que el resultado no sea copia de nadie.
4. Punto de control
Muestra al usuario la dirección antes de construir: la línea de concepto, las 3 o 4 referencias más sólidas con enlaces, paleta, fuentes, esquema de secciones, elemento firma. Mantenlo lo suficientemente corto para leerlo en un minuto.
Cuando las referencias apunten a dos direcciones claramente diferentes, ofrece ambas como A y B con una recomendación, en lugar de promediarlas en algo insípido.
Espera un sí o cambios. Construir un sitio completo sobre una dirección no aprobada es el error costoso que este paso existe para prevenir. La única excepción: si el usuario dijo de antemano que solo construyas sin revisar, procede y muestra el brief junto con el resultado.
5. Construir y verificar
Construye según el brief en el stack del usuario. Si hay otra habilidad para la implementación de frontend o diseño, úsala para la construcción y trata el brief como su entrada.
Mientras construyes:
- Escribe copia real para este negocio, en su voz. Sin lorem ipsum ni relleno como "Eleva tu flujo de trabajo".
- Nunca inventes testimonios, logotipos de clientes, estadísticas, premios o reseñas. Si una sección los necesita, coloca un marcador de posición claramente marcado y dile al usuario qué proporcionar.
- Diseña para móvil a propósito, no como un escritorio comprimido.
- Mantén el contraste del texto legible y los elementos interactivos accesibles por teclado.
Cuando la construcción esté completa, lee references/slop-check.md y ejecútalo contra el resultado. Luego míralo: abre la página, toma capturas de pantalla en anchos de escritorio y teléfono si puedes, y compáralo con el brief y las referencias. Pregúntate de cada sección: ¿pasaría esto en las galerías que acabas de buscar? Corrige lo que no esté a la altura antes de presentar.
Presenta el resultado con una nota breve: qué se construyó, qué referencias dieron forma a qué decisiones, qué marcadores de posición necesita llenar el usuario y qué no pudiste verificar.