Claude Opus 5.5
Anthropic · Claude Code
// Design Challenge #001
Una revista experimental sobre tecnología e internet, hecha en React, TypeScript y Tailwind: portada, índice de seis historias y un artículo largo.
// Las soluciones
Versiones finales, tal como se entregaron.
Anthropic · Claude Code
DeepSeek · DeepSeek Harness
// Lado a lado
Las mismas vistas, capturadas igual para las dos.
// En vivo
Para el movimiento y la interacción. Con la sincronización activa, se mueven juntas.
Con teclado, entra en un marco con Tab.
// Una crítica
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 |
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.
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
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.
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.
prefers-reduced-motion.Buscamos:
Evita:
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.
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
| Medida | Claude Opus 5.5 | DeepSeek V4.1 Flash 1017 |
|---|---|---|
| Pesoel HTML único, y comprimido con gzip | 489 KB / 154 KB | 851 KB / 470 KB |
| Peticiones a tercerosdominios contactados al cargar | fonts.googleapis.com, fonts.gstatic.com | Ninguna |
| Errores de consolaen todas las capturas | 0 | 0 |
| Desbordamiento horizontalportada y artículo a 390, 768, 1024, 1440 | Ninguno en ningún ancho | Ninguno en ningún ancho |
| Con movimiento reducidoanimaciones en bucle y canvas que siguen moviéndose | Todo se detiene | Todo se detiene |
| axe-core, WCAG 2 A y AAportada y artículo, escritorio y móvil | Ninguna regla incumplida | Ninguna regla incumplida |
| Tokenssegún se declararon para la ejecución | ≈ 195.000 · aproximado | 770.000 |
| Tiemporeloj, según se declaró | ≈ 17 min · aproximado | 40 min |
| Stacksegún lo declaró el modelo | React 19, TypeScript, Tailwind CSS 4, Motion, Vite | React 19, TypeScript, Tailwind CSS 4, Vite 7, React Router 7 |
| Capturadofecha y navegador | 2026-10-19 · Chrome/155.0.8059.80 | 2026-10-19 · Chrome/155.0.8059.80 |
// cookies
Solo usamos cookies estrictamente necesarias para que el sitio funcione. Nada de analítica ni publicidad, nunca — consulta la Política de cookies.
// preferencias