Diseño web para estudios de diseño de IA

Posicionamiento editorial de OpenDesign como estudio

La página se abre con la frase de autoría “Designing intelligence with skills, taste, and code.” Su columna izquierda contiene la declaración y el texto de apoyo, mientras que la columna derecha utiliza un busto clásico, un árbol, marcas geométricas, nubes y pintura coral como argumento visual a favor del ensamblaje creativo. Esta división hace que el concepto sea comprensible antes de que el visitante llegue al catálogo.

Una fila compacta de métricas bajo las acciones muestra “31 Skills”, “72 Systems” y “12 CLIs”. Estas cifras se presentan como el vocabulario ilustrativo del estudio en la página, no como un rendimiento actual del producto verificado de forma independiente. Su ubicación aporta un índice concreto a la narrativa y mantiene el hero centrado en la idea de un estudio de diseño.

El sistema visual es intencionadamente editorial: una tipografía de display negra, sobredimensionada y cursiva se sitúa sobre un campo de pergamino, con el coral como acento recurrente y finos filetes alrededor de la composición. Este contraste hace que la página se acerque más a una publicación impresa que a una homepage de software convencional, aunque el coste es que la tipografía de display densa debe combinarse con un ajuste responsive cuidadoso.

Casos de uso para la narrativa del estudio

La página resulta adecuada para un estudio que necesita explicar conjuntamente una filosofía de diseño y un conjunto de trabajos. Lo hace mediante una secuencia de manifiesto, capacidades, laboratorios, método, trabajos seleccionados, colaboradores y contacto. Cada sección cambia la pregunta del visitante: de qué cree el estudio a qué cataloga y cómo propone trabajar.

La misma estructura puede servir para un proyecto de código abierto, una práctica de tecnología creativa o un archivo de investigación de diseño. Es menos adecuada para una página de producto orientada a tareas que deba priorizar precios, estados de cuenta o flujos operativos. La composición dedica un espacio considerable a la atmósfera y la genealogía, por lo que un servicio utilitario necesitaría un modelo de información más denso.

Del manifiesto a los trabajos seleccionados

El orden de la página es su principal modelo de interacción. Después del hero inicial, “We treat your agent as a creative collaborator, not a black box.” establece la posición editorial. A continuación, “Skills, systems, and surfaces for creative intelligence.” descompone esa posición en cuatro unidades etiquetadas: Skills, Systems, Adapters y BYOK. El tratamiento numerado recurrente hace que el vocabulario abstracto pueda consultarse rápidamente.

La sección de laboratorios pasa de la explicación a una presentación similar a un catálogo. Sus botones de categoría muestran “All 31”, “Prototype 27”, “Deck 04”, “Mobile 03” y “Office 08”. Le siguen cinco tarjetas: “Magazine Decks”, “Synthetic Matter”, “Prompt Choreography”, “Visual Reasoning” y “Soft Systems”. Los botones no tienen un controlador de filtrado en el código fuente suministrado; sus cifras siguen siendo contenido de muestra escrito para la página, salvo que se verifiquen por separado.

La sección del método comprime el flujo de trabajo propuesto en “Detect”, “Discover”, “Direct” y “Deliver”. La secuencia resulta útil porque cada palabra nombra un tipo diferente de decisión: encontrar el contexto disponible, resolver la ambigüedad, seleccionar una dirección visual y presentar un resultado. El inconveniente es que las etiquetas concisas dejan sin expresar los detalles de implementación; esto conserva el tono editorial, pero limita la orientación operativa.

A continuación, el panel de trabajos seleccionados reduce el catálogo amplio a dos entradas contrastantes: “guizang-ppt”, descrita como una habilidad para PPT web de estilo revista, y “kami”, descrita como un sistema editorial de papel. Sus funciones diferentes se explicitan mediante las etiquetas “Featured Skill” y “Companion System”, de modo que el visitante puede comprender la relación entre una capacidad y un sistema visual en lugar de ver dos tarjetas sin relación.

