Claude construyó un simulador de teclado esqueuomórfico en una sola sesión — Transcripciones públicas, fondos de Unsplash con proxy CORS

Un desarrollador en r/ClaudeAI compartió un simulador de teclado esqueuomórfico construido en una sola sesión de Claude. La aplicación, disponible en asdf.app.teenyapp.com, muestra un teclado realista que se ilumina mientras escribes en tu teclado físico. Presionar Enter transmite la línea a una transcripción pública visible para todos los visitantes.

Decisiones técnicas clave

• Indicación inicial: "grabador de teclado con un historial de calculadora en cinta desplazándose arriba, esqueuomórfico. Claude envió la v1 en un solo paso, pero genérica."
• Importación de Figma: El desarrollador subió un archivo de Figma con las teclas deseadas. Claude instaló fig kiwi (un analizador comunitario para el formato binario de Figma), recorrió los 98 nodos y extrajo degradados y desenfoques exactos. Las recreaciones en CSS resultaron "anilladas" y demasiado nítidas; la solución fue portar todas las capas SVG de Figma una por una.
• Lógica de escritura: La primera versión usaba un div personalizado como entrada, por lo que Cmd+FlechaIzquierda y Cmd+Retroceso no funcionaban. La solución fue usar un <input> oculto debajo de la pantalla naranja, reflejando su valor en el texto visible y dejando que el sistema operativo manejara cada atajo de forma nativa.
• Fondos: Fotos reales de Unsplash (mármol, nogal, granero, pizarra) obtenidas a través de un proxy CORS y servidas como WebP en caché.

Esta es una demostración práctica de cómo Claude puede ser guiado desde una idea vaga hasta una aplicación web funcional y pulida en una sola sesión, si estás dispuesto a iterar sobre el diseño y trabajar alrededor de las peculiaridades de salida del LLM.