Клод создал скевоморфный симулятор клавиатуры за один сеанс — публичные транскрипты, обои Unsplash через CORS-прокси

Разработчик на r/ClaudeAI поделился симулятором скевоморфной клавиатуры, созданным за один сеанс Claude. Приложение, доступное по адресу asdf.app.teenyapp.com, отображает реалистичную клавиатуру, которая подсвечивается при наборе на физической клавиатуре. Нажатие Enter отправляет строку в публичную стенограмму, видимую всем посетителям.

Ключевые технические решения

• Начальный запрос: «рекордер клавиатуры с историей в стиле калькуляторной ленты, прокручивающейся вверх, скевоморфный. Claude выдал v1 за один проход, но слишком общую.»
• Импорт из Figma: Разработчик загрузил файл Figma с нужными клавишами. Claude установил fig kiwi (парсер бинарного формата Figma от сообщества), прошелся по всем 98 узлам и извлек точные градиенты и размытия. CSS-реконструкции вышли «кольцевыми» и слишком резкими — исправление заключалось в переносе всех слоев SVG из Figma один за другим.
• Логика набора: Первая версия использовала кастомный div в качестве ввода, поэтому Cmd+ArrowLeft и Cmd+Backspace не работали. Исправление заключалось в использовании скрытого <input> под оранжевым дисплеем, зеркально отражающего его значение в видимый текст, чтобы ОС нативно обрабатывала все сочетания клавиш.
• Фоны: Настоящие фото Unsplash (мрамор, орех, barnwood, сланец), полученные через CORS-прокси и возвращаемые в виде кэшированных WebP.

Это практическая демонстрация того, как Claude можно провести от смутной идеи до законченного функционального веб-приложения за один сеанс — если вы готовы итерировать дизайн и обходить причуды вывода LLM.