No empezar cada dirección desde cero
Elegir un estilo visual desde la nada era más engorroso de lo necesario. Antes de diseñar una interfaz todavía había que reunir referencias, ponerle nombre a una dirección y traducir esa intención en reglas que se pudieran aplicar.
Construí Design Catalog para acortar ese comienzo: un lugar donde comparar direcciones distintas con rapidez y partir de una base que ya tiene forma. El objetivo no es decidir por quien diseña, sino evitar que cada proyecto vuelva a arrancar frente a una página en blanco.
Ver una dirección, copiar una base, hacerla propia
El recorrido principal está organizado alrededor de tres acciones. Primero se explora visualmente; luego se abre el estilo que mejor encaja con el proyecto; por último se copia el artefacto más útil para llevar esa dirección a una conversación nueva con un agente.
Encontrar
El índice reúne direcciones visuales distintas en una grilla navegable. La búsqueda considera nombres, etiquetas y aliases, de modo que se puede llegar a una estética tanto por cómo se llama como por los conceptos asociados.
Copiar
Cada estilo abre un panel con tres vistas: el espécimen para reconocerlo, un prompt autocontenido para usarlo con un agente y una especificación Markdown que deja sus decisiones por escrito.
Adaptar
El material copiado funciona como punto de partida, no como una receta rígida ni como garantía de una salida exacta. La intención es conservar una dirección coherente mientras se modifica para el contexto real del proyecto.
La diferencia importante está en ese último paso. Una galería puede servir para inspirarse, pero obliga a reconstruir lo visto antes de poder usarlo. Acá la referencia visual y las instrucciones copiables viven juntas: se puede evaluar una dirección y salir del catálogo con una base concreta para trabajar. Tanto el prompt como la especificación están preparados para sobrevivir pegados por separado en una conversación nueva; no dependen de que el agente conozca el resto del sitio.
Más que una imagen: espécimen, prompt y especificación
Cada entrada mantiene juntas tres piezas con trabajos diferentes. Esa separación permite reconocer una estética antes de decidir cuánto detalle hace falta para aplicarla.
Espécimen
Una demostración viva en HTML y CSS permite ver la dirección aplicada y responde al ancho del visor. La misma pieza se reutiliza en la tarjeta, el panel y la página del estilo.
Prompt
Da instrucciones autocontenidas para que un agente pueda trabajar con esa dirección sin necesitar contexto previo del catálogo.
Especificación
Conserva una referencia más detallada y copiable en Markdown. Sirve cuando hace falta revisar las reglas del estilo o trasladarlas con mayor precisión.
El espécimen muestra; el prompt orienta una ejecución; la especificación deja una referencia consultable. Ninguna pieza intenta reemplazar a las otras, y las dos salidas de texto plano se pueden usar fuera del catálogo sin arrastrar dependencias del producto.
Que sumar estilos no vuelva inconsistente el catálogo
La experiencia solo se sostiene si cada nueva entrada llega completa y sigue siendo fácil de encontrar. Por eso el contenido no se trata como una colección de páginas sueltas, sino como un contrato común que alimenta el índice, las páginas de detalle y la búsqueda.
Una entrada, tres piezas coordinadas
Cada estilo debe declarar su metadata, prompt y especificación. Los schemas y la validación cruzada frenan una publicación si falta una pieza, si los identificadores no coinciden o si el manifiesto y el contenido se separan.
Buscar por cómo se piensa un estilo
El ranking usa nombre, etiquetas y aliases, con reglas deterministas. Eso permite encontrar una dirección aunque la búsqueda no coincida exactamente con el nombre que aparece en la tarjeta.
Contenido accesible fuera de la interfaz
Además de las páginas visuales, /llms.txt y las rutas de prompt y especificación exponen los artefactos en texto plano. El catálogo los hace descubribles para agentes sin afirmar cómo los usará un modelo externo.
Mostrar dónde vive un estilo, no solo cómo se decora
La primera versión compartía una anatomía entre la mayoría de los especímenes. Esa base facilitaba comparar estilos, pero también podía hacer que direcciones cercanas se distinguieran sobre todo por color y tipografía. La siguiente etapa cambia la pregunta: no solo cómo se ve una estética, sino en qué tipo de sitio tiene sentido.
Por eso estoy profundizando los especímenes como sitios propios. Editorial, por ejemplo, se presenta como una publicación, con una composición que demuestra el estilo dentro de un contexto reconocible. El primer grupo de estos sitios ya está desplegado. Otro grupo de estilos también fue profundizado y todavía no forma parte de la versión pública, por lo que el visitante actual no lo ve.
El MVP está publicado; el catálogo todavía está creciendo
Ya funciona
La versión desplegada permite navegar, buscar, abrir cada estilo y copiar su prompt o especificación. El recorrido completo de encontrar, copiar y adaptar ya está disponible.
Sigue evolucionando
El trabajo pendiente es profundizar cómo se demuestra cada dirección y continuar ampliando el catálogo. No se trata de terminar una demo, sino de hacer más útil y específica cada base sin cerrar el conjunto como definitivo.