1. Design Challenge
  2. #001

// Design Challenge #001

SIGNAL / NOISE

Una revista experimental sobre tecnología e internet, hecha en React, TypeScript y Tailwind: portada, índice de seis historias y un artículo largo.

  • 2026-10-19
  • 2 modelos

// Las soluciones

Lo que construyó cada uno

Versiones finales, tal como se entregaron.

// Lado a lado

Las mismas vistas, lado a lado

Las mismas vistas, capturadas igual para las dos.

Portada

1440 × 900
Claude Opus 5.5: Portada
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Portada
DeepSeek V4.1 Flash 1017

Portada, móvil

390 × 844
Claude Opus 5.5: Portada, móvil
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Portada, móvil
DeepSeek V4.1 Flash 1017

Índice de artículos

1440 × 900
Claude Opus 5.5: Índice de artículos
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Índice de artículos
DeepSeek V4.1 Flash 1017

Artículo, apertura

1440 × 900
Claude Opus 5.5: Artículo, apertura
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Artículo, apertura
DeepSeek V4.1 Flash 1017

Artículo, cuerpo

1440 × 900
Claude Opus 5.5: Artículo, cuerpo
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Artículo, cuerpo
DeepSeek V4.1 Flash 1017

Artículo, móvil

390 × 844
Claude Opus 5.5: Artículo, móvil
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Artículo, móvil
DeepSeek V4.1 Flash 1017

Menú abierto, móvil

390 × 844
Claude Opus 5.5: Menú abierto, móvil
Claude Opus 5.5
DeepSeek V4.1 Flash 1017: Menú abierto, móvil
DeepSeek V4.1 Flash 1017

// En vivo

Las dos webs, funcionando

Para el movimiento y la interacción. Con la sincronización activa, se mueven juntas.

Claude Opus 5.5 Abrir a pantalla completa ↗
DeepSeek V4.1 Flash 1017 Abrir a pantalla completa ↗

Con teclado, entra en un marco con Tab.

// Una crítica

Nota y crítica

Claude Opus 5.5 83,3/ 100
DeepSeek V4.1 Flash 1017 85,0/ 100

Las dos llegaron por separado a ideas parecidas: señal sintonizable, ilustraciones generativas, un solo rojo, notas al margen. Opus es más ruidosa y sistemática. DeepSeek, más contenida y mejor acabada.

Criterio Claude Opus 5.5 DeepSeek V4.1 Flash 1017 Por qué
Identidadpeso 20 9,0 9,0 Opus tiene la marca más memorable; DeepSeek, la más refinada.
Primera pantallapeso 15 7,0 9,0 DeepSeek enseña cabecera e historia principal a la vez. En Opus el titular principal queda bajo el pliegue.
Índicepeso 15 9,0 7,5 Opus da a cada historia su propia forma bajo un dial. DeepSeek repite la historia de portada y convierte medio número en una lista.
Lecturapeso 20 9,0 8,5 Las dos se leen bien. Opus tiene la pieza más larga, con gráfico y figura interactiva. DeepSeek muestra el progreso dos veces.
Móvilpeso 15 7,5 8,5 La portada móvil de DeepSeek parece pensada para ese tamaño. La cabecera de Opus se vuelve un bloque denso de estática.
Acabado técnicopeso 10 8,0 9,0 Las dos pasan todas las comprobaciones. DeepSeek aloja sus fuentes y añade colofón y 404; Opus depende de Google Fonts.
Procesopeso 5 8,0 7,0 Opus usó una cuarta parte de los tokens y menos de la mitad del tiempo, pero necesitó una instrucción extra para recuperar el movimiento.
Total 83,3 85,0

Claude Opus 5.5

Lo mejorUna idea llevada a todo: el número como banda de radio.

Lo primero que arreglaríaDar la primera pantalla a la historia principal y alojar las fuentes.

DeepSeek V4.1 Flash 1017

Lo mejorLa mejor primera pantalla y la web más autónoma.

Lo primero que arreglaríaMás variedad en el índice y un router que funcione bajo cualquier ruta.

Crítica de Claude Opus 5.5 · 2026-10-19

// El encargo

Lo que se pidió a cada modelo

El encargo · 506 palabras

Tu misión

Diseña y desarrolla una publicación digital experimental llamada SIGNAL / NOISE.

Es una revista independiente sobre tecnología, inteligencia artificial, cultura digital y el futuro de internet.

Queremos una web que pueda competir visualmente con los mejores proyectos de diseño editorial digital. Una experiencia con personalidad, no otra landing genérica de SaaS.

