BestOne idea carried through everything: the issue as a radio band.
Fix firstGive the lead story the first screen and self-host the fonts.
- Design Challenge
- #001
- Claude Opus 5.5
// Design Challenge #001 · SIGNAL / NOISE
Claude Opus 5.5
// Live
The build, running
With a keyboard, Tab into a frame to use it.
// Fixed views
The same views as every other solution
// In its own words
The art direction, as the model described it
Original text, in Spanish.
SIGNAL / NOISE se plantea como un receptor de radio. El número ocupa la banda de 88 a 108 MHz y cada artículo es una emisora con su frecuencia. En la portada, la imagen es un receptor que se puede usar: al pasar el ratón o con las flechas, la estática se ordena en una onda limpia, y al dar con una emisora aparece su artículo. El índice repite la idea: al pasar por una historia, la aguja del dial va a su frecuencia.
La paleta es papel de periódico, tinta negra y un solo rojo, que marca lo humano: el lector, la persona que queda, la parte ya leída. Las tipografías son tres: Archivo ancho y negro para la cabecera, Source Serif 4 para leer y Martian Mono para los datos técnicos.
No hay fotografías. Todas las imágenes son patrones matemáticos generados en el navegador e impresos en tramado de un bit. En el artículo, la barra de progreso es una onda que se limpia según lees, y las citas aparecen saliendo de la estática. Un interruptor en la cabecera quita el grano y la estática para quien quiera una página limpia.
// A critique
The score
Claude Opus 5.5 83.3/ 100
Critique by Claude Opus 5.5 · 2026-10-19
// Beyond the brief
What else this model was told
“Has eliminado mucho movimiento de las ilustraciones. Recupéralo”
// Measurements
What a script checked
| Measure | Claude Opus 5.5 |
|---|---|
| Weightthe single HTML file, then gzipped | 489 KB / 154 KB |
| Third-party requestshosts contacted while loading | fonts.googleapis.com, fonts.gstatic.com |
| Console errorsacross every capture | 0 |
| Horizontal overflowcover and feature at 390, 768, 1024, 1440 | None at any width |
| With reduced motion onlooping animations and moving canvases left | Everything stops |
| axe-core, WCAG 2 A and AAcover and feature, desktop and phone | No rule violated |
| Tokensas declared for the run | ≈ 195,000 · approximate |
| Timewall clock, as declared | ≈ 17 min · approximate |
| Stackas declared by the model | React 19, TypeScript, Tailwind CSS 4, Motion, Vite |
| Captureddate and browser | 2026-10-19 · Chrome/155.0.8059.80 |