Investigación de diseño: el bucle de experiencia
Herramientas:
ddr <comando>una vez instalado (python tools/ddr.py install), de lo contrariopython <repo>/tools/ddr.py <comando>, donde<repo>está dos carpetas por encima de la carpeta real (resuelta por symlink) de esta skill.
Diseñas bien donde has mirado con atención, y mal en cualquier otro lugar. Esta skill es cómo te conviertes en un experto en un área antes de diseñar para ella, y cómo esa experiencia se mantiene fiel con el tiempo. El resultado no es un moodboard. Es un dominio: un dossier de lo que ahora entiendes, una biblioteca de referencias que realmente has visto, y una puntuación de confianza calculada a partir de esa evidencia.
La investigación que no cambia una decisión es navegación. La investigación que no registraste está perdida. Haz ambas cosas correctamente o no afirmes que investigaste.
0. Dónde te encuentras
ddr domain match "<el brief en una oración>"
Devuelve el sector (el tipo de negocio o audiencia) y el patrón (el flujo o superficie: onboarding, checkout, reserva, pricing, dashboard) con una confianza para cada uno. Luego ddr domain plan <slug> --stakes bajo|medio|alto:
| Stakes | Cuándo | Objetivo |
|---|---|---|
| bajo | un componente o un ajuste dentro de un sistema existente | 35 |
| medio | una página, un flujo, un rediseño de una superficie | 55 |
| alto | un nuevo sitio, una marca, un lanzamiento, cualquier cosa por la que se juzgará a un negocio | 70 |
Si se cumple el objetivo, lee ddr domain brief <sector> <pattern> y vuelve con el director de diseño. Si no, ejecuta el bucle a continuación hasta que se cumpla, o hasta que hayas hecho lo que el tiempo permite y puedas decir claramente hasta dónde llegaste. No esperes a que te lo pregunten. Informa al usuario en una línea: "La confianza en estancias independientes es 12, así que primero estoy investigando la categoría (aproximadamente 20 referencias)."
Territorio nuevo
Cuando no coincida ningún dominio, crea uno. Elige el nivel en el que las referencias se transfieren: las residencias de ancianos y las clínicas dentales son ambas "salud" pero sus sitios comparten casi nada, por lo que son sectores separados. Dos dominios cuyas mejores referencias serían la misma lista son un solo dominio.
ddr domain new estancias-independientes --kind sector --title "Estancias independientes" \
--summary "Alojamientos de autoservicio, casas de huéspedes y pequeños hoteles que venden directamente" \
--keywords "autoservicio,casa rural,casa de huéspedes,b&b,hotel boutique,alquiler vacacional" \
--aliases "alojamiento de corta estancia,alquiler de vacaciones"
Las palabras clave son las palabras que usaría un cliente, no palabras de diseño. Un patrón es algo que se repite entre sectores con su propia mejor práctica; crea uno cuando el brief se centre en él. Relaciona los dominios que se informan mutuamente (ddr domain relate estancias-independientes reserva --how "disponibilidad antes que precio"), fusiona dos que resultan ser uno (ddr domain merge <de> <en>, nada se elimina), y divide uno que ha crecido dos audiencias creando el segundo y moviendo las referencias que le pertenecen.
Tus instrumentos
Usa lo mejor que tengas, en este orden, y di cuál usaste:
| Tarea | Mejor | Alternativa |
|---|---|---|
| Encontrar candidatos por descripción | Exa MCP (ddr mcp --research muestra la configuración) | tu propia búsqueda web, el catálogo |
| Encontrar los mejores independientes en un lugar o rubro | Brave Search MCP búsqueda local y de lugar | búsqueda web para "mejor en ", sitios de reseñas, listas de premios |
| Capturas de pantalla y flujos de productos reales | Mobbin o Refero MCP (de pago) | análisis públicos, recorrer el flujo tú mismo |
| Mirar una referencia y medirla | ddr teardown <url> --into <slug> | Playwright o Chrome DevTools MCP, luego capturas de pantalla |
| Recorrer un viaje de forma segura | ddr teardown <url> --walk "Reservar ahora>Ver disponibilidad" | Playwright MCP, nunca enviando nada |
| Ver qué tan antiguo es un diseño | ddr history <url>, luego descomponer una versión archivada | las propias noticias o publicaciones de lanzamiento del sitio |
| Comparar lado a lado | ddr sheet --domain <slug> --with tuyo.png | ddr sheet a.png b.png c.png |
| Extraer los tokens de una marca | Firecrawl MCP formato branding | mediciones de tipo y paleta de ddr teardown |
ddr teardown guarda los pliegues de escritorio y móvil, una página completa y una tira de fotogramas de parada de desplazamiento, y mide la página en vivo: las fuentes y tamaños según la cantidad de texto que componen, la paleta por área pintada, colores de control, radios, sombras, relleno de secciones, ancho de párrafo, movimiento (temporizaciones de transición, bibliotecas de desplazamiento, video, lienzo, reglas de movimiento reducido), la pila sobre la que se construyó, la navegación, las llamadas a la acción y si una está sobre el pliegue, y las señales de diseño generado (texto de relleno, cejas, texto degradado, vidrio, tríadas de tarjetas con iconos). Los números hacen que tus comentarios sean específicos. Nunca reemplazan mirar: abre las imágenes.
1. Mapea el territorio
Escribe quiénes son realmente los mejores antes de abrir una galería. Los mejores en una categoría son las empresas que la gente de ese rubro admira, las que ganan por reputación y aquellas cuyos sitios copia la categoría. Encuéntralos de tres maneras:
- Directo (
--angle direct): los 6 a 12 más fuertes en esta categoría exacta, en la cima del mercado y entre los pequeños independientes que claramente lo están haciendo bien. Usa búsqueda web, prensa especializada, listas de premios en la categoría y el catálogo (ddr sources search "<categoría>" -v). - Líder (
--angle leader): el mejor trabajo en una categoría adyacente que resuelve el mismo problema para un cliente más exigente (un grupo de hoteles boutique para una casa rural, un banco privado para una cooperativa de crédito). - Externo (
--angle outside): al menos dos referencias de otra disciplina completamente diferente, elegidas por el mundo del tema (guías impresas, monografías de arquitectura, menús, títulos de películas, señalética).ddr sources shuffle -n 4da una selección.
Las galerías (Awwwards, recent.design, Land-book) son pistas, nunca evidencia. Prefiere los premios de año y mes sobre las selecciones diarias.
2. Mira correctamente
Una referencia solo cuenta tanto como realmente viste:
--evidence | Qué significa | Peso |
|---|---|---|
search | Leíste sobre ella o viste una miniatura | un cuarto |
visited | Cargaste el sitio en vivo y lo leíste | uno |
screenshot | Lo renderizaste y miraste los píxeles en escritorio y móvil | más |
flow | Recorriste el viaje real (reservar, registrarse, pagar) | la mayoría |
Descompón cada candidato serio y abre las imágenes:
ddr teardown https://a.ejemplo https://b.ejemplo --into <slug>
Mira los pliegues y los fotogramas de desplazamiento, no solo los números. Para los dos o tres mejores, ejecuta también ddr history <url>: una referencia "fresca" cuyo diseño data de 2019 es ahora una plantilla, y una versión archivada muestra qué movimientos son nuevos. Recorre el viaje que coincida con el brief hasta donde llegue sin pagar ni enviar nada. Una pantalla de carga o un muro de cookies no es el diseño; anótalo y mira más allá.
Si los términos de un sitio prohíben el acceso automatizado (agent_access = "scrape-no" en el catálogo), navega por él como lo haría una persona y registra visited. Nunca copies pantallas protegidas por muro de pago ni fotografías de nadie en un repositorio público; las capturas de pantalla se quedan en tu directorio de dominio, que nunca se publica.
3. Descompón y registra
Para cada referencia que se haya ganado su lugar, regístrala de inmediato, usando los valores medidos de su teardown.md:
ddr domain ref add <slug> --name "Nombre" --url https://... --verdict ejemplar \
--angle direct --evidence screenshot --score 4 --shots capturas/<host> \
--take "El calendario de disponibilidad es el héroe, los precios se muestran por noche junto a cada fecha, en una serifa condensada a 15px" \
--avoid "El video de dron con reproducción automática retrasa la primera pantalla útil 4s" \
--tags layout:calendario-heroe,type:serifa-condensada
--take es el movimiento específico, con valores cuando los tengas (tamaños, colores, temporizaciones, las palabras reales). "Limpio y moderno" no es un take. Puntúa con honestidad: 5 cambia cómo diseñarías esto, 3 es sólido y típico, cualquier cosa que puntuarías 2 no es un ejemplar.
4. Busca el slop
Encuentra de 3 a 5 contraejemplos (--verdict counter --avoid "..."): los sitios plantilla, los que parecen generados, los anticuados en esta categoría. Son tan valiosos como los ejemplares, porque muestran cómo se ve específicamente el slop de esta categoría, que SLOP.md en el director de diseño solo puede describir en general. Escribe el patrón en la sección Slop de la categoría del dossier. La confianza está limitada a 60 hasta que esa sección exista.
5. Redacta el dossier
Abre $(ddr domain path <slug>)/dossier.md y escribe cada sección a partir de lo que viste, nombrando las referencias. Sé concreto y con opinión:
- Para quién es: quién lo usa, qué les preocupa, con qué lo comparan.
- Lo que hacen los mejores: los movimientos que comparten los mejores, con valores.
- Convenciones que mantener: en qué confían los usuarios. Hazlas excepcionalmente bien.
- Convenciones que romper: qué es perezoso o anticuado aquí, y qué lo reemplaza.
- Slop de la categoría: cómo se ve el trabajo generado y de plantilla en esta categoría.
- Lenguaje: tipo, color, imaginería, voz y movimiento que pertenecen a este mundo, y por qué.
- Preguntas abiertas: lo que aún no sabes y qué lo respondería.
6. Cura
ddr domain audit <slug> --online
Señala referencias que están obsoletas (no vistas en un año), débiles (solo búsqueda), contradictorias (un ejemplar que puntuaste 2), muertas, movidas, o todas de un solo ángulo o fuente. Actúa sobre cada hallazgo: vuelve a mirar (ddr domain ref seen), recalifica, o retira con un motivo (ddr domain ref retire <slug> <id> --reason "rediseñado como plantilla en 2026"). Las referencias retiradas permanecen en el cementerio para que nunca se vuelvan a añadir silenciosamente. Una biblioteca solo es tan buena como lo que estás dispuesto a desechar.
7. Compara, luego recalifica
Haz una hoja de contactos de los mejores del dominio (ddr sheet --domain <slug> --n 6) y mírala como un conjunto. Si todas se parecen, la biblioteca ha convergido en una sola idea y la siguiente búsqueda debería buscar la referencia que las contradiga.
8. Recalifica y decide
ddr domain status <slug>
Muestra la puntuación, cada parte de ella, cualquier límite y qué lo aumentaría. Repite el bucle en las brechas más grandes hasta que se cumpla el objetivo de stakes. Luego informa al usuario dónde terminaste en una línea ("Estancias independientes está ahora en 58: 14 sitios vistos, 4 contraejemplos, el slop escrito") y vuelve al Paso 1 del director de diseño.
Profundidad
Escala el esfuerzo según los stakes y di lo que hiciste:
- bajo: 4 a 6 referencias, un contraejemplo, la línea de slop escrita. Minutos.
- medio: 8 a 12 referencias en los tres ángulos, 3 contraejemplos, cada sección del dossier. Menos de una hora.
- alto: 15 a 25 referencias, flujos recorridos en las 3 mejores, 4 o más contraejemplos, dos referencias externas, una pasada de auditoría. El tiempo que sea necesario.
El proyecto aún mantiene su propio libro corto en .design/references.md: las 5 a 10 referencias que cambiaron una decisión en este trabajo, una fila cada una, con la decisión que cambió. El dominio es lo que sabes; el libro del proyecto es lo que usaste.
Reglas
- Toma prestadas técnicas y principios, nunca un logotipo reconocible, fotografía, fuente de pago o ilustración propietaria.
- Registra el acceso fallido (muro de pago, muro de bot, enlace muerto) en lugar de adivinar qué había detrás:
ddr domain log <slug> note "Revolut bloqueó el renderizador y las solicitudes simples". - Nunca registres una referencia como vista que no hayas visto. La puntuación existe para evitar que reclames experiencia que no has ganado; inflarla anula lo único para lo que sirve.
- Cuando una entrada del catálogo esté muerta o sea incorrecta, arréglala con
ddr sources add, y añade también grandes fuentes nuevas allí, para que la próxima persona comience con ventaja.