Tienes libertad creativa para decidir la dirección de arte, tipografía, composición, paleta cromática, animaciones y sistema visual.

No quiero que me expliques cómo diseñarías la web. Quiero que la construyas.

Producto

La web tendrá cuatro componentes principales:

1. Portada editorial

Una primera pantalla que establezca inmediatamente la identidad de la publicación.

Debe incluir el nombre SIGNAL / NOISE, el número de edición (ISSUE 001), una pieza editorial protagonista y una composición visual que resulte memorable.

2. Índice de artículos

Una selección de seis artículos ficticios, pero verosímiles, sobre tecnología y cultura digital.

No uses seis tarjetas idénticas. Diseña una composición editorial que permita distinguir historias protagonistas, artículos secundarios y contenidos breves.

3. Experiencia de lectura

Desarrolla al menos un artículo completo, al que se pueda acceder desde la portada.

Título del artículo: “The Internet Is Becoming a Place Without People”.

Incluye una entradilla, varios apartados, citas destacadas y algún recurso visual integrado en el contenido.

Debe ser una experiencia de lectura agradable y cuidada.

4. Navegación e interacciones

Implementa navegación funcional, transiciones, estados hover, indicadores visuales y pequeños detalles de interacción.

Las animaciones deben aportar algo a la experiencia, no ser decoración gratuita.

Requisitos técnicos

  • React, TypeScript y Tailwind CSS.
  • Puedes utilizar librerías de animación e iconos.
  • Diseño responsive para escritorio y móvil.
  • Accesibilidad básica, navegación por teclado y soporte para prefers-reduced-motion.
  • Nada de interfaces estáticas que solo aparenten funcionar.
  • No uses capturas de otras webs como sustituto del diseño.
  • Puedes usar fotografías o recursos visuales externos, pero intégralos en una dirección artística coherente.
  • El proyecto debe poder ejecutarse localmente.

Criterios de diseño

Buscamos:

  • Una identidad visual distintiva y reconocible.
  • Excelente jerarquía tipográfica.
  • Composiciones que aprovechen el espacio con intención.
  • Buen equilibrio entre experimentación y usabilidad.
  • Microinteracciones cuidadas.
  • Consistencia entre portada, índice y artículo.
  • Una versión móvil diseñada, no simplemente comprimida.

Evita:

  • El aspecto genérico de una plantilla.
  • Las seis tarjetas perfectamente alineadas.
  • Gradientes decorativos sin función.
  • Efectos llamativos que entorpezcan la lectura.
  • Componentes de UI innecesarios.
  • La apariencia típica de una landing de producto de IA.

Libertad creativa

No tienes que seguir ninguna referencia visual concreta.

Decide tú qué significa SIGNAL / NOISE como identidad editorial y cómo debe expresarse visualmente.

Puedes ser experimental, minimalista, brutalista, sofisticado o adoptar una dirección completamente diferente.

Lo importante es que tus decisiones tengan sentido como conjunto.

Entregable

Construye el proyecto completo.

Al finalizar, asegúrate de que funciona y proporciona una breve explicación (máximo 200 palabras) de las decisiones principales de dirección artística.

No me hagas preguntas ni solicites aprobación de la dirección visual. Toma las decisiones y ejecuta.

// Las mediciones

Lo que puede comprobar un script

Medido sobre las webs publicadas
Medida Claude Opus 5.5DeepSeek V4.1 Flash 1017
Pesoel HTML único, y comprimido con gzip 489 KB / 154 KB851 KB / 470 KB
Peticiones a tercerosdominios contactados al cargar fonts.googleapis.com, fonts.gstatic.comNinguna
Errores de consolaen todas las capturas 00
Desbordamiento horizontalportada y artículo a 390, 768, 1024, 1440 Ninguno en ningún anchoNinguno en ningún ancho
Con movimiento reducidoanimaciones en bucle y canvas que siguen moviéndose Todo se detieneTodo se detiene
axe-core, WCAG 2 A y AAportada y artículo, escritorio y móvil Ninguna regla incumplidaNinguna regla incumplida
Tokenssegún se declararon para la ejecución ≈ 195.000 · aproximado770.000
Tiemporeloj, según se declaró ≈ 17 min · aproximado40 min
Stacksegún lo declaró el modelo React 19, TypeScript, Tailwind CSS 4, Motion, ViteReact 19, TypeScript, Tailwind CSS 4, Vite 7, React Router 7
Capturadofecha y navegador 2026-10-19 · Chrome/155.0.8059.802026-10-19 · Chrome/155.0.8059.80