Claude construiu um simulador de teclado esqueuomórfico em uma sessão — Transcrições públicas, backgrounds Unsplash com proxy CORS

Um desenvolvedor no r/ClaudeAI compartilhou um simulador de teclado esqueuomórfico construído em uma única sessão do Claude. O aplicativo, disponível em asdf.app.teenyapp.com, renderiza um teclado realista que acende conforme você digita no teclado físico. Pressionar Enter transmite a linha para uma transcrição pública visível a todos os visitantes.

Principais decisões técnicas

• Prompt inicial: "gravador de teclado com um histórico em rolo de calculadora acima, esqueuomórfico. Claude enviou a v1 em uma tentativa, mas genérica."
• Importação do Figma: O desenvolvedor enviou um arquivo Figma das teclas desejadas. Claude instalou fig kiwi (um parser comunitário para o formato binário do Figma), percorreu todos os 98 nós e extraiu gradientes e desfoques exatos. As recriações em CSS ficaram "aneladas" e muito nítidas — a solução foi portar todas as camadas SVG do Figma uma por uma.
• Lógica de digitação: A primeira versão usava uma div personalizada como entrada, então Cmd+SetaEsquerda e Cmd+Backspace não funcionavam. A solução foi usar um <input> oculto abaixo do display laranja, espelhando seu valor no texto visível e deixando o SO lidar com todos os atalhos nativamente.
• Planos de fundo: Fotos reais do Unsplash (mármore, nogueira, tábuas de celeiro, ardósia) buscadas através de um proxy CORS e servidas como WebP em cache.

Esta é uma demonstração prática de como o Claude pode ser guiado de uma ideia vaga para um aplicativo web funcional e polido em uma única sessão — se você estiver disposto a iterar no design e contornar peculiaridades da saída do LLM.