Relaciones de contenido visibles

La página combina repetidamente una etiqueta de categoría breve, un título grande, una explicación corta y una imagen. En las tarjetas de laboratorios, etiquetas como “DECK”, “MEDIA”, “LOOP”, “CRITIQUE” y “RUNTIME” clasifican la entrada antes de que el título aporte su tema específico. Esta gramática repetida facilita la consulta rápida sin reducir todos los experimentos a la misma afirmación.

En la sección de trabajos seleccionados, el fondo oscuro invierte el tratamiento claro del hero y proporciona a las tarjetas crema un contraste más fuerte. Las tarjetas tienen una forma y una alineación ligeramente irregulares, lo que refuerza el lenguaje del collage. Esta dirección artística aporta carácter, pero también implica que el espaciado y la longitud del texto necesitan un control más estricto que en una cuadrícula estándar de tarjetas con la misma altura.

Límites de las capacidades

Las capturas establecen una landing page diseñada y un lenguaje de interacción local visible, que incluye navegación, etiquetas de filtrado y una presentación orientada al scroll. No establecen servicios conectados, almacenamiento backend, detección de agentes en directo, ejecución de exportaciones ni la eficacia de ningún flujo de trabajo mencionado. Las adaptaciones deben conservar esta distinción y presentar esos comportamientos como alcance de producto propuesto hasta que se implementen y verifiquen por separado.

Adapta el concepto con cuidado

La idea más transferible no es el conjunto literal de métricas, sino la progresión de creencia a vocabulario, de vocabulario a archivo y de archivo a método. Una nueva versión puede conservar esa progresión y sustituir las etiquetas y cifras ilustrativas por contenido verificado. Mantén la composición de dos partes del hero cuando el tema se beneficie de una metáfora visual potente, pero reduce la complejidad del collage si el público necesita inspeccionar directamente un producto o servicio.

Esta página conceptual incluida no constituye una prueba de la homepage oficial actual ni del inventario de productos. Su texto de autoría incluye afirmaciones sobre agentes, sistemas, ejecución local, despliegue y exportaciones, pero el diseño por sí solo no verifica esas afirmaciones. La página puede servir como referencia visual para una narrativa de estudio sin convertirse en una especificación de producto actual.

El código fuente implementa revelaciones activadas por el scroll y un encabezado que se oculta o reaparece según la dirección del scroll. También intenta obtener un recuento de estrellas de GitHub y recurre a su marcador de posición si la solicitud falla; la captura aislada no demuestra que se haya recibido correctamente una respuesta en directo. Hay enlaces nativos a secciones y enlaces externos a repositorios, pero los botones de los laboratorios y los botones de flecha de los trabajos seleccionados no tienen controladores. Las etiquetas de colaboradores, el testimonio y las cifras de productos representados son contenido de muestra de la página, no relaciones ni resultados verificados de forma independiente.

Para lograr una recreación fiel, conserva el orden de las secciones, la paleta de pergamino y coral, el contraste entre las cursivas editoriales con serif y la tipografía sans serif de gran peso, y las etiquetas numeradas que se repiten desde el hero hasta el catálogo. Después, prueba los encabezados largos, la fila de filtros y las tarjetas irregulares en anchos más reducidos. El resultado buscado es un sitio web editorial cuya estructura visible explique una práctica creativa antes de pedir a los visitantes que continúen hacia su archivo o recorrido de contacto.

Prioridades de adaptación sugeridas

Empieza por la arquitectura de información: hero, manifiesto, capacidades, laboratorios, método, trabajos seleccionados, colaboradores y contacto. Después, define qué cifras están verificadas, qué entradas son muestras y qué acciones son solo recursos visuales. Por último, ajusta los recortes de imagen y la longitud de los textos para que el collage siga siendo expresivo sin ocultar el tema de cada sección.